Можно ли установить собственные заголовки для urql?

Question

API Github GraphQL v4 имеет так называемые предварительные просмотры схемы, где вы можете использовать новые функции схемы, но для этого требуется настраиваемыйAccept заголовок.

Раньше я использовал клиент Apollo, но хотел бы попробовать это новое приложение с URL-адресом Formidables. Есть ли способ установить заголовки клиентов с помощью клиента urql?

Обновить

Я думаю, что это вошло в кодовую базу, это просто не задокументировано - https://github.com/FormidableLabs/urql/pull/96/files

Answer 1

Просматривая источник, следующие urql createClient у меня работает:

const client = createClient({
  url: 'https://api.github.com/graphql',
  fetchOptions: {
    headers: {
      Authorization: `bearer ${GITHUB_TOKEN}`,
      Accept: 'application/vnd.github.packages-preview+json',
    },
  },
})

Обновить

На самом деле есть лучший способ сделать это, чем мой первоначальный ответ. createClient принимает функцию для fetchOptions. Итак, если токен присутствует, он будет добавлен вAuthorization заголовок

const client = createClient({
  url: 'http://localhost:8000/graphql/',
  // add token to header if present
  fetchOptions: () => {
    const token = getToken()
    return token ? { headers: { Authorization: `Bearer ${token}`, Accept: 'application/vnd.github.packages-preview+json' }} : {}
  },
})

Answer 2

Для настройки асинхронного токена вы можете использовать обмен аутентификацией

      import { createClient, dedupExchange, cacheExchange, fetchExchange } from 'urql';
import { authExchange } from '@urql/exchange-auth';

const getAuth = async ({ authState, mutate }) => {
  if (!authState) {
    const token = await getToken();
    const refreshToken = await getRefreshToken();
    if (token && refreshToken) {
      return { token, refreshToken };
    }
    return null;
  }

  return null;
};

const addAuthToOperation = ({ authState, operation }) => {
  if (!authState || !authState.token) {
    return operation;
  }

  const fetchOptions =
    typeof operation.context.fetchOptions === 'function'
      ? operation.context.fetchOptions()
      : operation.context.fetchOptions || {};

  return makeOperation(operation.kind, operation, {
    ...operation.context,
    fetchOptions: {
      ...fetchOptions,
      headers: {
        ...fetchOptions.headers,
        Authorization: authState.token,
      },
    },
  });
};

const client = createClient({
  url: '/graphql',
  exchanges: [
    dedupExchange,
    cacheExchange,
    authExchange({
      getAuthToken,
      addAuthToOperation,
    }),
    fetchExchange,
  ],
});

Answer 3

Вот что я использую, и это нормально работает:

      const client = createClient({
  url: 'yoururl',
  fetchOptions: {
    headers: {
      'content-type': 'application/json',
      'x-hasura-admin-secret':'********'
    },
  },
});