I think I'm ready to cry. How in god's name do you revalidate a non-fetch server component?
Answered
American Crocodile posted this in #help-forum
American CrocodileOP
I think I've read every reddit post, inch of Next documentation and stack overflow question. I cannot figure this out.
I have multiple server components that get, let's say todo items, from the database using an ORM. Now the pattern suggested to do this, is just do it directly in the server component. Yup, gotcha works good.
Now when I someone "adds" or "deletes" a new todo through a modal which will call POST or DELETE route handler, I need to show that deletion or addition to the list underneath it.
I've tried
Now I can call router.refresh() but that seems extremely wasteful and expensive to force refresh a route.
Refreshing instantly shows the new changes.
What am I doing wrong here?
Am I structuring my code wrong? Should I not be getting data this way? Am I missing something? Do you just have to force refresh? Should I just move the calls to a client component because this shit is a mess?
THANKS in advance guys
What I am gathering from some replies is if I want to mutate the data (add or delete an item) and have it shown on the page without a full refresh, I should not be getting the data in a server component? Is this correct?
I have multiple server components that get, let's say todo items, from the database using an ORM. Now the pattern suggested to do this, is just do it directly in the server component. Yup, gotcha works good.
Now when I someone "adds" or "deletes" a new todo through a modal which will call POST or DELETE route handler, I need to show that deletion or addition to the list underneath it.
I've tried
revalidatePath('/todos') after awaiting the response for deletion/creation in the route handler. I've tried export const revalidate = true on the route handler. I don't understand.Now I can call router.refresh() but that seems extremely wasteful and expensive to force refresh a route.
Refreshing instantly shows the new changes.
What am I doing wrong here?
Am I structuring my code wrong? Should I not be getting data this way? Am I missing something? Do you just have to force refresh? Should I just move the calls to a client component because this shit is a mess?
THANKS in advance guys
What I am gathering from some replies is if I want to mutate the data (add or delete an item) and have it shown on the page without a full refresh, I should not be getting the data in a server component? Is this correct?
Answered by European sprat
router.refresh() or if you want to use
unstable_cache then you can use the revalidatePath/tag stuff, or use client components with something like react-query or SWR10 Replies
European sprat
router.refresh() or if you want to use
unstable_cache then you can use the revalidatePath/tag stuff, or use client components with something like react-query or SWRAnswer
American CrocodileOP
Ah ok, router.refresh() is quite extreme. Might have to switch to client fetching. Have not looked into unstable_cache - will have to check what thats about
@American Crocodile Ah ok, router.refresh() is quite extreme. Might have to switch to client fetching. Have not looked into unstable_cache - will have to check what thats about
European sprat
the pattern i use at this point, in order to keep the data fresh, is to do the initial fetch in the server component and then have client component auto fetch with react-query
the initial fetch provides the data to be hydrated as cache for react-query
so you have the data on load and then the client side takes over
American CrocodileOP
Interesting. I dont think I quite understand. How can the fetch with react-query overwrite the server component?
European sprat
you fetch the data in the server component and it gets passed down as initialData or <Hydrate> to the client components
American CrocodileOP
Amazing, dude thanks again for your help!
European sprat
good luck