React native 登录后如何刷新apollo客户端中的令牌

我从阿波罗开始。我在登录后更新令牌时遇到问题。它总是获取存储在异步存储中的上一个令牌。当我进入主页（登录后），执行查询时，返回auth错误。我正在使用Apollo和ReactNative和typescript。 以下是我的应用程序、登录名和console.log的代码： 提前谢谢

App.tsx

import { registerRootComponent } from 'expo'
import AsyncStorage from '@react-native-async-storage/async-storage'
import { StatusBar } from 'expo-status-bar'
import React from 'react'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import AppLoading from 'expo-app-loading'
import { useFonts } from 'expo-font'
import {
  ApolloClient,
  ApolloLink,
  InMemoryCache,
  HttpLink,
  concat
} from '@apollo/client'
import { ApolloProvider } from '@apollo/react-hooks'
import { createUploadLink } from 'apollo-upload-client'

import { MainStackNavigator } from '../src/navigation/MainStackNavigator'

function App() {
  const isLoadingComplete = (
    <AppLoading
      startAsync={this._cacheResourcesAsync}
      onFinish={() => this.setState({ isReady: true })}
      onError={console.warn}
    />
  )
  const [fontsLoaded] = useFonts({
    Poppins: require('../assets/fonts/Poppins.ttf'),
    'Poppins-Bold': require('../assets/fonts/Poppins-Bold.ttf')
  })
  if (!fontsLoaded) {
    return <AppLoading />
  }

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

  const getToken = async () => {
    const token = await AsyncStorage.getItem('token')
    return token
  }

  const token = getToken()

  const authMiddleware = new ApolloLink((operation, forward) => {
    operation.setContext({
      headers: {
        authorization: token ? `Bearer ${token}` : ''
      }
    })

    console.log('Token from App.tsx >>>>> ', token)

    return forward(operation)
  })

  // createUploadLink()

  const client = new ApolloClient({
    cache: new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            departments: {
              merge(existing, incoming) {
                return incoming
              }
            },
            outsources: {
              merge(existing, incoming) {
                return incoming
              }
            },
            users: {
              merge(existing, incoming) {
                return incoming
              }
            }
          }
        }
      }
    }),
    link: concat(authMiddleware, httpLink)
  })

  if (!isLoadingComplete) {
    return null
  } else {
    return (
      <ApolloProvider client={client}>
        <SafeAreaProvider>
          <MainStackNavigator />
          <StatusBar />
        </SafeAreaProvider>
      </ApolloProvider>
    )
  }
}

registerRootComponent(App)

Login.tsx

const setToken = async token => {
  await AsyncStorage.setItem('token', token)
  console.log('=== Token after login ==> ', token)
  return token
}

export function Login({ navigation }: Props) {
  const [
    login,
    { data: loginData, loading: mutationLoading, error: mutationError }
  ] = useMutation(LOGIN, {
    onCompleted: loginData => setToken(loginData.login.token)
  })

---

我也有同样的问题。检查了异步存储的文档。Get item返回一个承诺：

parse（token）修复了它，并可以获取令牌的字符串

const setToken = async token => {
  await AsyncStorage.setItem('token', token)
  console.log('=== Token after login ==> ', token)
  return token
}

export function Login({ navigation }: Props) {
  const [
    login,
    { data: loginData, loading: mutationLoading, error: mutationError }
  ] = useMutation(LOGIN, {
    onCompleted: loginData => setToken(loginData.login.token)
  })