我可以从组件中的单个查询覆盖 Apollo Client headers 吗？

Question

当我初始化我的 Apollo 客户端时，我用 header hello: "world" 创建了一个 Apollo Link。有没有办法使用挂钩覆盖组件的 hello header 值？我认为这可行，但它仍然使用客户端 header:

useQuery(<QUERY>,{
    context:{
        headers:{
            hello: "Canada"
        }
    }
})

Answer 1

您的代码似乎是正确的。在做了一些测试后，似乎无法覆盖现有的 headers.

  const { data, loading, error } = useQuery(ALL_GAMES, {
    context: { headers: { authentication: 'some value', test: 'some value' } }
  });

也许如果您将一个全新的客户端传递给 useQuery - 您可以使用工厂函数创建客户端

Answer 2

我运行在尝试覆盖请求的授权 header 时遇到了同样的问题。当我在 link 中设置 header 时，我通过传播 operation.getContext().headers 解决了这个问题。代码：

const authLink = new ApolloLink((operation, forward) => {
    operation.setContext({
      headers: {
        authorization: authToken,
        ...operation.getContext().headers,
      },
    });

    return forward(operation);
  });

那么您包含的代码应该会按预期工作。

我可以从组件中的单个查询覆盖 Apollo Client headers 吗？

Can I override Apollo Client headers from individual queries in my components?

reactjs

react-apollo