Inertia not rendering after redirect

ive got a inertia svelte application and just added a login page, but after login, after redirecting the user back home, nothing gets rendered on the home route, but in the svelte devtools, the data passed from the backend exists, only after a reload the page gets rendered, not even a console log is shown when called from the home page

Authentication logic

public function authenticate(LoginRequest $request)
    {
        if(Auth::attempt($request->validated(), true)) {
            Session::regenerate();

            return to_route('chats.index');
        }

        return back()->withErrors(['email' => 'Wrong email or password']);
    }

Home

 public function index()
    {
        $user = Auth::user();
        $chats = $user->chats()
            ->with(['messages.author', 'user' => function(HasOneThrough $query) use($user) {
                $query->whereNot('users.id', $user->id);
            }])
            ->get();

        return Inertia::render('Chats/Index', [
            'chats' => $chats
        ]);
    }

for anyone wondering, im using chats.index as my home route btw here is the repo https://github.com/salfel/chattenger

vincent15000

2 years ago

Level 63

According to me, it's not a Laravel or InertiaJS problem, but a svelte problem.

JabatoForever

2 years ago

Level 2

Hello @salfel , I recently faced a similar issue in one of my projects where a list wasn't updating as expected. Here's what I found and how I resolved it: missing Key in Each Block: one common issue is the absence of a key within an each block in Svelte. When a key is missing, the application can lose track of the items in the list, preventing it from updating correctly. Ensure that you specify a key in your each block. Here's an example

{#each picks.data as pick, index (pick.id)}
 [...]
{/each}

Issues with Nested Props: If your problem isn't related to the missing key, it might be because of nested properties not being reassigned correctly. To address this, you can use a reactive statement. Here's a way you can structure it:

export let states, country, metas, game_id, game, excluded, meta_type, loading;
let picks = $page.props.picks.data;

1 like

Please or to participate in this conversation.