re-render page when data changed
Unanswered
Banjara Hound posted this in #help-forum
Banjara HoundOP
i have a table that contains multiple data. and there is a buttom for each row that i can edit and send it to server. (it's a modal that show and after successful submit modal will closed) this page use searchParams to get what i want from server.
now i want when any data edited or added page refreshed and get new data from server.
there are two temp way i use to get what i want.
1. add random number to query so i get new data from server. ( i just add random number to re-render page to get what i want). this is best solution for me since work for any situation.
2. update state with new data. work only when i don't have any search query. for example if i get any data that contain "test" and then edit "test" to what i want. after state updated i still see data that not should be there since i want only show data that contains "test".
so opinion 1 is best solution for me but i want a better way without adding unnecessary data to searchParams.
now i want when any data edited or added page refreshed and get new data from server.
there are two temp way i use to get what i want.
1. add random number to query so i get new data from server. ( i just add random number to re-render page to get what i want). this is best solution for me since work for any situation.
2. update state with new data. work only when i don't have any search query. for example if i get any data that contain "test" and then edit "test" to what i want. after state updated i still see data that not should be there since i want only show data that contains "test".
so opinion 1 is best solution for me but i want a better way without adding unnecessary data to searchParams.
27 Replies
Banjara HoundOP
calling refresh, replace, push with same url not do anything. the only solution work is add random text to url so next js update page with new data.
even calling revalidatePath in server actions not do anything.
Plott Hound
Are you holding all this data in a state?
Sounds like the state needs to be updated with the setter in a useEffect hook
Banjara HoundOP
in server component i get data from api and then pass result to client component. then in client component i save all result in sate.
if i do anything to data first i send it to server then if success update state with new data.
if i do anything to data first i send it to server then if success update state with new data.
as i said that work fine but when for example i searh data for word "test" and then edit data from "test" to "anything else" data successfully updated in server and in client i update state with new data. this is ok but since that page only show result with "test" i don't want "anything else" be there.
@Banjara Hound even calling revalidatePath in server actions not do anything.
Plott Hound
you have to manually update the state when the data changes since the state doesnt know the data has changed. yuo can do this without refreshing the page using a useEffect
Banjara HoundOP
i don't want state changed. i want server component get new data from server.
Plott Hound
to trigger the fetching again you'll need to invalidate the cache with revalidateTag or revalidatePath
Banjara HoundOP
i do that too but not work. (inside server action)_
Plott Hound
show me the code for your fetch and the code for your server action
Banjara HoundOP
i get data with server actions.
"use server";
async function getDataFromServer (queries){
const result = await fetch(`url/${queries}`,{cache: "no-cache",method:"GET"});
const resultJson = await result.json();
return resultJson ;
}then i call getDataFromServer inside server component and pass data to client component.
what i want is simple. when form submited and something changed or new data added. i want server component re render get new data from getDataFromServer and then pass result to client component.
i can do that with little trick such as add random string to searchParams.
but i don't want add unnecessary data to params to get what i want.
Plott Hound
why are you using a server action to fetch your data. why not just fetch it in a parent component thats a server component and pass it down as props. this is how you're supposed to do it
while its possible, its quite uncommon to fetch data with a server action
Banjara HoundOP
because i do a lot of thing such as get token and valdiate data before sending to client component
@Banjara Hound
"use server";
async function getDataFromServer (queries){
const result = await fetch(`url/${queries}`,{cache: "no-cache",method:"GET"});
const resultJson = await result.json();
return resultJson ;
}
Plott Hound
where? it seems like you are just passing the fetch data in this server action
Banjara HoundOP
in that place i just send how i get data that is what you want. and how i do that is not related to my problem.
Plott Hound
your problem is that this fetch is returning stale data?
even though there i no caching
Banjara HoundOP
no my problem is after i update data in client component i want server component re-render and get data from that action.
the only way work is edit search params.
Banjara HoundOP
what i do is simple.
1. get searchParams from url in server component.
2. then pass searchParams to getDataFromServer actions.
3. show result to client.
4. client edit data and get what want by changing options that i added to client component.
5. client search for result that want to edit.
4 and 5 will cause searchParams changed by using useRouter and because of that process start from 1 and get new data and pass it to client comonent. process from 1 to 5 will be done repeatdly until client get what the want. i hope this clear that i do and what i want to do.
6. client edit one of those data and submit form to save result in database
7. if result of 6 is success then update state with new data.
8. this work fine but since user used search box and filter box to get specific result. may be edited data is not related to that page.
9. so i want instead of updating state. server component re render and pass searchParams from url to getDataFromServer action to get new data and show that to client.
that is all i want.
1. get searchParams from url in server component.
2. then pass searchParams to getDataFromServer actions.
3. show result to client.
4. client edit data and get what want by changing options that i added to client component.
5. client search for result that want to edit.
4 and 5 will cause searchParams changed by using useRouter and because of that process start from 1 and get new data and pass it to client comonent. process from 1 to 5 will be done repeatdly until client get what the want. i hope this clear that i do and what i want to do.
6. client edit one of those data and submit form to save result in database
7. if result of 6 is success then update state with new data.
8. this work fine but since user used search box and filter box to get specific result. may be edited data is not related to that page.
9. so i want instead of updating state. server component re render and pass searchParams from url to getDataFromServer action to get new data and show that to client.
that is all i want.