Как добавить заголовки в HttpLink в React Apollo

Я хотел ввести токен в свои запросы graphql. Где я должен разместить свой токен авторизации?

Вот мой код в apollo.js:

import { withData } from 'next-apollo'
import { HttpLink } from 'apollo-link-http'

export const config = {
  link: new HttpLink({
    uri: 'http://localhost:8000/graphql/', // Server URL (must be absolute)
    opts: {
      credentials: 'include', // Additional fetch() options like `credentials` or `headers`
    }
  })
}

export default withData(config)

Вот как я делаю запросы:

const MYJOBS = gql`
  {
    myJobs {
      role {
        name
      }
      school {
        name
      }
    }
  }
`

<Query query = {MYJOBS}>

reactjs graphql token apollo

17.03.2019 19:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

2 027

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Согласно документации аполлон-графql, мы можем сделать это с помощью setContext — установить apollo-link-context и выполнить import { setContext } from 'apollo-link-context' вверху вашего файла:

const authLink = setContext((_, { headers }) => {
  // get the authentication token from whereever it exists - This is your choice.
  const token = localStorage.getItem('token');
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

const httpLink = new HttpLink({
    uri: 'http://localhost:8000/graphql/', // Server URL (must be absolute)
    opts: {
      credentials: 'include', // Additional fetch() options like `credentials` or `headers`
    }
})

И затем в вашей конфигурации:

export const config = {
  link: authLink.concat(httpLink)
}

Это будет автоматически включать авторизацию/учетные данные при каждом запросе, который мы делаем.

Надеюсь, это полезно.

17.03.2019 20:39

Ответ принят как подходящий

Наконец, мой друг предложил добавить context к Query, и это сработало!

<Query
 query = {ME}
 context = {{
     headers: {
         authorization: JWT ${localStorage.getItem('token')}
     }
 }} >

21.11.2019 11:41

Вот новый подход с использованием @apollo/client:

Ссылка из официальной документации

30.09.2020 08:12

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

Мутация GraphQL: нарушение инварианта: должно содержать определение запроса

В контексте Cypress: как дождаться запроса Graphql клиента Apollo

Подписка GraphQL с использованием отправленных сервером событий и EventSource

Как я могу получить сопоставленные имена типов для типа graphQL, используя type-graphql

Graphql-yoga — где определены и задокументированы аргументы преобразователя GraphQL?

Аутентификация Windows с использованием Express и GraphQL

Глубокая фильтрация Dgraph

Как включить компонент карусели в Gatsby с помощью Contentful?

Последовательная ассоциация генерирует поля, которых не существует

GraphQL.NET: как разделить корневой запрос на несколько частей

Как добавить заголовки в HttpLink в React Apollo

Ответы 3

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

Похожие вопросы