По промежуточного слоя Apollo Link не добавляются пользовательские заголовки к запросам

Я пытаюсь добавить токены аутентификации во все свои HTTP-запросы через промежуточное ПО Apollo. Похоже, что мое промежуточное ПО никогда не увольняется. Я получаю доступ к серверу на localhost: 8081, с клиента на localhost: 8080. Я новичок в Apollo, поэтому у меня может возникнуть недопонимание насчет ApolloLink.

const httpLink = new HttpLink({ uri: 'http://localhost:8081/graphql' });

const getTokenMiddleware = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers }) => ({
    headers: {
      ...headers,
      'x-token': localStorage.getItem('token') || null,
      'x-refresh-token': localStorage.getItem('refreshToken') || null,
    },
  }));

  return forward(operation);
});

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: from([
    getTokenMiddleware,
    httpLink
  ]),
  uri: 'http://localhost:8081/graphql',
});

вот заголовок, который я получаю на сервере

headers: { 
     host: 'localhost:8081',
     connection: 'keep-alive',
     'content-length': '351',
     accept: '*/*',
     origin: 'http://localhost:8080',
     'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36',
     'content-type': 'application/json',
     dnt: '1',
     referer: 'http://localhost:8080/register',
     'accept-encoding': 'gzip, deflate, br',
     'accept-language': 'en-US,en;q=0.9' 
}

Помогает ли добавление credentials: 'include' в параметры ссылки, посмотрите здесь: apollographql.com/docs/react/recipes/authentication.html и здесь: github.com/github/fetch

Andreas Köberle 13.04.2018 08:31

После нескольких дней ударов головой о стол я попытался переключить свой импорт ApolloClient с «apollo-boost» на импорт {ApolloClient} из «apollo-client», и теперь он работает, как ожидалось. У меня сложилось впечатление, что apollo-boost был альтернативой apollo-client, но я полагаю, что api немного другие.

Jordan Hensley 13.04.2018 21:57

@JordanHensley Да. ты прав. apollo-boost отстой.

slideshowp2 23.04.2018 05:29

Три часа спустя я нахожу ответ в комментарии к вопросу с двумя положительными голосами ... Это действительно плохая реализация, чтобы не выдавать никаких ошибок или, по крайней мере, предупреждений в такой ситуации. Ссылка http была полностью неконфигурируемой, не говоря уже о том, что я следую пошаговому руководству из официального источника ... спасибо, что помогли мне :)

chosta 12.07.2018 17:54
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
5
4
2 392
1

Ответы 1

Вот несколько необходимых шагов. Я надеюсь это решит твою проблему

// 1 HttpLink that will connect your ApolloClient instance with the GraphQL API (If you have multiple URL's)
const httpLink = split(
  operation => operation.getContext().type === 'public',
  new HttpLink({ uri: `${GraphQLURLPublic}/query` }),
  new HttpLink({ uri: `${GraphQLURLPrivate}/query` }),
);

// 2 Added Middleware to Insert Authorization Header If Required
// Split URL to two different endpoints If the type is Private it will Token in header else it won't
const authLink = setContext((operation, previousContext) => {
  const { headers, type } = previousContext;
  if (type === 'public') {
    return previousContext;
  }

  //You access token to make call
  const accessToken = 'xtz'
  if (accessToken) {
    return {
      ...previousContext,
      headers: {
        ...headers,
        authorization: accessToken
      },
    };
  }

  return { ...previousContext };
});


// 3 Added error handling
const ErrorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.info(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
      ),
    );

  if (networkError) console.info(`[Network error]: ${networkError}`);
});

// 4 concat all links, NOTE: httpLink must be last
const link = ApolloLink.from([authLink, ErrorLink, httpLink]);

// 5 Instantiate ApolloClient by passing in the composed link and a new instance of an InMemoryCache.
const graphqlConfig = new ApolloClient({ link, cache: new InMemoryCache(), queryDeduplication: false });

Другие вопросы по теме