Next.js Discord

Discord Forum

Trouble with returning to default fetch when using searchParams and moving between routes

Unanswered
Nebelung posted this in #help-forum
Open in Discord
NebelungOP
Hello, I feel like I come to this sort of trouble over and over again with App router 😭 and I'd need someone to give a hint at how to handle such situation.

I've set up filtering with the searchParams in the server component. I'm on /browse route. It works well and when i click the browse Link the searchParams correctly are removed but here is the problem: the fetch function remains the same as with the filtering until i hard refresh the browser. When moving between routes and going back to /browse I still get the filtered results...

17 Replies

NebelungOP
export default async function Page({
  searchParams
}: {
  searchParams?: { [key: string]: string | string[] | undefined }
}) {
  const { q: searchValue, filter } = searchParams as {
    [key: string]: string
  }

  // filter=season8,production -> separated by comma
  const selectedFilters = filter
  const selectedFiltersArray = selectedFilters
    ? selectedFilters.split(',')
    : null

  const initial = await loadInitalPosts(selectedFiltersArray)
...
return <BrowsePage data={initial.data}/>
NebelungOP
could creating parallel routes help? i would have @filters slot and default for no filters
American Crow
Sounds like router cache to me.
For a quick test:
1. Leave your code as is
2. Go to /browse change filters (searchParams)
3. Wait 30 seconds
4. Navigate to /page (not back button on browser, use a Link)

If the fetch has the new data, it was indeed the route cache.
You can try to reduce these staleTimes
https://nextjs.org/docs/app/api-reference/next-config-js/staleTimes
You could also call router.refresh
NebelungOP
i don't understand. by /page do you mean any other page?
I'm a bit confused, sorry. the fetch has the same data because it's based on the searchparams. what do you mean by "new data"?
American Crow
I don't see your folder structure so i dont know how your routes are called. Yea whatever folder the Page is in from your code snippet
NebelungOP
ok, folder structure is as such: The Page from the code snippet is just in browse/index.tsx . The BrowsePage is a client component.
```
/app
/browse
_components
BrowsePage.tsx
page.tsx
/about
page.tsx
...
American Crow
Okay i thought its 2 different routes
(assuming index.tsx = page.tsx)
NebelungOP
I tried route.refresh for example on Link Browse in Navbar onClick{()=>route.refresh()} it fires correctly but it doesnt update data...
@American Crow (assuming index.tsx = page.tsx)
NebelungOP
yes, my mistake
American Crow
so you are on /browse, you do some filtering resulting in /browse?q=hello
You pass hello to loadInitalPosts. And whats not working from there?
NebelungOP
actually, I just figured something out. The fetch results are correctly updated. I think it's the tanstack infiniteScroll function that is caching the results from initialData. the initialData is the result of the fetch function.
give me a sec to debug it
American Crow
take your time, i will be in a meeting from 12:30 (12mins) though, but will return after that
NebelungOP
thank you very much
NebelungOP
I think it's not the tanstack query problem, not nextjs. the initialData gets updates correctly on router.refresh(). the problem is that the data.pages (from useInfiniteQuery) are not being updated correctly and i don't know how to do that. might just try to write my own infinite scroll functionality