Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
philharmonie opened this issue Feb 21, 2024 · 3 comments

Comments

@philharmonie
Copy link

Version:

  • @inertiajs/vue3 version: 1.0.14

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
Copy link

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

@craigrileyuk
Copy link
Contributor

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
Copy link
Collaborator

@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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants