How can I avoid falling back to initialData when data is being fetched?

[zero734kr]

I'm using useInfiniteQuery with initialData from next.js isr to render a ranking page.

But the problem is: when I change a filter, the useQuery data returns the initialData data, even if a new request is being fetched.

So when I had the first filter applied and I change the second filter, the list changes weirdly without loading component.

Example: 2 (list with first filter) -> 1 (fallback) -> 3 (new list after fetch)

Do I need to handle this myself with the isFetching value? Or is there another way to avoid the fallback on fetch?

Thanks.

[zero734kr]

I just found out I can't use isFetching because it changes to true even when I hit next button.

[zero734kr]

To share how I did it, I decided to apply a temporary workaround that only provides initialData when in server side rendering.

initialData: characters && typeof window === 'undefined' ? { pages: [characters], pageParams: [1] } : undefined,

But I would really like to see a better solution without having to implement it myself.

[zero734kr]

To share how I did it, I decided to apply a temporary workaround that only provides initialData when in server side rendering.

initialData: characters && typeof window === 'undefined' ? { pages: [characters], pageParams: [1] } : undefined,

But I would really like to see a better solution without having to implement it myself.

I knew later that this leads to a hydration error. So now I'm combining isFetching with isFetchingNextPage like below, but it's still dirty code.

const ranking = useMemo(
  () => {
    if (isFetching && !isFetchingNextPage) return []
      
    return new Array<RankedCharacter>().concat(...rankingData?.pages ?? [])
  },
  [rankingData, isFetching, isFetchingNextPage]
)

[zero734kr]

I was thinking about the case and found that initialData was being provided even though the queryKey had changed when I modified the filters. It was confusing because initialData was being provided from custom hook, and I haven’t thought about it hours ago.

export function useCharacterRanking (
  { 
    // ...
    ...options
  }: UseInfiniteQueryOptions<RankedCharacter[]> = {}
) {
  return useInfiniteQuery<RankedCharacter[]>(
    // ...,
    // ...,
    options
  )
}

useCharacterRanking({
  // ...
  initialData: rankingData
})  

[TkDodo]

initialData will be provided every time when a new cache entry is created, as initialData for that entry. If you change the key, you might create a new cache entry if there is none yet - so it gets initial data. If you only want initialData for a specific key, you have to pass undefined for all other keys.

[zero734kr]

I already implemented it! Thank you