Как установить заголовок авторизации для клиента Urql?

#graphql #next.js #supabase #urql

Вопрос:

У меня есть приложение NextJS, в котором я внедряю Супабазу для аутентификации и вместо этого пытаюсь удалить Apollo с помощью Urql.

В моем urql.ts файле я создаю клиента как такового:

 import { createClient, ssrExchange, dedupExchange, fetchExchange } from 'urql';
import { cacheExchange } from '@urql/exchange-graphcache';
import { devtoolsExchange } from '@urql/devtools';

const isServerSide = typeof window === 'undefined';
const ssrCache = ssrExchange({
  isClient: !isServerSide,
  initialState: !isServerSide ? window.__URQL_DATA__ : undefined,
});

const client = createClient({
  url: '/api/graphql',
  exchanges: [
    devtoolsExchange,
    dedupExchange,
    cacheExchange({}),
    ssrCache,
    fetchExchange,
  ],
  fetchOptions: () => {
    return {
      credentials: 'include',
      headers: { Authorization: `Bearer ${token}` }, // how to return token?
    };
  },
});

export { client, ssrCache };
 

Я пытаюсь понять, как на самом деле вернуть токен? Поскольку контекст не передается, я не могу извлечь его оттуда. Supabase устанавливает токен как HttpOnly, поэтому я считаю, что это также мешает мне получить к нему доступ здесь. Использование библиотеки, такой как Js-Cookie, возвращает неопределенный результат.

Есть ли способ передать контекст fetchOptions , или я должен попытаться выяснить, как удалить HttpOnly, когда устанавливается файл cookie?

Комментарии:

1. В Supabase есть onAuthStateChange ( документы ), которые вы можете использовать для прослушивания изменений состояния. Это должно включать маркер повторной выборки и маркер http. Может быть, это поможет?

2. @Herku У меня уже есть этот метод, определенный в моем приложении. Интересно, есть ли способ вручную установить эту опцию при входе в систему в клиенте Urql?

3. Честно говоря, я не вижу ничего в документах Urql, в которых упоминается возможность установки файла cookie постфактум…

4. URQL имеет отличный обмен аутентификацией , и вы всегда можете сохранить значение в переменной в области видимости или в локальном/сеансовом хранилище (не рекомендуется).