Fetching Data

[gloomy tusk]

I am storing the result of the answer yes. So I need to track what has happened. I was thinking I don't want to create a URL for every card as ideally the user should not be able to go "back" to the previous cards and answer again.

Fetching Data

[crystal tinsel]

where is the data being fetched from?

[gloomy tusk]

@quick idol My initial thought was to use useState/useEffect but it doesn't feel quite right. Lots of variables created just to trigger the useEffect and store the data.

[gloomy tusk]

Data is coming from my app's DB but I have a route handler set up to retrieve the data.

[quick idol]

thats like the main motivation for going back to server oriented design

[crystal tinsel]

ok this is unrelated to your question but this is not good practice. you should do the fetch directly in the server component. here is more info: https://nextjs-faq.com/fetch-api-in-rsc

you can just grab the data with your ORM (assuming you are using one) directly in the server component

[gloomy tusk]

Yeah for the server side components I understood that you should just query the DB directly, I created the route handler so that the client component could retrieve the data.

[crystal tinsel]

ok, this will work if you wanna do it all in client component but it is considered an anti-pattern in app router.

[gloomy tusk]

Sounds good. I am going to try and figure out the correct way to do this in server components 🙂 Just not quite sure how to get it to update the view at the correct time... Thanks for the help.

[crystal tinsel]

no worries! it can be overwhelming with such a powerful framework trying to decided which of the many ways you should use to perform a simple task

[gloomy tusk]

No kidding! I know exactly how I want it to work but no idea which way or example should be followed...

[crystal tinsel]

i would focus on your data structure, how you track progress, how you know a user has completed certain tasks and from there decide your fetching strategy. it could be as simple as having a progression field for each user in the db so once a card is complete the fetch grabs the first incomplete card

[gloomy tusk]

So, as an example, lets say I have changed the data in the backend from the client clicking a button. Now we want to get the next card, should I call useRouter() and .refresh()? That should trigger a new card to be retrieved by my sever component. But is that proper?

[crystal tinsel]

check out revalidatePath, it will trigger a refetch without reloading the browser. eg: revalidatePath(`/your_route_name/`);

[gloomy tusk]

Hmm, but wouldn't I want the browser to refresh? This wouldn't cause the user of the app to see the next card until they refresh right?

[crystal tinsel]

is your fetch setup in a way that it will always fetch the first card that hasnt been completed yet?

sorry its hard when i dont know your app structure

[gloomy tusk]

Correct, when I load the server component that retrieves the card, it will get the next card that needs to be completed.

[gloomy tusk]

Of course 🙂

[crystal tinsel]

thanks. yeah revalidate path is essentially going to trigger the fetch to happen again which will fetch the next card without flashing the ui or refreshing

try adding revalidate path before your success return when they complete a card

[gloomy tusk]

Ah, you mean set the revalidate path in my post API?

[crystal tinsel]

yes!

[gloomy tusk]

I see, and then this will reload the UI for the client?

[crystal tinsel]

so as soon as they successfulyl complete a card it will get the next one without any reloading

[gloomy tusk]

Ok, I will have to try this

[crystal tinsel]

cool feel free to dm me or reply here if you get stuck

https://nextjs.org/docs/app/api-reference/functions/revalidatePath

it can go in your route handler or server action depending which method you chose

[gloomy tusk]

Ooh, one weird thing here though, is the path doesn't have the user info in it. So it would trigger a refresh for every user right?

[crystal tinsel]

thats a good point, i just finished my lunch break so cant test it myself but have a go and see if it works

[gloomy tusk]

revalidatePath doesn't do what I needed. But I do need that for some other functionality so thanks for the reference. I did follow the pattern of retrieving the data in a server component. I then do a fetch in a client component button on click to post new data to my DB and then call useRouter().replace() to get the page to update without reloading everything like .refresh does. That was the functionality I was misunderstanding I think and it is good to get the data retrieval into the server side.

[gloomy tusk]

Actually my solution only works sometimes. router.replace doesn't seem to always cause the server to refresh the page.