在 Apollo 客户端中，如何在成功突变后使用标头执行 refetchQueries？答案

【问题标题】：In Apollo client, how to do refetchQueries with headers after a succesful mutation?在 Apollo 客户端中，如何在成功突变后使用标头执行 refetchQueries？
【发布时间】：2019-06-20 14:26:15
【问题描述】：

我在使用 Apollo 客户端时遇到了一些麻烦，想知道是否有人可以帮助我。

在成功的突变返回不记名令牌后，如何重新运行我的查询（带有标头）？

我发现有一个叫做 refetchQueries 的东西，但它似乎忽略了所有标题，因此我的不记名令牌也是如此。

假设我的登录组件中有以下突变：

<Mutation
  mutation={LOGIN_USER}
  refetchQueries={[{
    query: GET_USER,
  }]}
>
  {(loginUser, { loading, error, data }) => {
    if (data) {
      cookies.set('token', data.loginUser.token)
    }
    return (
      <form...

以及我的 App.js 中的以下 authLink：

const authLink = setContext((_, { headers }) => {
  const token = cookies.get('token')

  return {
    headers: {
      ...headers,
      authorization: token  ? `Bearer ${token}`  : null
    },
  }
})

问题似乎是使用 refetchQueries 时 authLink 不起作用（不发送标头）。当我刷新浏览器时，我的查询工作正常，因为随后使用 cookie 来获取令牌，但 refetchQueries 似乎不会发生这种情况......

那么如何在标头中带有不记名令牌的突变后运行我的查询，或者有更好的方法吗？

干杯

【问题讨论】：

你解决了这个问题吗？我目前遇到了完全相同的问题。

标签： reactjs graphql apollo-client

【解决方案1】：

我不知道您是如何定义查询和突变的，但是 refetchQueries 可以采用一个字符串数组来命名要重新获取的查询。我发现这很适合我的需要。为此，您需要命名您的查询。在 gql 标记内，声明您的查询，如

const GET_USER = gql`
query getUser($id: ID) {
  user(id: $id) {
    name
  }
}
`

然后你只用 ['getUser'] 调用 refetchQueries

关于设置 Apollo 自动设置每个请求的授权标头，请看docs中的示例

向下滚动到关于中间件的部分

【讨论】：