Question

由于Apollo链接中间件似乎是在构造时定义的，所以我想知道如何传递动态标头。

具体来说，我有一个身份验证系统，其中signIn和signUp不需要令牌头。但是，任何经过身份验证的API调用都单独依赖于令牌来获得用户上下文。因此，在存在令牌的情况下（localStorage.getItem（'token'）;），它将使用该令牌进行身份验证。否则，它将使用从signUp / signIn返回的令牌进行身份验证。

所以我想知道如何将标头动态传递给查询/变异组件。

<Query query={query}>
    {({ loading, error, data }) => {
        if (loading) return "Loading...";
        if (error) return `Error! ${error.message}`;
        return (
            <select className={"CompanySelector"}>
                {data.companies.map(companies => (
                    <option className={"CompanySelection"} key={companies.id} value={companies.name}>
                        {companies.name}
                    </option>
                ))}
            </select>
        );
    }}
</Query>

我尝试包装查询，但是Apollo似乎没有将graphql函数作为参数。

export const wrap = (query, token) => {
    return graphql(query, {
        options: {
            context: {
                headers: {
                    'x-token': token
                }
            }
        }
    })
};

以下是查询：

export const COMPANIES = gql`
    query companies{
        companies{
            name, id
        }
    }
`;

Answer 1

context支持<Query context={{ headers: { 'x-token': localStorage.getItem('token') } }} > {({ loading, data }) => // render the stuff </Query>道具，因此您可以使用它来配置特定于查询的授权：

opt

并通过Apollo客户端的fetch函数中的const httpLink = new HttpLink({ # ..., fetch: (uri, opts) => window.fetch(uri, { ...opts, headers: { 'x-token': opts.headers && opts.headers['x-token'] || getTokenDefaultWay() } }) }) )处理自定义标头：

{{1}}

Apollo GraphQL的动态标头（中间件外部）

1 个答案: