Динамические заголовки для Apollo GraphQL (за пределами промежуточного ПО - PullRequest
Новая
       19

Динамические заголовки для Apollo GraphQL (за пределами промежуточного ПО

0 голосов
/ 02 июля 2019

Поскольку промежуточное программное обеспечение Apollo link, похоже, определяется при создании, мне интересно, как бы я мог передавать динамические заголовки.

В частности, у меня есть система аутентификации, где 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
        }
    }
`;

1 Ответ

1 голос
/ 03 июля 2019

Query поддерживает context проп, поэтому вы можете использовать его для настройки авторизации для конкретного запроса: 

<Query
  context={{
    headers: {
      'x-token': localStorage.getItem('token')
    }
  }}
>
  {({ loading, data }) => // render the stuff
</Query>

И обрабатывайте пользовательские заголовки с помощью opt в функции fetch вашего клиента Apollo: 

const httpLink = new HttpLink({
    # ...,
    fetch: (uri, opts) =>
      window.fetch(uri, {
        ...opts,
        headers: {
          'x-token': opts.headers && opts.headers['x-token'] || getTokenDefaultWay()
        }
      })
  })
)
...