inertiajs / inertia

Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
https://inertiajs.com
MIT License
6.3k stars 423 forks source link

Vue 3: usePage().props.filter returns null instead of expected object structure from Laravel Shared Data #1806

Open philharmonie opened 7 months ago

philharmonie commented 7 months ago

Version:

Describe the problem:

When attempting to access shared props using usePage().props within a Vue 3 component, specifically trying to access a nested property (filter.current.name), the expected data structure (filter) is returned as null instead of containing the nested current object. The Laravel backend correctly prepares and logs the shared data structure as containing {"current": null} when session()->get('filter') is null, indicating that the server-side logic functions as intended. However, when accessing this data on the client side through Inertia.js in a Vue 3 setup function, the entire filter object is logged as null, contrary to expectations based on the shared data from the server. I expect to receive an object with at least the current key (even if it's null) instead of the entire filter prop being null.

Steps to reproduce:

  1. Backend Setup: Use Laravel to set up an Inertia middleware (HandleInertiaRequests) that shares a filter prop, which includes a nested current object. This object is supposed to be null if there's no session data available, which is the intended and confirmed behavior through Laravel logs.

  2. Frontend Access: In a Vue 3 component, attempt to access this shared filter prop using usePage().props.filter, expecting to receive the shared data structure.

  3. Observation: Despite the backend correctly sharing the filter data structure with {"current":null}, usePage().props.filter is logged as null in the Vue 3 component's onMounted lifecycle hook, indicating a discrepancy in what's shared versus what's received.

shengslogar commented 6 months ago

I've worked with shared data and never run into this issue. Can't really help without seeing your code.

craigrileyuk commented 6 months ago

What happens if you call getShared in your controller just before returning a response?

Route::get('/users', function () {
    Inertia::share('foo', 'bar');

    dd(\Inertia\Inertia::getShared());
    return inertia('Users', [
        'users' => User::get(),
    ]);
});

Is your 'filters' property appearing in the output there? If not, it's likely an issue with how you've set up the Middleware.

pedroborges commented 1 week ago

@philharmonie Thanks for reporting this! Could you provide a reproducible repository or example that I can use to test the issue? It would really help in identifying the problem. Appreciate it!