Update data on click of browser's back button in Inertia + React based project

I'm using the laravel's official react starter kit. I've a page shows list of items (lets say blog posts), with edit button next to every item.. I click on an edit button, i make some changes and save. but if i go back using Browser's back button, the data for that item isn't updating.

Controller method -

public function dashboard(Request $request): Response
    {
        $user = $request->user();
        $projects = Project::where('user_id', $user->id)->take(7)->get();

        return Inertia::render('dashboard', [
            'projects' => $projects,
        ]);
    }

in page.tsx

import AppLayout from '@/layouts/app-layout';
import { Link, Head } from '@inertiajs/react';

export default function Dashboard({ projects }) {
    return (
        <AppLayout className="bg-muted">
            <Head title="Dashboard" />
            <div className='flex flex-col flex-1'>
                {projects.map((project) => (
                    <div key={project.id} className="flex flex-col items-center">
                        <h3 className="font-semibold text-lg mb-2">{project.name}</h3>
                        <p>{project.description}</p>
                        <Link href={route('edit', project.id)}>Edit</Link>
                    </div>
                ))}
            </div>
            
        </AppLayout>
    );
}

LaryAI

9 months ago

Level 58

When using Inertia.js with React, navigating back with the browser's back button will, by default, restore the previous page from the browser's cache (history state). This means your dashboard page will not automatically fetch fresh data from the server, so any edits made on the edit page won't be reflected until you manually refresh.

Solution: Use preserveState: false or Inertia.reload() on history navigation

There are a few ways to solve this:

1. Use `preserveState: false` on your edit form redirect

When you redirect back to the dashboard after editing, you can force Inertia to reload the data by setting preserveState: false in your controller:

// In your controller after updating the project
return redirect()->route('dashboard')->with('success', 'Project updated!');

But this alone won't help with the browser's back button, because that navigation is handled by the browser, not your code.

2. Use `useEffect` and Inertia's `on('navigate')` event in React

You can listen for Inertia's navigation events and force a reload when the user navigates back to the dashboard:

import { useEffect } from 'react';
import { router } from '@inertiajs/react';

export default function Dashboard({ projects }) {
    useEffect(() => {
        const reloadOnBack = (event) => {
            if (event.detail.visit.type === 'back') {
                router.reload({ only: ['projects'] });
            }
        };

        window.addEventListener('inertia:navigate', reloadOnBack);

        return () => {
            window.removeEventListener('inertia:navigate', reloadOnBack);
        };
    }, []);

    // ... rest of your component
}

This will reload the projects prop from the server whenever the user navigates back to this page.

3. Use `remember` and `preserveState` options (less recommended for this use case)

Inertia provides options for remembering state and preserving it, but for your use case (always wanting fresh data), the above approach is better.

Summary

The browser's back button restores the cached page, so you need to manually reload data.
Listen for Inertia's navigation events and call router.reload() when the user navigates back.
This ensures your dashboard always shows up-to-date data after editing.

Let me know if you need a more detailed code example!

Update data on click of browser's back button in Inertia + React based project

1. Use preserveState: false on your edit form redirect

2. Use useEffect and Inertia's on('navigate') event in React

3. Use remember and preserveState options (less recommended for this use case)

Summary

1. Use `preserveState: false` on your edit form redirect

2. Use `useEffect` and Inertia's `on('navigate')` event in React

3. Use `remember` and `preserveState` options (less recommended for this use case)