Настройка базового URL в Kubb с tanstack-query v5

Содержание

Вопрос или проблема
Ответ или решение
Шаги для конфигурации
Дополнительные соображения

Вопрос или проблема

Настройка базового URL в Kubb с tanstack-query v5

Я использую kubb с tanstack-query v5, и, к сожалению, пример https://www.kubb.dev/examples/tanstack-query/react-query-v5 не работает, так что у меня нет возможности найти проблему, особенно учитывая, что этот участок кода, похоже, недавно изменился.

Запрос всегда отправляется на localhost с правильно установленным относительным путем.

http://localhost:8081/correct/path/to/api/resource
// Не удалось загрузить ресурс: сервер ответил с кодом 404 (Не найдено)

На localhost:8081 работает мой сервер разработки.

Поэтому я пытаюсь настроить queryClient, чтобы установить базовый URL.

import axios from "axios";
import { QueryClient } from "@tanstack/react-query";

const axiosInstance = axios.create({
    baseURL: "https://base.url.com",
    timeout: 15000
});

const client = new QueryClient({
    defaultOptions: {
        queries: {
            queryFn: async ({ queryKey }) => {
                console.log("Ключ запроса:", queryKey); // НИКОГДА НЕ ЗАПИСАН

                const { data } = await axiosInstance.get(queryKey[0] as string);
                return data;
            },
            staleTime: 0
        }
    }
});

export default client;

Затем оборачиваю client в App (но это работает, потому что запрос отправляется).

import { QueryClientProvider } from "@tanstack/react-query";
import client from "../api/client";

<QueryClientProvider client={client}>
    <ThemeProvider theme={theme.customTheme}>
        <SafeAreaProvider>
            <Stack>
                ...
            </Stack>
        </SafeAreaProvider>
    </ThemeProvider>
</QueryClientProvider>

Это правильный способ сделать это с kubb? В интернете так говорят, но так как “Ключ запроса” никогда не записывается, и, похоже, этот код никогда не выполняется.

Старые версии kubb, по-видимому, имели базовый URL в своей конфигурации, но, похоже, это больше не так.

Ответ или решение

Конфигурация базового URL в Kubb с использованием TanStack Query (ранее React Query) версии 5 может быть выполнена правильно, и я помогу вам понять, как это сделать.

Ваш код в целом выглядит правильно, но определенные аспекты могут вызвать проблемы, особенно если запросы не отображают ключи запросов должным образом. Давайте разберем основные шаги и возможные решения вашей проблемы.

Шаги для конфигурации

Создание экземпляра Axios: Вы правильно создали экземпляр axios с нужным базовым URL. Однако, для успешного использования TanStack Query, вам нужно убедиться, что запросы настроены корректно.
```
import axios from "axios";

const axiosInstance = axios.create({
   baseURL: "https://base.url.com", // Убедитесь, что здесь правильный базовый URL
   timeout: 15000
});
```

Настройка QueryClient: Ваш код для настройки QueryClient также в целом правильный, но, возможно, проблема заключается в том, как вы вызываете queryFn. Попробуйте использовать queryKey как массив, чтобы избежать проблем с доступом к элементам.

import { QueryClient } from "@tanstack/react-query";

const client = new QueryClient({
   defaultOptions: {
       queries: {
           queryFn: async ({ queryKey }) => {
               console.log("Query Key:", queryKey); // Должен логироваться правильно

               // Использование первого элемента в queryKey
               const { data } = await axiosInstance.get(queryKey[0]);
               return data;
           },
           staleTime: 0
       }
   }
});

Оборачивание App в QueryClientProvider: Убедитесь, что ваш компонент действительно оборачивает приложение в QueryClientProvider правильно. С учетом вашего кода это выглядит правильно. Вот пример:

import { QueryClientProvider } from "@tanstack/react-query";
import client from "../api/client"; // Проверьте, что путь к client верен

function App() {
   return (
       <QueryClientProvider client={client}>
           <ThemeProvider theme={theme.customTheme}>
               <SafeAreaProvider>
                   <Stack>
                       {/* Остальная часть вашего приложения */}
                   </Stack>
               </SafeAreaProvider>
           </ThemeProvider>
       </QueryClientProvider>
   );
}

export default App;

Дополнительные соображения

Проверка вызова к API: Убедитесь, что запросы действительно отправляются с помощью инструмента разработчика в браузере (например, вкладка "Network"). Это поможет вам понять, имеет ли смысл сам запрос и какой URL-адрес вызывается.

Логирование ошибок: Добавьте обработку ошибок в ваш queryFn, чтобы вы могли отследить, что именно идет не так. Например:

queryFn: async ({ queryKey }) => {
   try {
       const { data } = await axiosInstance.get(queryKey[0]);
       return data;
   } catch (error) {
       console.error('Ошибка запроса:', error);
       throw error; // Важно для обработки ошибок в Query
   }
}

Тестирование запроса: Попробуйте вручную выполнить API-запрос через axios вне контекста TanStack Query, чтобы убедиться, что базовый URL и конечная точка работают. Например:
```
axiosInstance.get('/your/endpoint')
   .then(response => console.log(response.data))
   .catch(error => console.error(error));
```
Обновление библиотек: Убедитесь, что вы используете актуальные версии библиотек Kubb и TanStack Query, так как иногда проблема может заключаться в несовместимых версиях.

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