calling refetch from nested client side component to upper server side component
Unanswered
gref9730 posted this in #help-forum
gref9730OP
Hello I have a page where I have the main page.js set as server component .. I fetch data there and pass it to the client component as object. The client component takes it and renders accordingly and I have there a button with mutation which does its job also accordingly, my problem is that I have no clue how to after the mutation is succesfull, tell the server component (page.js) to refetch again the json and pass it again to the client with updated data...
13 Replies
@gref9730 Hello I have a page where I have the main page.js set as server component .. I fetch data there and pass it to the client component as object. The client component takes it and renders accordingly and I have there a button with mutation which does its job also accordingly, my problem is that I have no clue how to after the mutation is succesfull, tell the server component (page.js) to refetch again the json and pass it again to the client with updated data...
you can use revalidatePath('/') to revalidate all path
gref9730OP
oookis, I tried to implement that, is it normal that it takes 50s to rerender the page?
gref9730OP
I made in api/revalatidate this function
just do '/' and it will revaildate all cache easily xD
also
it might have something to do with how long it takes for the whole component to rerender
gref9730OP
and then im calling it after the mutation
maybe some async function in some layout takes a while to render
gref9730OP
uuush now I can see in the console log the revalidate was done with 200 response but no rerender was done.. 😄
is there even any benefit fetching data in server components, when mostly all the data are being used to be changed atleast at crud applications, and therefore I guess getting the data with tanstack inside the client component and using their buildin refetch function would be much easier