React Apollo Link - 如何在使用 <Query /> 和 <Mutation /> 组件之外向 GraphQL 服务器查询身份验证令牌？答案

【问题标题】：React Apollo Link - How to query a GraphQL server for an auth token outside of using <Query /> and <Mutation /> components?React Apollo Link - 如何在使用 <Query /> 和 <Mutation /> 组件之外向 GraphQL 服务器查询身份验证令牌？
【发布时间】：2026-01-03 01:05:01
【问题描述】：

在阅读了很多关于如何处理 Apollo React 重新认证的文章后，我确定我需要编写自己的逻辑来处理检查过期的 JWT、刷新令牌，然后继续操作。我不想从错误重定向到任何类型的登录页面，或者等到发生错误时刷新我的令牌。

所以我稍微遵循了 Apollo 文档，将令牌附加到每个请求的标头。这工作得很好：

const authLink = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers = {} }) => {
    const token = localStorage.getItem('token');

    // TODO: Check if token is expired. If so, fetch a new one from GraphQL server and THEN
    // move forward with operation

    // If token exists, add to headers
    if (token) {
      headers = { ...headers,authorization: token ? `Bearer ${token}` : "", };
    }

    return { headers };
  });

  return forward(operation);
});


const httpTopicsServiceLink = createHttpLink({
  uri: 'http://localhost:4000/topics',
});

export const TopicsClient = new ApolloClient({
  link: authLink.concat(httpTopicsServiceLink),
  cache: new InMemoryCache(),
});

但是，在authLink 函数内部，我想检查令牌是否已过期，以便能够将 GraphQL 突变发送到服务器以刷新我的令牌，然后转发我的操作。由于我一直在 Apollo <Query /> 和 <Mutation /> 组件内执行所有 GraphQL 查询和突变，我不确定如何向 GraphQL 服务器发出隔离请求以完成此类功能。我能做什么？

【问题讨论】：

标签： graphql apollo react-apollo

【解决方案1】：

您可以使用 TopicsClient 将 quarries 和 mutation 发送到 graphql 服务器。

const client = new ApolloClient({
  link: new ApolloLink((operation, forward) => {...}),
  cache: new InMemoryCache()
});

客户端应该可以在 ApolloLink 构造中访问。

【讨论】：