Ошибка: неверный вызов ловушки. при вызове ловушки после ожидания - как вы ждете, пока данные из одной ловушки будут преобразованы в другую?

Question

Я пытаюсь вставить заголовок в свой сборщик, прежде чем использовать swr для получения данных. Мне нужно дождаться, пока пользовательский хук ответит данными, прежде чем я смогу ввести их в пользовательский сборщик.

Если я использую обещание, тогда я знаю, что получаю соответствующие данные, и если я вручную введу его, используя строку, он работает, и я вижу заголовок. Это просто асинхронно

Как мне это сделать?

Код:

    export const useApi = async (gql: string) => {
      const { acquireToken } = useAuth()
      await acquireToken().then(res => { graphQLClient.setHeader('authorization', `Bearer ${res.accessToken}`) })
      const { data, error } = useSWR(gql, (query) => graphQLClient.request(query));
      const loading = !data
      
      return { data, error, loading }

   }

Answer 1

Во-первых, выполняйте свои обещания, используйте async/await или выберите для его связывания с then, но не то и другое одновременно. если ты ждешь acquireToken()вы можете сохранить его значение в переменной. Кроме того, если вы выбрали async/await, оберните свой код блоком try/catch для правильной обработки ошибок:

    export const useApi = async (gql: string) => {
      const { acquireToken } = useAuth()

      try {
        const res = await acquireToken()
        graphQLClient.setHeader('authorization', `Bearer ${res.accessToken}`)
        const { data, error } = useSWR(gql, (query) => graphQLClient.request(query))
        const loading = !data
      
        return { data, error, loading }

      catch(error) {
        // handle error
      }
   }