"Favorite" an item in inertia.js without page refresh

Hey everyone,

I'm using React with Inertia.js. I have a collection of Posts. A post can be "Favorited" to an associated pivot table. When a user is on the show page of a post, we show a star icon to favorite a post. When they click the icon, we send an Axios request to let the server know, create a record there, then use React state to handle a change of the icon.

I don't think this is the best pattern, as we need to pass an API token to the frontend to make the request. I want to use Inertia, but I don't want a full page refresh when a user "favorites" a post -- it should only change the icon to a "solid" filled state. I'm having problems Googling this one for solutions.

I thought about implementing a query parameter to determine if it's favorited on the show page, but it feels wonky. Ideally, it would be it's own unique route -- if it's hit directly, we can redirect the user to the Post show page.

Any ideas here? Cheers!

Sinnbeck

3 years ago

Level 102

You will need to reload the posts if you want inertia to handle it. But nothing else

router.post('/some-url', {post: post.id}, {only: posts})

This will do a post request to that endpoint, where you store the like and return back(). This tells inertia to only reload the posts on the page, and react should pick up on the change automatically

Be sure to use lazy evaluation (second example) for all props on the page or it won't work https://inertiajs.com/partial-reloads

2 likes

Please or to participate in this conversation.