Best practice for passing an object from one page to the next?
Answered
Horned oak gall posted this in #help-forum
Horned oak gallOP
I have an "Event" page and these events have listings... When someone clicks onto an event I show them the listings page for that even but I also want to pass the event object they clicked on to the new page to avoid having to make a call on the new page to grab that same object again.
Currently I have something like this:
The downside being that this shows the entire object in the URL of the listings page.
Is there a standard best practice for how to do this without showing the obj in the URL? Or am I better off just biting the bullet and making a call to grab the event obj again when the listings page loads?
Currently I have something like this:
<Link href={{pathname: `/swaps/${event.eventId}/listings`, query: {event: JSON.stringify(event)}}}>
<div className="">
Listings
</div>
</Link>export default async function Listings({ searchParams }) {
let event: Event = JSON.parse(searchParams.event);
console.log(event.eventId)
const listingsData: Promise<Listing[]> = await getAllListingsForEvent(event.eventId);
}The downside being that this shows the entire object in the URL of the listings page.
Is there a standard best practice for how to do this without showing the obj in the URL? Or am I better off just biting the bullet and making a call to grab the event obj again when the listings page loads?
Answered by Plague
You shouldn't worry about making multiple calls for the same data, if you are using the
If you can't use
fetch API all requests for the same data are automatically memoizied so the request is only ever made once.If you can't use
fetch you can wrap your data fetching function in react's cache function to memoize that function call thus memoizing the data fetch9 Replies
Probably there is a better solution but maybe you can put a context in the layout the two pages have in common
Then use the methods to use and modify the context, one in the new page and the other in the old page
Knowing that when you're using
Link the layout (and thus the context) is preserved@Horned oak gall I have an "Event" page and these events have listings... When someone clicks onto an event I show them the listings page for that even but I also want to pass the event object they clicked on to the new page to avoid having to make a call on the new page to grab that same object again.
Currently I have something like this:
<Link href={{pathname: `/swaps/${event.eventId}/listings`, query: {event: JSON.stringify(event)}}}>
<div className="">
Listings
</div>
</Link>
export default async function Listings({ searchParams }) {
let event: Event = JSON.parse(searchParams.event);
console.log(event.eventId)
const listingsData: Promise<Listing[]> = await getAllListingsForEvent(event.eventId);
}
The downside being that this shows the entire object in the URL of the listings page.
Is there a standard best practice for how to do this without showing the obj in the URL? Or am I better off just biting the bullet and making a call to grab the event obj again when the listings page loads?
You shouldn't worry about making multiple calls for the same data, if you are using the
If you can't use
fetch API all requests for the same data are automatically memoizied so the request is only ever made once.If you can't use
fetch you can wrap your data fetching function in react's cache function to memoize that function call thus memoizing the data fetchAnswer
That's one of the many benefits of the app router/RSC is being able to always fetch data where it's needed without worrying about the consequences.
@Plague You shouldn't worry about making multiple calls for the same data, if you are using the `fetch API` all requests for the same data are automatically memoizied so the request is only ever made once.
If you can't use `fetch` you can wrap your data fetching function in react's `cache` function to memoize that function call thus memoizing the data fetch
Horned oak gallOP
Ah true, currently I have it set to no cache but I can just add a 30s or 60s cache store and call as needed
@Plague You shouldn't worry about making multiple calls for the same data, if you are using the `fetch API` all requests for the same data are automatically memoizied so the request is only ever made once.
If you can't use `fetch` you can wrap your data fetching function in react's `cache` function to memoize that function call thus memoizing the data fetch
Horned oak gallOP
So something I was thinking about with this would be having to loop through to grab the exact object on the fetch call.
For instance when it comes to showing the listings of an event, then a user clicks a specific listing to show it in more detail... Here we would call the fetch again and end up with a 30k array of listing objects... Then we would need to filter through the array to find the exact object before populating the fields with it... would this be a hit to performance?
For instance when it comes to showing the listings of an event, then a user clicks a specific listing to show it in more detail... Here we would call the fetch again and end up with a 30k array of listing objects... Then we would need to filter through the array to find the exact object before populating the fields with it... would this be a hit to performance?
@Horned oak gall So something I was thinking about with this would be having to loop through to grab the exact object on the fetch call.
For instance when it comes to showing the listings of an event, then a user clicks a specific listing to show it in more detail... Here we would call the fetch again and end up with a 30k array of listing objects... Then we would need to filter through the array to find the exact object before populating the fields with it... would this be a hit to performance?
Since the request is memoized, it’s going to be fast, looping through a 30k array is still faster than re-fetching the data because it didn’t rely on another network roundtrip, especially if you’re doing this looping on the server before the page even loads