Granular control over query keys

[ulvidamirli]

While implementing filter on top of useInfiniteQuery, I encountered an unwanted behavior.

Let's say I have these filters in posts page: tag, location, sort.
And user visits the page with this shared URL: www.example.com/posts?page=2. And then filters posts by tag using UI.

In this situation, it is expected the url params to change to ?page=1&tag=1.
But it changes to ?page=2&tag=1.
This also happens when there is more than two filters.

Since passing these filers to queryKey doesn't end up with the behavior I want, I want to set specific behaviors by functions. For example:

1. I want to reset page param to 1 when any other filter changes.
2. Reset sorting param to 'Best Match" when other filters change.
3. When user changes one filter, change another dependent filter too. For ex., when user changes postal code filter directly, website would change the country filter automatically.

I would like to refetch the query with specific parameters. But afaik, it is not possible.

I've tried to set a urlParams state and store/change all filters there. And type urlParams in queryKey array inside my useInfiniteQuery. Since I'm also controlling page param, this clashes with fetchNextPage(). In this approach I also see the flash view of the initialData when I fetch next page or filter.

I'm looking for a help. Much appreciated.

[TkDodo]

tag, location, sort

are they all part of the queryKey?

[ulvidamirli]

@TkDodo Thank you for your response. Here is the repository I created for this problem.

[TkDodo]

are you aware that you pass the ssrData as initialData to every cache entry?

initialData: ssrData.postsData,

so every time when you change the queryKey, because you add a new filter, a new cache entry is created, and that cache entry will get ssrData.postsData as initial data. Is that what you want?

[ulvidamirli]

I didn't know this. I do this to make the first batch of posts to be server-side rendered. Is it possible to not use it and also have the first batch of posts server-side rendered?

[TkDodo]

1. pass initialData conditionally
2. use the hydration approach

[ulvidamirli]

Btw, when I comment it out, I get the same behavior again. So it doesn't solve the main problem as I understand. Please correct me if I get something wrong