如何在React Native应用中为Apollo Client添加请求头

嘿，我来帮你搞定这个问题～其实核心是利用Apollo的链接拦截能力，在每个请求发送前从AsyncStorage异步获取令牌并注入到请求头里，完美适配你用的createUploadLink。下面是具体实现：

完整代码示例 #

首先注意：React Native官方现在已经把AsyncStorage移到了@react-native-async-storage/async-storage包，所以先确保你已经安装了它（npm install @react-native-async-storage/async-storage 或 yarn add @react-native-async-storage/async-storage）。

如果你用的是Apollo Client v2（对应你原代码的依赖） #

import AsyncStorage from '@react-native-async-storage/async-storage';
import { ApolloClient } from 'apollo-client';
import { createUploadLink } from 'apollo-upload-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { setContext } from 'apollo-link-context';

// 1. 创建基础的上传链接
const uploadLink = createUploadLink({
  uri: '你的GraphQL API地址', // 替换成你的实际API地址
});

// 2. 创建认证拦截链接，动态添加令牌头
const authLink = setContext(async (_, { headers }) => {
  // 从AsyncStorage异步获取令牌
  const token = await AsyncStorage.getItem('authToken');
  
  // 返回修改后的请求头：如果有令牌就添加Authorization字段，格式根据后端要求调整
  return {
    headers: {
      ...headers, // 保留原有请求头
      ...(token ? { Authorization: `Bearer ${token}` } : {}),
    },
  };
});

// 3. 组合链接：先经过认证拦截处理请求头，再交给上传链接处理文件上传
const client = new ApolloClient({
  link: authLink.concat(uploadLink),
  cache: new InMemoryCache(),
});

export default client;

如果你用的是更推荐的Apollo Client v3+ #

v3版本把多个依赖整合到了@apollo/client包里，代码调整如下：

import AsyncStorage from '@react-native-async-storage/async-storage';
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import { createUploadLink } from 'apollo-upload-client';

const uploadLink = createUploadLink({
  uri: '你的GraphQL API地址',
});

const authLink = setContext(async (_, { headers }) => {
  const token = await AsyncStorage.getItem('authToken');
  return {
    headers: {
      ...headers,
      ...(token ? { Authorization: `Bearer ${token}` } : {}),
    },
  };
});

const client = new ApolloClient({
  link: authLink.concat(uploadLink),
  cache: new InMemoryCache(),
});

export default client;

关键说明 #

• 异步获取令牌：因为AsyncStorage.getItem是异步操作，所以我们在setContext里用了async/await，确保拿到令牌后再修改请求头。
• 链接组合顺序：一定要让authLink先处理请求（添加头），再把请求传给uploadLink，这样上传请求就能携带令牌了。
• 令牌格式：示例里用了Bearer ${token}的格式，这是最常见的JWT令牌格式，如果你的后端要求其他格式（比如直接传令牌字符串），直接修改Authorization的值即可。
• 令牌存储：确保你在用户登录成功后，把令牌存入AsyncStorage：await AsyncStorage.setItem('authToken', '用户登录后拿到的令牌')。

内容的提问来源于stack exchange，提问作者user3142695