Setting initialData and not re-fetching when querykey changes

[shaadcode]

I first get the initial data from the server and I want to display the data immediately when the page is refreshed.

The problem is that useInfiniteQuery does not re-fetch when the queryKey changes.

const projectsQuery = useInfiniteQuery({
    queryKey: ['projects', 'category', sort ?? '', filtersString, params.slug, location ?? ''],
    queryFn: ({ pageParam = 1 }) => httpRequest<ProjectByCategoryBodyJSONSchema>({
      method: 'get',
      queryParams: {
        add: {
          ...(pageParam === 1 ? { with_filters_and_values: '' } : {}),
          ...(location ? { 'where_relation_filter[location->id]': location } : {}),
          ...(sort ? { 'order_filter[created_at]': sort } : {}),
          apply_values_filter: filtersString,
          with_category_details: '',
          includes: 'project_slider',
          per_page: 16,
          page: pageParam,
        },
      },
      url: projectsEndpoints.projectsByCategory(params.slug),
    }),
    initialData: params.initialData,
    initialPageParam: 1,
    getNextPageParam: (lastPage) => {
      const current = lastPage.meta?.current_page;
      const last = lastPage.meta?.last_page;

      return current < last ? current + 1 : undefined;
    },
  });

  return projectsQuery;

I tried placeholderData, but the problem is that it fetches the data when the page is hydrated (this is not correct because I have the same data on the server).

[TkDodo]

The problem is that useInfiniteQuery does not re-fetch when the queryKey changes.

It certainly does refetch when the QueryKey changes.

he problem is that it fetches the data when the page is hydrated

you need to set a staleTime for your query. From the docs:

Because staleTime defaults to 0, queries will be refetched in the background on page load by default. You might want to use a higher staleTime to avoid this double fetching, especially if you don't cache your markup.