Skip to content

Commit 8f17637

Browse files
pascalbaljetpascalbaljet
committed
Update responses.jsx
1 parent 213d9d8 commit 8f17637

File tree

1 file changed

+192
-0
lines changed

1 file changed

+192
-0
lines changed

‎resources/js/Pages/responses.jsx

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ export const meta = {
55
title: 'Responses',
66
links: [
77
{ url: '#creating-responses', name: 'Creating responses' },
8+
{ url: '#props', name: 'Props' },
9+
{ url: '#provides-inertia-property', name: 'ProvidesInertiaProperty interface' },
10+
{ url: '#provides-inertia-properties', name: 'ProvidesInertiaProperties interface' },
811
{ url: '#root-template-data', name: 'Root template data' },
912
{ url: '#maximum-response-size', name: 'Maximum response size' },
1013
],
@@ -66,6 +69,195 @@ export default function () {
6669
To ensure that pages load quickly, only return the minimum data required for the page. Also, be aware that all
6770
data returned from the controllers will be visible client-side, so be sure to omit sensitive information.
6871
</Notice>
72+
<H2>Props</H2>
73+
<P>
74+
To pass data from the server to your page components, you can use props. You can pass various types of values as
75+
props, including primitive types, arrays, objects, and several Laravel-specific types that are automatically resolved:
76+
</P>
77+
<TabbedCode
78+
examples={[
79+
{
80+
name: 'Laravel',
81+
language: 'php',
82+
code: dedent`
83+
use App\\Models\\User;
84+
use Illuminate\\Http\\Resources\\Json\\JsonResource;
85+
86+
Inertia::render('Dashboard', [
87+
// Primitive values
88+
'title' => 'Dashboard',
89+
'count' => 42,
90+
'active' => true,
91+
92+
// Arrays and objects
93+
'settings' => ['theme' => 'dark', 'notifications' => true],
94+
95+
// Arrayable objects (Collections, Models, etc.)
96+
'user' => auth()->user(), // Eloquent model
97+
'users' => User::all(), // Eloquent collection
98+
99+
// API Resources
100+
'profile' => new UserResource(auth()->user()),
101+
102+
// Responsable objects
103+
'data' => new JsonResponse(['key' => 'value']),
104+
105+
// Closures
106+
'timestamp' => fn() => now()->timestamp,
107+
]);
108+
`,
109+
},
110+
]}
111+
/>
112+
<P>
113+
Arrayable objects like Eloquent models and collections are automatically converted using their <Code>toArray()</Code> method.
114+
Responsable objects like API resources and JSON responses are resolved through their <Code>toResponse()</Code> method.
115+
</P>
116+
<H2>ProvidesInertiaProperty interface</H2>
117+
<P>
118+
When passing props to your components, you may want to create custom classes that can transform themselves into the
119+
appropriate data format. You can do this by implementing the <Code>ProvidesInertiaProperty</Code> interface.
120+
</P>
121+
<P>
122+
This interface requires you to implement a <Code>toInertiaProperty</Code> method that returns the transformed value.
123+
The method receives a <Code>PropertyContext</Code> object which provides access to the property key, current props,
124+
and the request instance.
125+
</P>
126+
<TabbedCode
127+
examples={[
128+
{
129+
name: 'Laravel',
130+
language: 'php',
131+
code: dedent`
132+
use Inertia\\PropertyContext;
133+
use Inertia\\ProvidesInertiaProperty;
134+
135+
class UserAvatar implements ProvidesInertiaProperty
136+
{
137+
public function __construct(protected User $user, protected int $size = 64) {}
138+
139+
public function toInertiaProperty(PropertyContext $prop): mixed
140+
{
141+
return $this->user->avatar
142+
? Storage::url($this->user->avatar)
143+
: "https://ui-avatars.com/api/?name={$this->user->name}&size={$this->size}";
144+
}
145+
}
146+
`,
147+
},
148+
]}
149+
/>
150+
<P>
151+
You can use this class directly as a prop value:
152+
</P>
153+
<TabbedCode
154+
examples={[
155+
{
156+
name: 'Laravel',
157+
language: 'php',
158+
code: dedent`
159+
Inertia::render('Profile', [
160+
'user' => $user,
161+
'avatar' => new UserAvatar($user, 128),
162+
]);
163+
`,
164+
},
165+
]}
166+
/>
167+
<P>
168+
The <Code>avatar</Code> prop will contain the full avatar URL.
169+
</P>
170+
<P>
171+
This is particularly useful when you need to create reusable prop transformations or when you need access to the
172+
property key or other props during transformation.
173+
</P>
174+
<H2>ProvidesInertiaProperties interface</H2>
175+
<P>
176+
In some situations you may want to group related props together for reusability across different pages. You can
177+
accomplish this by implementing the <Code>ProvidesInertiaProperties</Code> interface.
178+
</P>
179+
<P>
180+
This interface requires you to implement a <Code>toInertiaProperties</Code> method that returns an array of
181+
key-value pairs. The method receives a <Code>RenderContext</Code> object which contains the request instance
182+
and component name.
183+
</P>
184+
<TabbedCode
185+
examples={[
186+
{
187+
name: 'Laravel',
188+
language: 'php',
189+
code: dedent`
190+
use Inertia\\RenderContext;
191+
use Inertia\\ProvidesInertiaProperties;
192+
193+
class UserPermissions implements ProvidesInertiaProperties
194+
{
195+
public function __construct(protected User $user) {}
196+
197+
public function toInertiaProperties(RenderContext $context): array
198+
{
199+
return [
200+
'canEdit' => $this->user->can('edit'),
201+
'canDelete' => $this->user->can('delete'),
202+
'canPublish' => $this->user->can('publish'),
203+
'isAdmin' => $this->user->hasRole('admin'),
204+
];
205+
}
206+
}
207+
`,
208+
},
209+
]}
210+
/>
211+
<P>
212+
You can use these prop classes directly in the <Code>render()</Code> and <Code>with()</Code> methods:
213+
</P>
214+
<TabbedCode
215+
examples={[
216+
{
217+
name: 'Laravel',
218+
language: 'php',
219+
code: dedent`
220+
public function index(UserPermissions $permissions)
221+
{
222+
return Inertia::render('UserProfile', $permissions);
223+
224+
// or...
225+
226+
return Inertia::render('UserProfile')->with($permissions);
227+
}
228+
`,
229+
},
230+
]}
231+
/>
232+
<P>
233+
You can also combine multiple prop classes with other props in an array:
234+
</P>
235+
<TabbedCode
236+
examples={[
237+
{
238+
name: 'Laravel',
239+
language: 'php',
240+
code: dedent`
241+
public function index(UserPermissions $permissions)
242+
{
243+
return Inertia::render('UserProfile', [
244+
'user' => auth()->user(),
245+
$permissions,
246+
]);
247+
248+
// or using method chaining...
249+
250+
return Inertia::render('UserProfile')
251+
->with('user', auth()->user())
252+
->with($permissions);
253+
}
254+
`,
255+
},
256+
]}
257+
/>
258+
<P>
259+
This approach helps organize your code and avoid repetition when the same props are needed across multiple pages.
260+
</P>
69261
<H2>Root template data</H2>
70262
<P>
71263
There are situations where you may want to access your prop data in your application's root Blade template. For

0 commit comments

Comments
 (0)