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

Posted 2023-03-08

【中文标题】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?

【发布时间】：2020-01-18 13:17:58

【问题描述】：

在阅读了很多关于如何处理 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 服务器发出隔离请求以完成此类功能。我能做什么？

【参考方案1】：

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

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

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