Отключить автоматические вызовы API после перехода на страницу в TanStack Vue

На чтение 3 мин Опубликовано 30.09.2024

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Настройка функции usePostFetch
Шаг 2: Вызов службы getAllCities
Шаг 3: Ручной вызов API
Заключение

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

У меня есть сервис, который вызывает API, и когда я впервые загружаю страницу, я не хочу, чтобы он вызывался. Однако функция вызова API выполняется несколько раз при первом загрузке страницы. Пожалуйста, помогите мне это проверить. Я использую Vue Query от TanStack. Большое спасибо!

Вот моя функция usePostFetch:

export const usePostFetch = (url, body, configs, queryOptions) => {
  const context = useQuery({
    queryKey: [url, body, configs?.params],
    queryFn: ({ queryKey, meta }) => fetcherByPost({ queryKey, meta }, configs),
    enabled: !!url,
    ...getDefaultOptions(queryOptions)
  })

  return context
}

Это мой сервис:

getAllCities: (country, state, configs) => {
    const body = { country: country, state: state }

    return usePostFetch(`${COUNTRY_BASE}/countries/state/cities`, body, {
      configs
    })
  }

Вот где я вызываю сервис для использования:

const {
  data: citiesData,
  isLoading: citiesLoading,
  isError: iErrorCities,
  isSuccess: citiesIsSuccess
} = countriesService.getAllCities(selectedCountry, selectedState, { enabled: false })

API был вызван автоматически много раз:
изображение здесь

Я хочу, чтобы API не вызывался автоматически при первом входе на страницу.

Вы пробовали установить enabled в false?

Установите enabled в false, чтобы предотвратить автоматические вызовы API.
Используйте функцию refetch, чтобы вручную вызвать API, когда это необходимо.

export const usePostFetch = (url, body, configs, queryOptions) => {
  const context = useQuery({
    queryKey: [url, body, configs?.params],
    queryFn: ({ queryKey, meta }) => fetcherByPost({ queryKey, meta }, configs),
    enabled: !!url && queryOptions?.enabled !== false,
    ...getDefaultOptions(queryOptions)
  });

  return context;
}

const {
  data: citiesData,
  isLoading: citiesLoading,
  isError: iErrorCities,
  isSuccess: citiesIsSuccess,
  refetch // Эта функция может быть использована для ручного вызова API
} = countriesService.getAllCities(selectedCountry, selectedState, { enabled: false });

// Вызовите refetch, когда хотите получить данные, например, по клику на кнопку или после конкретного события
const fetchCities = () => {
  refetch();
};

Объяснение

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

Для того чтобы отключить автоматические вызовы API при первой загрузке страницы с использованием TanStack Vue Query, необходимо правильно настроить параметр enabled в функции, отвечающей за вызов API. Давайте подробно рассмотрим, как это сделать.

Шаг 1: Настройка функции `usePostFetch`

Убедитесь, что ваш код для функции usePostFetch правильно обрабатывает параметр enabled. Вам нужно установить enabled в false, чтобы предотвратить автоматический вызов API.

Вот измененный фрагмент кода:

export const usePostFetch = (url, body, configs, queryOptions) => {
  const context = useQuery({
    queryKey: [url, body, configs?.params],
    queryFn: ({ queryKey, meta }) => fetcherByPost({ queryKey, meta }, configs),
    enabled: !!url && queryOptions?.enabled !== false, // Проверка на наличие URL и параметра enabled
    ...getDefaultOptions(queryOptions)
  });

  return context;
}

Шаг 2: Вызов службы `getAllCities`

При вызове вашей службы getAllCities также убедитесь, что вы передаете enabled: false в параметрах. Это предотвратит автоматический вызов API при первом входе на страницу.

Вот пример вашего кода:

const {
  data: citiesData,
  isLoading: citiesLoading,
  isError: iErrorCities,
  isSuccess: citiesIsSuccess,
  refetch // Используем эту функцию для ручного вызова API
} = countriesService.getAllCities(selectedCountry, selectedState, { enabled: false });

Шаг 3: Ручной вызов API

Теперь, когда API не вызывается автоматически, вы можете использовать функцию refetch, чтобы вручную инициировать запрос данных по мере необходимости. Это может быть сделано, например, по кнопке или после выполнения какого-либо действия.

Вот пример определения функции, которая осуществляет вызов API:

const fetchCities = () => {
  refetch(); // Вызовем API при необходимости
};

// Пример использования: привязка функции к кнопке
<button @click="fetchCities">Загрузить города</button>

Заключение

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

Если у вас будут дополнительные вопросы или возникнут сложности с внедрением, не стесняйтесь уточнять!