How to refresh a single component
Answered
Cuvier’s Dwarf Caiman posted this in #help-forum
Cuvier’s Dwarf CaimanOP
New to NexJS way of doing things, so plz pardon me
I have a server component, tht renders list of cards, each card has a button, clicking on it triggers action on server and fetches some data from a remote api.... now I want to refresh the single card on ui with new data tht just arrived from api....
how could i update the card component, after the action was performed?
Thanks
I have a server component, tht renders list of cards, each card has a button, clicking on it triggers action on server and fetches some data from a remote api.... now I want to refresh the single card on ui with new data tht just arrived from api....
how could i update the card component, after the action was performed?
Thanks
Answered by B33fb0n3
for that you should use a clientside fetching library. Example for that are SWR or React Query. Both are good. I recommend React Query. Then pass into your query the initial data that you got from your server (via props) and set the revalidate action (the fetcher) to your server action. Now you can extract the data from your query and it will be automatically changed inside the component, when you click the button
7 Replies
@Cuvier’s Dwarf Caiman New to NexJS way of doing things, so plz pardon me
I have a server component, tht renders list of cards, each card has a button, clicking on it triggers action on server and fetches some data from a remote api.... now I want to refresh the single card on ui with new data tht just arrived from api....
how could i update the card component, after the action was performed?
Thanks
for that you should use a clientside fetching library. Example for that are SWR or React Query. Both are good. I recommend React Query. Then pass into your query the initial data that you got from your server (via props) and set the revalidate action (the fetcher) to your server action. Now you can extract the data from your query and it will be automatically changed inside the component, when you click the button
Answer
@Cuvier’s Dwarf Caiman solved?
Cuvier’s Dwarf CaimanOP
@B33fb0n3 I still couldnt wrap my head around your suggestion
what i did instead is ...
after the
what i did instead is ...
after the
action is complete i just call revalidatePath - tht updates the current screen@Cuvier’s Dwarf Caiman <@301376057326567425> I still couldnt wrap my head around your suggestion
what i did instead is ...
after the `action` is complete i just call `revalidatePath` - tht updates the current screen
oh ok... is your problem solved like that?
Else let me know where you are stuck. Then we can go thought the process step by step. The first step for example would be to install react query (are you stuck here?)
Else let me know where you are stuck. Then we can go thought the process step by step. The first step for example would be to install react query (are you stuck here?)
@Cuvier’s Dwarf Caiman ?
Cuvier’s Dwarf CaimanOP
@B33fb0n3 Thanks for taking time to help me, i really appreciate
yeah, right now, it seem to work
i just revalidate path and tht ensures the fresh data is on screen
even though it doesnt refresh the single component
yeah, right now, it seem to work
i just revalidate path and tht ensures the fresh data is on screen
even though it doesnt refresh the single component
happy to help