Next.js Discord

Discord Forum

Revalidating multiple routes via server actions

Unanswered
Asian black bear posted this in #help-forum
Open in Discord
Avatar
Asian black bearOP
My routes fetch a setting from a database for the user, which drives the kind of data to load in each of the routes.

I have three routes:
- /: server component that fetches its data via a function homeNews() that calls fetch()
- /news/category1: client component that uses react-query infinite loading. calls an api route, which calls a another function category1News() that calls fetch()
- /news/category2: client component that uses react-query infinite loading. calls an api route, which calls a another function category2News() that calls fetch()

In both /news/** routes, the setting is passed down from the server component page into the client component as a prop.

Each of these routes pulls from a different data source depending on that setting that gets loaded from the database. I have a server action that changes this setting.
In the server action, if I use revalidatePath('/') and I'm on /, the page refreshes and loads the updated data source.
If I attach a tag my-tag to each of the fetch() calls in the chain, navigate to /news/category1, then use the action to update the data source, call revalidateTag('my-tag'), the page doesn't refresh/revalidate.

My questions are:
- Do fetch tags not work when the fetch call is placed inside another function, rather than having the fetch call directly in the component?
- Is there a way to have a loading state when the page is revalidating? Currently it just hangs for a sec as if loading.tsx is missing.
- Do I just need to make three separate revalidatePath calls?

3 Replies

Avatar
Asian black bearOP
alright i figured it out, needed to use the setting as a filter for the query key for react-query
not sure why revalidatePath('/') makes the /news/** routes revalidate too, or at least it makes the root layout/page rerender, which triggers the prop change down the tree. would still love a way of having a loading state while waiting for revalidation
Avatar
fuma & joulev pray for Schneider
would still love a way of having a loading state while waiting for revalidation
No, Next.js directly purges the cache after revalidation. In other words, the next request has to wait for re-fetching everything. A loading.tsx would add a loading screen to your page as expected
TLDR; revalidatePath only purges but won't re-load the page. Must wait for the next request