Revalidating multiple routes via server actions
Unanswered
Asian black bear posted this in #help-forum
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:
-
-
-
In both
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
If I attach a tag
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
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
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
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 revalidationwould still love a way of having a loading state while waiting for revalidationNo, 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 expectedTLDR;
revalidatePath
only purges but won't re-load the page. Must wait for the next request