Question

这就是我在我的本机应用程序中使用上传链接定义apollo客户端的方法。

我想添加一些带有标记值的标头，该标记值随每个请求一起发送。但不幸的是，我没有找到反应原生的例子。

import { AsyncStorage } from 'react-native'
import { ApolloClient } from 'apollo-client'
import { createUploadLink } from 'apollo-upload-client'
import { InMemoryCache } from 'apollo-cache-inmemory'

const client = new ApolloClient({
  link: createUploadLink({
    uri: 'http://localhost:3000/graphql'
  }),
  cache: new InMemoryCache()
})

我想在标题中发送此值：

const token = await AsyncStorage.getItem('auth.token')

更新

我不知道如何将令牌从AsyncStorage插入标头。 Await无法在此处工作，因为它未在异步函数中使用：

const token = await AsyncStorage.getItem('auth.token') // await can't work here

// Initiate apollo client
const client = new ApolloClient({
  link: createUploadLink({
    uri: 'http://localhost:3000/graphql',
    headers: {
      authorization: token
    }
  }),
  cache: new InMemoryCache()
})

// Wrap apollo provider
const withProvider = (Component, client) => {
  return class extends React.Component {
    render () {
      return (
        <ApolloProvider client={client}>
          <Component {...this.props} client={client} />
        </ApolloProvider>
      )
    }
  }
}

export default async () => {
  Navigation.registerComponent('MainScreen', () => withProvider(MainScreen, client))

  Navigation.startSingleScreenApp({
    screen: {
      screen: 'MainScreen'
    }
  })
}

Answer 1

createUploadLink有一个与createHttpLink headers属性匹配的headers属性。

标题：表示要作为请求上的标题发送的值的对象

<强>示例

builder.fields_for

<强>更新

const token = await AsyncStorage.getItem('auth.token')

const client = new ApolloClient({
  link: createUploadLink({
    uri: 'http://localhost:3000/graphql',
    headers: {
      "Some-Custom-Header": token
    }
  }),
  cache: new InMemoryCache()
})

Answer 2

我正在使用apollo boost，我所做的是

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'http://localhost:3000/graphql',
  request: async (operation) => {
    const token = await AsyncStorage.getItem('token');
    operation.setContext({
      headers: {
        authorization: token
      }
    });
  }
}

Answer 3

在getItem上使用回调也可以

import { ApolloClient, HttpLink, ApolloLink, InMemoryCache } from 'apollo-boost'

const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql',
})

const authLink = new ApolloLink((operation, forward) => {
  AsyncStorage.getItem('AuthToken').then(token => {
    operation.setContext({
      headers: {
        authorization: token ? `Bearer ${token}` : '',
      },
    })
  })
  return forward(operation)
})

const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  link: authLink.concat(httpLink),
})

Answer 4

至于 2021 年 6 月，我创建了一个适用于 AsyncStorage 和 React-Redux 的 gist 文件解决方案。如果您不想安装任何其他依赖项，例如 apollo-boost，因为您使用的是 apollo-client，这适合您。我希望它也适用于您。

附言

此实现用于在您的 apoll-client graphql 请求上设置 token 或 authentication 标头

如何在反应本机应用程序中为apollo客户端添加标头

4 个答案: