React JS React Query useMutation: невозможно получить ответ от сервера в обратном вызове onError

Question

Я работаю над проектом React JS. Я использую запрос React, https://react-query.tanstack.com/, чтобы делать запросы API. Теперь у меня проблема с мутацией, получающей данные ответа с сервера в обратном вызове onError, когда API выдает 422, 400 или 401 и т. Д.

Это моя мутация.

let [ createProductMutation, { data, error } ] = useMutation((payload) => createProduct(payload), {
    onMutate: () => {
      
    },
    onSuccess: (response) => {
      
    },
    onError: (err, variables, snapshotValue) => {
      //err is not the response from the server.
    }
  })

Как вы можете видеть в обратном вызове onError, нет способа получить ответ от сервера.

Данные и ошибка (рядом с createProductMutation) также не являются ответом сервера.

Я пробовал использовать это.

  try {
       let response = await createProductMutation(data);
        // response from the API is not here too, "response"
    } catch (e) {
        // response from the API is not here too
    }

Как я могу получить ответ в обратном вызове onError?

Answer 1

      let [ createItem ] = useMutation(payload => createItem(payload), {
  onError: (error) => {
    console.log(error.response.data);
    console.log(error.response.status);
  }
})

Для меня вышеупомянутое решение сработало! Внутри onError, должен быть доступен error.response.

Answer 2

Чтобы получить ответ, вам нужно преобразовать ошибку в json, а затем дождаться обещания. См. Пример ниже, где «message» - это то, что ваш бэкэнд возвращает для ответного сообщения.

      onError: async (error, variables, context) => {
    const errorObj = error;
    const errorObjAsJSON = await errorObj.json();
    const { message } = errorObjAsJSON;
    console.log(message);
  },

Очевидно, вы можете еще больше сжать это,

      onError: async (error, variables, context) => {
        const errorObj = await error.json();
        const { message } = errorObj;
        console.log(message);
      },

Answer 3

TLDR: убедитесь, что функция, которую вы предоставляете useQuery, возвращает обещание

пример

      useQuery('getAllUsersInfo', getAllUsersInfo)

убедитесь, что функция getAllUsersInfo возвращает обещание.

У меня была такая же проблема, потому что функция, которую я предоставил для useQuery, не возвращала обещание, поэтому реагирующий запрос думал, что запрос выполнен успешно, хотя на самом деле он терпел неудачу.