TanStack Vue Query页面初始化时禁用自动API调用及重复调用问题排查求助

Hey there! Let's tackle your TanStack Vue Query problem step by step. You're trying to prevent an API call from running on initial page load, but instead it's firing multiple times right away—let's break down the root causes and fix this.

First: Why the API is auto-running on page load #

Looking at your usePostFetch hook, you've set enabled: !!url. Since your getAllCities service uses a fixed URL (${COUNTRY_BASE}/countries/state/cities), !!url will always evaluate to true on page load. That means Vue Query automatically triggers the query as soon as the hook runs, which is exactly what you don't want.

Fix 1: Disable auto-execution by default #

To stop the query from running on initial load, we need to set enabled to false by default, and let you trigger it manually later (like when a user selects a country/state). Modify your usePostFetch hook's enabled option:

export const usePostFetch = (url, body, configs, queryOptions) => {
  const context = useQuery({
    queryKey: [url, body, configs?.params],
    queryFn: ({ queryKey, meta }) => fetcherByPost({ queryKey, meta }, configs),
    // Default to disabled, let caller override if needed
    enabled: queryOptions?.enabled ?? false,
    ...getDefaultOptions(queryOptions)
  })

  return context
}

Then, when you call the service in your component, you'll get the refetch method to trigger the API call when you need it:

const {
  data: citiesData,
  isLoading: citiesLoading,
  isError: iErrorCities,
  isSuccess: citiesIsSuccess,
  refetch // Use this to manually trigger the API call later
} = countryService.getAllCities(country, state, configs)

// Example: Trigger when user selects a valid country/state
watch([country, state], () => {
  if (country.value && state.value) {
    refetch()
  }
})

Fix 2: Troubleshooting the multiple calls issue #

Now let's figure out why the API is firing multiple times. Here are the most common culprits:

• Unstable queryKey: Your queryKey includes body and configs?.params. If country or state are reactive variables (like ref or reactive) that change their value during initial setup (e.g., from undefined to a default value), this will create a new queryKey each time, triggering a fresh API call. To fix this, make sure the values in your queryKey are stable on initial load, or use a computed value for the queryKey that only updates when necessary.
• Default options causing refetches: Check what's in your getDefaultOptions function. If it sets refetchOnMount: true, refetchOnWindowFocus: true, or refetchOnReconnect: true, these could be causing extra calls. You can override these in your queryOptions to disable them:

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

• Component re-renders: If the component calling getAllCities re-renders multiple times on page load, the hook will run each time. While Vue Query should cache results with the same queryKey, if the queryKey changes between renders, it'll trigger new calls. Use Vue's watch or computed to ensure the hook's dependencies are stable.

Quick sanity check #

Double-check that your fetcherByPost function isn't accidentally making multiple calls on its own. Make sure it's a pure function that only runs once per invocation from Vue Query.

Hope these fixes get your API calls under control! Let me know if you need to dive deeper into any of these points.

备注：内容来源于stack exchange，提问作者seventeen