You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: v2/core-concepts/the-protocol.mdx
+65-11Lines changed: 65 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,15 +10,23 @@ The very first request to an Inertia app is just a regular, full-page browser re
10
10
11
11
This HTML response includes the site assets (CSS, JavaScript) as well as a root `<div>` in the page's body. The root `<div>` serves as a mounting point for the client-side app, and includes a `data-page` attribute with a JSON encoded [page object](#the-page-object) for the initial page. Inertia uses this information to boot your client-side framework and display the initial page component.
12
12
13
-
```html
13
+
```http
14
+
REQUEST
15
+
GET: http://example.com/events/80
16
+
Accept: text/html, application/xhtml+xml
17
+
18
+
RESPONSE
19
+
HTTP/1.1 200 OK
20
+
Content-Type: text/html; charset=utf-8
21
+
14
22
<html>
15
23
<head>
16
24
<title>My app</title>
17
25
<link href="/css/app.css" rel="stylesheet">
18
26
<script src="/js/app.js" defer></script>
19
27
</head>
20
28
<body>
21
-
<divid="app"data-page='{"component":"Event","props":{"event":{"id":80,"title":"Birthday party","start_date":"2019-06-02","description":"Come out and celebrate Jonathan's 36th birthday party!"}},"url":"/events/80","version":"c32b8e4965f418ad16eaebba1d4e960f"}'></div>
29
+
<div id="app" data-page='{"component":"Event","props":{"errors":{},"event":{"id":80,"title":"Birthday party","start_date":"2019-06-02","description":"Come out and celebrate Jonathan's 36th birthday party!"}},"url":"/events/80","version":"c32b8e4965f418ad16eaebba1d4e960f"}'></div>
22
30
</body>
23
31
</html>
24
32
```
@@ -31,10 +39,24 @@ Once the Inertia app has been booted, all subsequent requests to the site are ma
31
39
32
40
When the server detects the `X-Inertia` header, instead of responding with a full HTML document, it returns a JSON response with an encoded [page object](#the-page-object).
@@ -126,7 +148,7 @@ Inertia shares data between the server and client via a page object. This object
126
148
</ParamField>
127
149
128
150
<ParamFieldbody="props"type="object">
129
-
The page props (data).
151
+
The page props. Contains all of the page data along with an `errors` object (defaults to `{}` if there are no errors).
130
152
</ParamField>
131
153
132
154
<ParamFieldbody="url"type="string">
@@ -179,6 +201,7 @@ A minimal page object contains the core properties.
179
201
{
180
202
"component": "User/Edit",
181
203
"props": {
204
+
"errors": {},
182
205
"user": {
183
206
"name": "Jonathan"
184
207
}
@@ -198,6 +221,7 @@ When using deferred props, the page object includes a `deferredProps` configurat
198
221
{
199
222
"component": "Posts/Index",
200
223
"props": {
224
+
"errors": {},
201
225
"user": {
202
226
"name": "Jonathan"
203
227
}
@@ -226,6 +250,7 @@ When using merge props, additional configuration is included.
226
250
{
227
251
"component": "Feed/Index",
228
252
"props": {
253
+
"errors": {},
229
254
"user": {
230
255
"name": "Jonathan"
231
256
},
@@ -277,12 +302,13 @@ When using merge props, additional configuration is included.
277
302
278
303
### Page Object with Scroll Props
279
304
280
-
When using [Infinite scroll](/v2/data-props/infinite-scroll), the page object includes a `scrollProps`configuration.
305
+
When using [Infinite scroll](/v2/data-props/infinite-scroll), the page object includes a `scrollProps`configuration.
281
306
282
307
```json
283
308
{
284
309
"component": "Posts/Index",
285
310
"props": {
311
+
"errors": {},
286
312
"posts": {
287
313
"data": [
288
314
{
@@ -325,33 +351,61 @@ Whenever an Inertia request is made, Inertia will include the current asset vers
325
351
If the asset versions are the same, the request simply continues as expected. However, if the asset versions are different, the server immediately returns a `409 Conflict` response, and includes the URL in a `X-Inertia-Location` header. This header is necessary, since server-side redirects may have occurred. This tells Inertia what the final intended destination URL is.
326
352
327
353
<Tip>
328
-
Note, `409 Conflict` responses are only sent for `GET` requests, and not for `POST/PUT/PATCH/DELETE` requests. That said, they will be sent in the event that a `GET`redirect occurs after one of these requests.
354
+
Note, `409 Conflict` responses are only sent for `GET` requests, and not for `POST/PUT/PATCH/DELETE` requests. That said, they will be sent in the event that a `GET`redirect occurs after one of these requests.
329
355
</Tip>
330
356
331
357
When the Inertia client receives a `409 Conflict` response, it checks for the presence of the `X-Inertia-Location` header. If this header exists, Inertia performs a full-page visit to the URL specified in the header. This ensures that the user always has the latest assets loaded.
332
358
333
359
If "flash" session data exists when a `409 Conflict` response occurs, Inertia's server-side framework adapters will automatically reflash this data.
You can read more about this on the [asset versioning](/v2/advanced/asset-versioning) page.
336
375
337
376
## Partial Reloads
338
377
339
378
When making Inertia requests, the partial reload option allows you to request a subset of the props (data) from the server on subsequent visits to the *same* page component. This can be a helpful performance optimization if it's acceptable that some page data becomes stale. See the [partial reloads](/v2/data-props/partial-reloads) documentation for details.
340
379
341
-
When a partial reload request is made, Inertia includes two additional headers with the request:`X-Inertia-Partial-Data` and `X-Inertia-Partial-Component`.
380
+
When a partial reload request is made, Inertia includes the `X-Inertia-Partial-Component` header and may include`X-Inertia-Partial-Data` and/or`X-Inertia-Partial-Except` headers with the request.
342
381
343
382
The `X-Inertia-Partial-Data` header is a comma separated list of the desired props (data) keys that should be returned.
344
383
384
+
The `X-Inertia-Partial-Except` header is a comma separated list of the props (data) keys that should not be returned. When only the `X-Inertia-Partial-Except` header is included, all props (data) except those listed will be sent. If both `X-Inertia-Partial-Data` and `X-Inertia-Partial-Except` headers are included, the `X-Inertia-Partial-Except` header will take precedence.
385
+
345
386
The `X-Inertia-Partial-Component` header includes the name of the component that is being partially reloaded. This is necessary, since partial reloads only work for requests made to the same page component. If the final destination is different for some reason (eg. the user was logged out and is now on the login page), then no partial reloading will occur.
0 commit comments