Laravel Inertia React preserve state not working

Question

I'm trying to reload my page but keep the filters state with Inertia.

Like this:

const [allProducts, setAllProducts] = useState([]);
    
const [filters, setFilters] = useState([]);

const fetchProducts = (page) => {
    Inertia.get(
      `/products?page=${page}`,
      { filters },
      {
        preserveState: true,
        preserveScroll: true,
        only: ['products'],
        onSuccess: (response) => {
          setAllProducts(allProducts.concat(response.props.products.data));
          page += 1;
        }
      }
    )
});

The problem is that filters and allProducts are reset even though preserveState = true.

Erik Roznbeker · Accepted Answer · 2022-07-20 10:14:12Z

0

What do you mean by "reload my page"? State in React is not preserved on "real" page refresh.

Maybe you can save data in local storage, then load it by useEffect. Another solution is to store data you want to keep between pages in Laravel session storage.

answered Jul 20, 2022 at 10:14

Erik Roznbeker

7744 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Danushka Madushanka · Accepted Answer · 2023-11-28 21:07:36Z

0

In your Controller try to use withQueryString() method. as a Example:

$allUsers = User::where('id', '!=', Auth::id())
            ->when($request->input('search'), function ($query, $search) {
                $query->where(function ($query) use ($search) {
                    $query->where('name', 'like', '%' . $search . '%')
                        ->orWhere('email', 'like', '%' . $search . '%');
                });
            })
            ->paginate(10)
            ->withQueryString()
            ->onEachSide(2);

answered Nov 28, 2023 at 21:07

Danushka Madushanka

1691 silver badge4 bronze badges

Collectives™ on Stack Overflow

Laravel Inertia React preserve state not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related