Не могу установить заголовок аутентификации для клиента Apollo - PullRequest
Новая
       20

Не могу установить заголовок аутентификации для клиента Apollo

0 голосов
/ 07 мая 2018

Я работаю над приложением Laravel, которое использует React и Redux на стороне клиента, с предустановкой React и Mix. Я решил попробовать GraphQL для API, а не обычный подход REST API, и пока он работает нормально. Однако теперь я застрял.

Я использую Apollo в качестве HTTP-клиента, поскольку он создан для работы с GraphQL. В прошлом я использовал JWT Auth для защиты API, поэтому, естественно, я также использовал этот подход, поскольку реализация - это всего лишь случай добавления соответствующего заголовка. Я следовал инструкции по установке заголовков с помощью Apollo , но заголовки не устанавливаются. Вот этот файл JS: 

import LinkList from './components/LinkList';
import React from 'react';
import ReactDOM from 'react-dom';
import {Container} from './container';
import {createStore} from 'redux';
import reducer from './reducer';
import {Provider} from 'react-redux';
import {fromJS} from 'immutable';
import ApolloClient from 'apollo-boost';
import gql from 'graphql-tag';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';

const httpLink = createHttpLink({
    uri: window.initialData.graphql_route
});

const authLink = setContext((_, { headers }) => {
    const token = window.initialData.jwt;
    // return the headers to the context so httpLink can read them
    return {
        headers: {
            ...headers,
            authorization: token ? `Bearer ${token}` : "",
        }
    }
});

const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
});

client.query({
    query: gql`{
        links {
            id
            title
            link
        }}`
}).then(result => console.log(result));

const store = createStore(
    reducer,
    fromJS(window.initialData),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

if (document.getElementById('list')) {
    ReactDOM.render(
        <Provider store={store}>
            <Container />
        </Provider>,
        document.getElementById('list')
    );
}

Я заполняю window.initialData в представлении, и оно содержит необходимые данные, включая токен JWT, как window.initialData.jwt. Установка точки останова внутри определения authLink ничего не делает, подразумевая, что она никогда не вызывается.

Есть идеи, что пошло не так? Я очень внимательно следил за примерами в документации, поэтому я могу думать только о том, что они могут быть устаревшими.

1 Ответ

0 голосов
/ 21 мая 2018

Вы используете ApolloClient из 'apollo-boost', но ваша конфигурация токена предназначена для другого ApolloClient, {ApolloClient} из 'apollo-client'.

Если вы хотите сохранить токен с помощью ApolloClient из apollo-boost: 

const client = new ApolloClient({
  uri: ...,
  request: async operation => {
    const token = localStorage.getItem('token');
    operation.setContext({
      headers: {
        authorization: token ? `Bearer ${token}` : ''
      }
    });
   }
});

Миграция Apollo Boost

...