Paginated Queries with keepPreviousData without request a new data on previous key.

[RakaDoank]

In this documentation, it said

By setting keepPreviousData to true we get a few new things:
- The data from the last successful fetch is available while new data is being requested, even though the query key has changed.

In my case, i really don't want the library to call the function again (the queryFn) to get refreshed data when navigated to the previous key, because the data is likely only change once a month or never until the judgement day.

I check my console, when navigated to previous pagination, the fetch request was always requested.

Previously, i was using SWR, it was perfectly fine what i need for this case.
However, i don't want to add another library just for this simple thing.

Probably, i missed something. How do i fix this case in TanStack/react-query?

[TkDodo]

set a higher staleTime

[RakaDoank]

I tried with larger staleTime

But now, react-query doesn't call the queryFn at all when the key was changed.

const
  [categoryId, setCategoryId] =
    useState<number>(0),

  { data, isFetching } =
    useQuery({
	queryKey: ['data', categoryId],
	queryFn: async () => {
	  return await AskGodService.getMySinList(categoryId)
	},

        keepPreviousData: true,

	initialData: allMySinList,

	refetchOnMount: false,
	refetchOnReconnect: false,
	refetchOnWindowFocus: false,


	staleTime: (60 * 1000) * 10 // 10 Minutes,
    })

[TkDodo]

because you pass initialData, when you probably want placeholderData: https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query

[RakaDoank]

Yes, it is good now. Thank you.

But, is there any possibility for this case by passing initialData instead of placeholderData
In my case, the first data will be fetched from server side. I don't want my client to fetch the first data in first visit or reload the page or click the link in new tab.

[TkDodo]

you can set initialData for a specific category only, e.g. the first one (0):

useQuery({ initialData: () => categoryId === 0 ? allMySinList : undefined })