Do you have custom accessor for the id in the Player model?
Inertia is returning undefined attribute
The issue I am having is that after Laravel passes the data to Inertia, the id attribute of my players collection is lost and returns as undefined. The id attribute on my game is fine. Why is Inertia losing the players id attribute?
I have a Svelte component called Completed.svelte. It starts as below:
<script>
import { inertia, Link, page } from '@inertiajs/svelte'
export let game;
export let logs;
export let players;
console.log(players);
console.log(game);
console.log($page.props.players);
console.log($page.props.game);
...
</script>
<!-- HTML outputting to screen starts here -->
The output of all this console logging is below:
//players
(6) [{…}, {…}, {…}, {…}, {…}, {…}]
0: {id: undefined, user_id: 1, game_id: 1, hash_id: 1, created_at: '2023-01-14T03:34:38.000000Z', …}
1: {id: undefined, user_id: 2, game_id: 1, hash_id: 2, created_at: '2023-01-14T03:34:38.000000Z', …}
2: {id: undefined, user_id: 3, game_id: 1, hash_id: 3, created_at: '2023-01-14T03:34:38.000000Z', …}
3: {id: undefined, user_id: 4, game_id: 1, hash_id: 4, created_at: '2023-01-14T03:34:38.000000Z', …}
4: {id: undefined, user_id: 5, game_id: 1, hash_id: 5, created_at: '2023-01-14T03:34:38.000000Z', …}
5: {id: undefined, user_id: 11, game_id: 1, hash_id: 11, created_at: '2023-01-15T04:14:36.000000Z', …}
length: 6
[[Prototype]]: Array(0)
//game
{id: 1, name: 'rerum', user_id: 11, max_players: 10, active: 0, …}
// $page.props.players
Completed.svelte:13 (6) [{…}, {…}, {…}, {…}, {…}, {…}]
0: {id: undefined, user_id: 1, game_id: 1, hash_id: 1, created_at: '2023-01-14T03:34:38.000000Z', …}
1: {id: undefined, user_id: 2, game_id: 1, hash_id: 2, created_at: '2023-01-14T03:34:38.000000Z', …}
2: {id: undefined, user_id: 3, game_id: 1, hash_id: 3, created_at: '2023-01-14T03:34:38.000000Z', …}
3: {id: undefined, user_id: 4, game_id: 1, hash_id: 4, created_at: '2023-01-14T03:34:38.000000Z', …}
4: {id: undefined, user_id: 5, game_id: 1, hash_id: 5, created_at: '2023-01-14T03:34:38.000000Z', …}
5: {id: undefined, user_id: 11, game_id: 1, hash_id: 11, created_at: '2023-01-15T04:14:36.000000Z', …}
length: 6
[[Prototype]]: Array(0)
//$page.props.game
{id: 1, name: 'rerum', user_id: 11, max_players: 10, active: 0, …}
As you can see above, the id of my players is undefined. If I dd($players) right before my I return Inertia::render, all my players id attributes are there.
//GameController.php
...
$players = Player::where("game_id", $game->id)->get();
...
dd($players);
return Inertia::render('App/Games/Completed', ['game'=>$game, 'players'=>$players, 'logs'=>$logs]);
//Output of dd($players)
Illuminate\Database\Eloquent\Collection {#1346 ▼ // app\Http\Controllers\GameController.php:129
#items: array:6 [▼
0 => App\Models\Player {#1347 ▼
#connection: "mysql"
#table: "players"
#primaryKey: "id"
#keyType: "int"
+incrementing: true
#with: []
#withCount: []
+preventsLazyLoading: false
#perPage: 15
+exists: true
+wasRecentlyCreated: false
#escapeWhenCastingToString: false
#attributes: array:6 [▼
"id" => 1
"user_id" => 1
"game_id" => 1
"hash_id" => 1
"created_at" => "2023-01-14 03:34:38"
"updated_at" => "2023-01-14 03:34:38"
]
#original: array:6 [▶]
#changes: []
#casts: []
#classCastCache: []
#attributeCastCache: []
#dates: []
#dateFormat: null
#appends: []
#dispatchesEvents: []
#observables: []
#relations: []
#touches: []
+timestamps: true
#hidden: []
#visible: []
#fillable: array:2 [▶]
#guarded: array:1 [▶]
}
1 => App\Models\Player {#1337 ▶}
2 => App\Models\Player {#1338 ▶}
3 => App\Models\Player {#1357 ▶}
4 => App\Models\Player {#1358 ▶}
5 => App\Models\Player {#1340 ▶}
]
#escapeWhenCastingToString: false
}
Given the results of this dd($players) and the fact that my game.id is fine I believe the issue is with Inertia, not Laravel.
I am using Laravel 9, Inertia and Svelte. I have reproduced this error in Chrome and Firefox, so I don't believe it's browser related.
Check the Elements tab of the browser dev tools. Inertia add all data as json to the entry div. Is the ids missing there as well?
Can you show the player model?
Can you show the app.js (or svelte)
Please or to participate in this conversation.