Question

我有一个身份验证流程react-native / apollo / graphql，我需要将令牌保存到graphql Bearer的setContext Apollo中。 Apollo客户端从头开始初始化，并且用户仅在身份验证屏幕后才获得令牌。这意味着我将在验证用户身份后初始化一个新的Apollo客户端。为此，我需要在App根组件中使中间件起作用，该组件将在用户获得令牌时启动。为此，我需要向中间件发送信号。您能否告诉我，这是在App中使用钩子const [token，setToken] = useState（false）创建状态并将其像道具一样发送到链条的好方法。当用户获得令牌=>令牌（true）=> getTokensMiddleware（令牌）=> setContext（令牌）

import React, { useState } from 'react'
import { ApolloProvider } from 'react-apollo'
import { ApolloProvider as ApolloHooksProvider } from 'react-apollo-hooks'
import { ApolloClient } from 'apollo-client'
import { ApolloLink } from 'apollo-link'
import { createHttpLink } from 'apollo-link-http'
import { setContext } from 'apollo-link-context'
import { InMemoryCache } from 'apollo-cache-inmemory'
import * as Keychain from 'react-native-keychain'
import AppNavigator from './AppNavigator'

const httpLink = createHttpLink({
  uri: 'http://localhost:4000'
})

const authLink = setContext(async (req, { headers, ...context }) => {
  console.log('context', context)
  const tokens = await Keychain.getGenericPassword()
  console.log('tokensSetContext', tokens)
  const accessToken = tokens.username
  console.log('accessTokenSetContext', accessToken)
  return {
    headers: {
      ...headers,
      authorization: accessToken ? `Bearer ${accessToken}` : ''
    },
    ...context
  }
})

const client = new ApolloClient({
  link: ApolloLink.from([authLink, httpLink]),
  cache: new InMemoryCache(),
  connectToDevTools: true
})

const App = () => {
  const [tokens, setTokens] = useState(false)
  return (
    <ApolloProvider client={client}>
      <ApolloHooksProvider client={client}>
        <AppNavigator />
      </ApolloHooksProvider>
    </ApolloProvider>
  )
}

export default App

将道具从根组件发送到子组件，以获取setContext Apollo的响应

0 个答案: