Skip to content

Commit 3a78cd8

Browse files
joetannenbaumjoetannenbaum
authored
Merge pull request #6 from skryukov/update-the-protocol-2
Update the protocol with the `errors` prop, `X-Inertia-Partial-Except` and request data
2 parents cc28b6f + a264d0e commit 3a78cd8

File tree

2 files changed

+149
-152
lines changed

2 files changed

+149
-152
lines changed

‎v1/core-concepts/the-protocol.mdx‎

Lines changed: 84 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -15,34 +15,27 @@ page's body. The root `<div>` serves as a mounting point for the client-side app
1515
`data-page` attribute with a JSON encoded <a href="#the-page-object">page object</a> for the initial
1616
page. Inertia uses this information to boot your client-side framework and display the initial page component.
1717

18-
<div className="overflow-hidden rounded" style={{ background: '#202e59' }}>
19-
<div className="px-6 pt-6 font-mono text-sm text-white">
20-
<div className="text-xs font-bold uppercase text-gray-600">Request</div>
21-
<div className="mt-1">
22-
<span className="text-blue-400">GET:</span> http://example.com/events/80
23-
</div>
24-
<div>
25-
<span className="text-blue-400">Accept:</span> text/html, application/xhtml+xml
26-
</div>
27-
<div className="mt-8 text-xs font-bold uppercase text-gray-600">Response</div>
28-
<div className="mt-1">HTTP/1.1 200 OK</div>
29-
<div>
30-
<span className="text-blue-400">Content-Type:</span> text/html; charset=utf-8
31-
</div>
32-
</div>
33-
```html
34-
<html>
35-
<head>
36-
<title>My app</title>
37-
<link href="/css/app.css" rel="stylesheet">
38-
<script src="/js/app.js" defer></script>
39-
</head>
40-
<body>
41-
<div id="app" data-page='{"component":"Event","props":{"event":{"id":80,"title":"Birthday party","start_date":"2019-06-02","description":"Come out and celebrate Jonathan&apos;s 36th birthday party!"}},"url":"/events/80","version":"c32b8e4965f418ad16eaebba1d4e960f"}'></div>
42-
</body>
43-
</html>
44-
```
45-
</div>
18+
```http
19+
http
20+
REQUEST
21+
GET: https://example.com/events/80
22+
Accept: text/html, application/xhtml+xml
23+
24+
RESPONSE
25+
HTTP/1.1 200 OK
26+
Content-Type: text/html; charset=utf-8
27+
28+
<html>
29+
<head>
30+
<title>My app</title>
31+
<link href="/css/app.css" rel="stylesheet">
32+
<script src="/js/app.js" defer></script>
33+
</head>
34+
<body>
35+
<div id="app" data-page='{"component":"Event","props":{"event":{"id":80,"title":"Birthday party","start_date":"2019-06-02","description":"Come out and celebrate Jonathan&apos;s 36th birthday party!"}},"url":"/events/80","version":"c32b8e4965f418ad16eaebba1d4e960f"}'></div>
36+
</body>
37+
</html>
38+
```
4639

4740
<Info>
4841
While the initial response is HTML, Inertia does not server-side render the JavaScript page components.
@@ -58,53 +51,34 @@ When the server detects the `X-Inertia` header, instead of responding with a ful
5851
returns a JSON response with an encoded <a href="#the-page-object">page object</a>.
5952

6053

61-
<div className="overflow-hidden rounded" style={{ background: '#202e59' }}>
62-
<div className="px-6 pt-6 font-mono text-sm text-white">
63-
<div className="text-xs font-bold uppercase text-gray-600">Request</div>
64-
<div className="mt-1">
65-
<span className="text-blue-400">GET:</span> http://example.com/events/80
66-
</div>
67-
<div>
68-
<span className="text-blue-400">Accept:</span> text/html, application/xhtml+xml
69-
</div>
70-
<div>
71-
<span className="text-blue-400">X-Requested-With:</span> XMLHttpRequest
72-
</div>
73-
<div>
74-
<span className="text-blue-400">X-Inertia:</span> true
75-
</div>
76-
<div>
77-
<span className="text-blue-400">X-Inertia-Version:</span> 6b16b94d7c51cbe5b1fa42aac98241d5
78-
</div>
79-
<div className="mt-8 text-xs font-bold uppercase text-gray-600">Response</div>
80-
<div className="mt-1">HTTP/1.1 200 OK</div>
81-
<div>
82-
<span className="text-blue-400">Content-Type:</span> application/json
83-
</div>
84-
<div>
85-
<span className="text-blue-400">Vary:</span> X-Inertia
86-
</div>
87-
<div>
88-
<span className="text-blue-400">X-Inertia:</span> true
89-
</div>
90-
</div>
91-
```json
92-
{
93-
"component": "Event",
94-
"props": {
95-
"event": {
96-
"id": 80,
97-
"title": "Birthday party",
98-
"start_date": "2019-06-02",
99-
"description": "Come out and celebrate Jonathan's 36th birthday party!"
100-
}
101-
},
102-
"url": "/events/80",
103-
"version": "c32b8e4965f418ad16eaebba1d4e960f"
54+
```http
55+
REQUEST
56+
GET: https://example.com/events/80
57+
Accept: text/html, application/xhtml+xml
58+
X-Requested-With: XMLHttpRequest
59+
X-Inertia: true
60+
X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5
61+
62+
RESPONSE
63+
HTTP/1.1 200 OK
64+
Content-Type: application/json
65+
Vary: X-Inertia
66+
X-Inertia: true
67+
68+
{
69+
"component": "Event",
70+
"props": {
71+
"event": {
72+
"id": 80,
73+
"title": "Birthday party",
74+
"start_date": "2019-06-02",
75+
"description": "Come out and celebrate Jonathan's 36th birthday party!"
10476
}
77+
},
78+
"url": "/events/80",
79+
"version": "c32b8e4965f418ad16eaebba1d4e960f"
80+
}
10581
```
106-
</div>
107-
10882

10983
## The page object
11084

@@ -153,31 +127,18 @@ redirect occurs after one of these requests.
153127
If "flash" session data exists when a `409 Conflict` response occurs, Inertia's server-side framework
154128
adapters will automatically reflash this data.
155129

156-
<div className="overflow-hidden rounded" style={{ background: '#202e59' }}>
157-
<div className="p-6 font-mono text-sm text-white">
158-
<div className="text-xs font-bold uppercase text-gray-600">Request</div>
159-
<div className="mt-1">
160-
<span className="text-blue-400">GET:</span> http://example.com/events/80
161-
</div>
162-
<div>
163-
<span className="text-blue-400">Accept:</span> text/html, application/xhtml+xml
164-
</div>
165-
<div>
166-
<span className="text-blue-400">X-Requested-With:</span> XMLHttpRequest
167-
</div>
168-
<div>
169-
<span className="text-blue-400">X-Inertia:</span> true
170-
</div>
171-
<div>
172-
<span className="text-blue-400">X-Inertia-Version:</span> 6b16b94d7c51cbe5b1fa42aac98241d5
173-
</div>
174-
<div className="mt-8 text-xs font-bold uppercase text-gray-600">Response</div>
175-
<div className="mt-1">409: Conflict</div>
176-
<div>
177-
<span className="text-blue-400">X-Inertia-Location:</span> http://example.com/events/80
178-
</div>
179-
</div>
180-
</div>
130+
```http
131+
REQUEST
132+
GET: http://example.com/events/80
133+
Accept: text/html, application/xhtml+xml
134+
X-Requested-With: XMLHttpRequest
135+
X-Inertia: true
136+
X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5
137+
138+
RESPONSE
139+
409: Conflict
140+
X-Inertia-Location: http://example.com/events/80
141+
```
181142

182143
## Partial reloads
183144

@@ -197,46 +158,28 @@ the final destination is different for some reason (eg. the user was logged out
197158
then no partial reloading will occur.
198159

199160

200-
<div className="overflow-hidden rounded" style={{ background: '#202e59' }}>
201-
<div className="px-6 pt-6 font-mono text-sm text-white">
202-
<div className="text-xs font-bold uppercase text-gray-600">Request</div>
203-
<div className="mt-1">
204-
<span className="text-blue-400">GET:</span> http://example.com/events
205-
</div>
206-
<div>
207-
<span className="text-blue-400">Accept:</span> text/html, application/xhtml+xml
208-
</div>
209-
<div>
210-
<span className="text-blue-400">X-Requested-With:</span> XMLHttpRequest
211-
</div>
212-
<div>
213-
<span className="text-blue-400">X-Inertia:</span> true
214-
</div>
215-
<div>
216-
<span className="text-blue-400">X-Inertia-Version:</span> 6b16b94d7c51cbe5b1fa42aac98241d5
217-
</div>
218-
<div>
219-
<span className="text-blue-400">X-Inertia-Partial-Data:</span> events
220-
</div>
221-
<div>
222-
<span className="text-blue-400">X-Inertia-Partial-Component:</span> Events
223-
</div>
224-
<div className="mt-8 text-xs font-bold uppercase text-gray-600">Response</div>
225-
<div className="mt-1">HTTP/1.1 200 OK</div>
226-
<div>
227-
<span className="text-blue-400">Content-Type:</span> application/json
228-
</div>
229-
</div>
230-
```json
231-
{
232-
"component": "Events",
233-
"props": {
234-
"auth": {...}, // NOT included
235-
"categories": [...], // NOT included
236-
"events": [...] // included
237-
},
238-
"url": "/events/80",
239-
"version": "c32b8e4965f418ad16eaebba1d4e960f"
240-
}
241-
```
242-
</div>
161+
```http
162+
REQUEST
163+
GET: http://example.com/events
164+
Accept: text/html, application/xhtml+xml
165+
X-Requested-With: XMLHttpRequest
166+
X-Inertia: true
167+
X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5
168+
X-Inertia-Partial-Data: events
169+
X-Inertia-Partial-Component: Events
170+
171+
RESPONSE
172+
HTTP/1.1 200 OK
173+
Content-Type: application/json
174+
175+
{
176+
"component": "Events",
177+
"props": {
178+
"auth": {...}, // NOT included
179+
"categories": [...], // NOT included
180+
"events": [...] // included
181+
},
182+
"url": "/events/80",
183+
"version": "c32b8e4965f418ad16eaebba1d4e960f"
184+
}
185+
```

0 commit comments

Comments
 (0)