next-sanity 2.0.0-preview-kit.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +500 -4
- package/dist/preview.cjs +6 -15
- package/dist/preview.cjs.map +1 -1
- package/dist/preview.d.ts +2 -4
- package/dist/preview.js +1 -17
- package/dist/preview.js.map +1 -1
- package/dist/studio.cjs.map +1 -1
- package/dist/studio.d.ts +9 -7
- package/dist/studio.js.map +1 -1
- package/package.json +9 -9
- package/src/preview/definePreview.tsx +6 -1
- package/src/preview/index.ts +1 -1
- package/src/studio/NextStudioHead.tsx +3 -4
- package/src/studio/ServerStyleSheetDocument.tsx +1 -2
package/README.md
CHANGED
|
@@ -4,15 +4,24 @@
|
|
|
4
4
|
|
|
5
5
|
**Features:**
|
|
6
6
|
|
|
7
|
-
- Client-side live real-time preview for
|
|
8
|
-
- GROQ syntax highlighting
|
|
7
|
+
- [Client-side live real-time preview for authenticated users](#live-real-time-preview)
|
|
8
|
+
- [GROQ syntax highlighting](https://marketplace.visualstudio.com/items?itemName=sanity-io.vscode-sanity)
|
|
9
9
|
- [Embed](#next-sanitystudio-dev-preview) [Studio v3](https://www.sanity.io/studio-v3) in [Next.js](https://nextjs.org/) apps
|
|
10
10
|
|
|
11
11
|
## Table of contents
|
|
12
12
|
|
|
13
13
|
- [Table of contents](#table-of-contents)
|
|
14
14
|
- [Installation](#installation)
|
|
15
|
-
- [
|
|
15
|
+
- [`next-sanity` Running groq queries](#next-sanity-running-groq-queries)
|
|
16
|
+
- [`next-sanity/preview` Live real-time preview](#next-sanitypreview-live-real-time-preview)
|
|
17
|
+
- [Examples](#examples)
|
|
18
|
+
- [Built-in Sanity auth](#built-in-sanity-auth)
|
|
19
|
+
- [Next 12](#next-12)
|
|
20
|
+
- [Next 13 `appDir`](#next-13-appdir)
|
|
21
|
+
- [Custom token auth](#custom-token-auth)
|
|
22
|
+
- [Next 12](#next-12-1)
|
|
23
|
+
- [Next 13 `appDir`](#next-13-appdir-1)
|
|
24
|
+
- [Starters](#starters)
|
|
16
25
|
- [Limits](#limits)
|
|
17
26
|
- [`next-sanity/studio` (dev-preview)](#next-sanitystudio-dev-preview)
|
|
18
27
|
- [Usage](#usage)
|
|
@@ -20,6 +29,11 @@
|
|
|
20
29
|
- [Customize `<ServerStyleSheetDocument />`](#customize-serverstylesheetdocument-)
|
|
21
30
|
- [Full-control mode](#full-control-mode)
|
|
22
31
|
- [Migrate](#migrate)
|
|
32
|
+
- [From `v1`](#from-v1)
|
|
33
|
+
- [`createPreviewSubscriptionHook` is replaced with `definePreview`](#createpreviewsubscriptionhook-is-replaced-with-definepreview)
|
|
34
|
+
- [Before](#before)
|
|
35
|
+
- [After](#after)
|
|
36
|
+
- [`createCurrentUserHook` is removed](#createcurrentuserhook-is-removed)
|
|
23
37
|
- [From `v0.4`](#from-v04)
|
|
24
38
|
- [`createPortableTextComponent` is removed](#createportabletextcomponent-is-removed)
|
|
25
39
|
- [`createImageUrlBuilder` is removed](#createimageurlbuilder-is-removed)
|
|
@@ -34,13 +48,388 @@ $ npm install next-sanity @portabletext/react @sanity/image-url
|
|
|
34
48
|
$ yarn add next-sanity @portabletext/react @sanity/image-url
|
|
35
49
|
```
|
|
36
50
|
|
|
37
|
-
##
|
|
51
|
+
## `next-sanity` Running groq queries
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
import {createClient, groq} from 'next-sanity'
|
|
55
|
+
|
|
56
|
+
const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID // "pv8y60vp"
|
|
57
|
+
const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET // "production"
|
|
58
|
+
const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION // "2022-11-16"
|
|
59
|
+
|
|
60
|
+
const client = createClient({
|
|
61
|
+
projectId,
|
|
62
|
+
dataset,
|
|
63
|
+
apiVersion,
|
|
64
|
+
useCdn: typeof document !== 'undefined',
|
|
65
|
+
})
|
|
66
|
+
|
|
67
|
+
const data = await client.fetch(groq`*[]`)
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## `next-sanity/preview` Live real-time preview
|
|
38
71
|
|
|
39
72
|
You can implement real-time client side preview using `definePreview`. It works by streaming the whole dataset to the browser, which it keeps updated using [listeners](https://www.sanity.io/docs/realtime-updates) and Mendoza patches. When it receives updates, then the query is run against the client-side datastore using [groq-js](https://github.com/sanity-io/groq-js).
|
|
73
|
+
It uses [`@sanity/preview-kit`](https://github.com/sanity-io/preview-kit) under the hood, which can be used in frameworks other than Nextjs if it supports React 18 Suspense APIs.
|
|
74
|
+
|
|
75
|
+
### Examples
|
|
76
|
+
|
|
77
|
+
When running `next dev` locally these examples start and exit preview mode by opening [localhost:3000/api/preview](http://localhost:3000/api/preview) and [localhost:3000/api/exit-preview](http://localhost:3000/api/exit-preview).
|
|
78
|
+
|
|
79
|
+
#### Built-in Sanity auth
|
|
80
|
+
|
|
81
|
+
Pros:
|
|
82
|
+
|
|
83
|
+
- Checks if the user is authenticated for you.
|
|
84
|
+
- Pairs well with Sanity Studio preview panes.
|
|
85
|
+
|
|
86
|
+
Cons:
|
|
87
|
+
|
|
88
|
+
- Doesn't implement a login flow:
|
|
89
|
+
- Requires the user to login to a Sanity Studio prior to starting Preview mode.
|
|
90
|
+
- Requires your Sanity Studio to be hosted on the same origin.
|
|
91
|
+
- Currently only supports cookie based auth, and not yet the `dual` [loginMethod in Sanity Studio](https://github.com/sanity-io/sanity/blob/9bf408d4cc8b3e14bac0bf94d3305d6960181d3c/packages/%40sanity/default-login/README.md?plain=1#L37):
|
|
92
|
+
- Safari based browsers (Desktop Safari on Macs, and all browsers on iOS) doesn't work.
|
|
93
|
+
- Doesn't support incognito browser modes.
|
|
94
|
+
|
|
95
|
+
`pages/api/preview.js`:
|
|
96
|
+
|
|
97
|
+
```js
|
|
98
|
+
export default function preview(req, res) {
|
|
99
|
+
res.setPreviewData({})
|
|
100
|
+
res.writeHead(307, {Location: '/'})
|
|
101
|
+
res.end()
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
`pages/api/exit-preview.js`:
|
|
106
|
+
|
|
107
|
+
```js
|
|
108
|
+
export default function exit(req, res) {
|
|
109
|
+
res.clearPreviewData()
|
|
110
|
+
res.writeHead(307, {Location: '/'})
|
|
111
|
+
res.end()
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
`components/DocumentsCount.js`:
|
|
116
|
+
|
|
117
|
+
```jsx
|
|
118
|
+
import groq from 'groq'
|
|
119
|
+
|
|
120
|
+
export const query = groq`count(*[])`
|
|
121
|
+
|
|
122
|
+
export function DocumentsCount({data}) {
|
|
123
|
+
return (
|
|
124
|
+
<>
|
|
125
|
+
Documents: <strong>{data}</strong>
|
|
126
|
+
</>
|
|
127
|
+
)
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
`lib/sanity.client.js`
|
|
132
|
+
|
|
133
|
+
```js
|
|
134
|
+
import {createClient} from 'next-sanity'
|
|
135
|
+
|
|
136
|
+
const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID // "pv8y60vp"
|
|
137
|
+
const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET // "production"
|
|
138
|
+
const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION // "2022-11-16"
|
|
139
|
+
|
|
140
|
+
export const client = createClient({projectId, dataset, apiVersion, useCdn: false})
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
`lib/sanity.preview.js`
|
|
144
|
+
|
|
145
|
+
```js
|
|
146
|
+
'use client'
|
|
147
|
+
|
|
148
|
+
import {definePreview} from 'next-sanity/preview'
|
|
149
|
+
import {projectId, dataset} from 'lib/sanity.client'
|
|
150
|
+
|
|
151
|
+
function onPublicAccessOnly() {
|
|
152
|
+
throw new Error(`Unable to load preview as you're not logged in`)
|
|
153
|
+
}
|
|
154
|
+
export const usePreview = definePreview({projectId, dataset, onPublicAccessOnly})
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
`components/PreviewDocumentsCount.js`:
|
|
158
|
+
|
|
159
|
+
```jsx
|
|
160
|
+
'use client'
|
|
161
|
+
|
|
162
|
+
import {usePreview} from 'lib/sanity.preview'
|
|
163
|
+
import {query, DocumentsCount} from 'components/DocumentsCount'
|
|
164
|
+
|
|
165
|
+
export default function PreviewDocumentsCount() {
|
|
166
|
+
const data = usePreview(null, query)
|
|
167
|
+
return <DocumentsCount data={data} />
|
|
168
|
+
}
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
##### Next 12
|
|
172
|
+
|
|
173
|
+
`pages/index.js`:
|
|
174
|
+
|
|
175
|
+
```jsx
|
|
176
|
+
import {PreviewSuspense} from 'next-sanity/preview'
|
|
177
|
+
import {lazy} from 'react'
|
|
178
|
+
import {DocumentsCount, query} from 'components/DocumentsCount'
|
|
179
|
+
import {client} from 'lib/sanity.client'
|
|
180
|
+
|
|
181
|
+
const PreviewDocumentsCount = lazy(() => import('components/PreviewDocumentsCount'))
|
|
182
|
+
|
|
183
|
+
export const getStaticProps = async ({preview = false}) => {
|
|
184
|
+
if (preview) {
|
|
185
|
+
return {props: {preview}}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
const data = await client.fetch(query)
|
|
189
|
+
|
|
190
|
+
return {props: {preview, data}}
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
export default function IndexPage({preview, data}) {
|
|
194
|
+
if (preview) {
|
|
195
|
+
return (
|
|
196
|
+
<PreviewSuspense fallback="Loading...">
|
|
197
|
+
<PreviewDocumentsCount />
|
|
198
|
+
</PreviewSuspense>
|
|
199
|
+
)
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
return <DocumentsCount data={data} />
|
|
203
|
+
}
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
##### Next 13 `appDir`
|
|
207
|
+
|
|
208
|
+
`components/PreviewSuspense.js`:
|
|
209
|
+
|
|
210
|
+
```jsx
|
|
211
|
+
'use client'
|
|
212
|
+
|
|
213
|
+
// Once rollup supports 'use client' module directives then 'next-sanity' will include them and this re-export will no longer be necessary
|
|
214
|
+
export {PreviewSuspense as default} from 'next-sanity/preview'
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
`app/page.js`:
|
|
218
|
+
|
|
219
|
+
```jsx
|
|
220
|
+
import {lazy} from 'react'
|
|
221
|
+
import {previewData} from 'next/headers'
|
|
222
|
+
import PreviewSuspense from 'components/PreviewSuspense'
|
|
223
|
+
import {DocumentsCount, query} from 'components/DocumentsCount'
|
|
224
|
+
import {client} from 'lib/sanity.client'
|
|
225
|
+
|
|
226
|
+
const PreviewDocumentsCount = lazy(() => import('components/PreviewDocumentsCount'))
|
|
227
|
+
|
|
228
|
+
export default async function IndexPage() {
|
|
229
|
+
if (previewData()) {
|
|
230
|
+
return (
|
|
231
|
+
<PreviewSuspense fallback="Loading...">
|
|
232
|
+
<PreviewDocumentsCount />
|
|
233
|
+
</PreviewSuspense>
|
|
234
|
+
)
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
const data = await client.fetch(query)
|
|
238
|
+
return <DocumentsCount data={data} />
|
|
239
|
+
}
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
#### Custom token auth
|
|
243
|
+
|
|
244
|
+
By providing a read token (Sanity API token with `viewer` rights) you override the built-in auth and get more control and flexibility.
|
|
245
|
+
|
|
246
|
+
Pros:
|
|
247
|
+
|
|
248
|
+
- Allows launching previews for users without necessarily an Sanity account.
|
|
249
|
+
- Hosting a Sanity Studio on the same origin is optional.
|
|
250
|
+
- Can build preview experiences that start outside a Studio, like "Copy share link" functionality.
|
|
251
|
+
- Works in all Safari based browsers (Desktop Safari on Macs, and all browsers on iOS).
|
|
252
|
+
- Works with incognito browser modes.
|
|
253
|
+
|
|
254
|
+
Cons:
|
|
255
|
+
|
|
256
|
+
- Like all things with great power comes great responsibility. You're responsible for implementing adequate protection against leaking the `token` in your js bundle, or preventing the `/api/preview?secret=${secret}` from being easily guessable.
|
|
257
|
+
- It results in a larger JS bundle as `@sanity/groq-store` currently requires `event-source-polyfill` since native `window.EventSource` does not support setting `Authorization` headers needed for the token auth.
|
|
258
|
+
|
|
259
|
+
`pages/api/preview.js`:
|
|
260
|
+
|
|
261
|
+
```js
|
|
262
|
+
import getSecret from 'lib/getSecret'
|
|
263
|
+
|
|
264
|
+
export default async function preview(req, res) {
|
|
265
|
+
// The secret can't be stored in an env variable with a NEXT_PUBLIC_ prefix, as it would make you vulnerable to leaking the token to anyone.
|
|
266
|
+
// If you don't have an custom API with authentication that can handle checking secrets, you may use https://github.com/sanity-io/sanity-studio-secrets to store the secret in your dataset.
|
|
267
|
+
const secret = await getSecret()
|
|
268
|
+
|
|
269
|
+
// This is the most common way to check for auth, but we encourage you to use your existing auth infra to protect your token and securely transmit it to the client
|
|
270
|
+
if (!req.query.secret || req.query.secret !== secret) {
|
|
271
|
+
return res.status(401).json({message: 'Invalid secret'})
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
res.setPreviewData({token: process.env.SANITY_API_READ_TOKEN})
|
|
275
|
+
res.writeHead(307, {Location: '/'})
|
|
276
|
+
res.end()
|
|
277
|
+
}
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
`pages/api/exit-preview.js`:
|
|
281
|
+
|
|
282
|
+
```js
|
|
283
|
+
export default function exit(req, res) {
|
|
284
|
+
res.clearPreviewData()
|
|
285
|
+
res.writeHead(307, {Location: '/'})
|
|
286
|
+
res.end()
|
|
287
|
+
}
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
`components/DocumentsCount.js`:
|
|
291
|
+
|
|
292
|
+
```jsx
|
|
293
|
+
import groq from 'groq'
|
|
294
|
+
|
|
295
|
+
export const query = groq`count(*[])`
|
|
296
|
+
|
|
297
|
+
export function DocumentsCount({data}) {
|
|
298
|
+
return (
|
|
299
|
+
<>
|
|
300
|
+
Documents: <strong>{data}</strong>
|
|
301
|
+
</>
|
|
302
|
+
)
|
|
303
|
+
}
|
|
304
|
+
```
|
|
305
|
+
|
|
306
|
+
`lib/sanity.client.js`
|
|
307
|
+
|
|
308
|
+
```js
|
|
309
|
+
import {createClient} from 'next-sanity'
|
|
310
|
+
|
|
311
|
+
const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID // "pv8y60vp"
|
|
312
|
+
const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET // "production"
|
|
313
|
+
const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION // "2022-11-16"
|
|
314
|
+
|
|
315
|
+
export const client = createClient({projectId, dataset, apiVersion, useCdn: false})
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
`lib/sanity.preview.js`
|
|
319
|
+
|
|
320
|
+
```js
|
|
321
|
+
'use client'
|
|
322
|
+
|
|
323
|
+
import {definePreview} from 'next-sanity/preview'
|
|
324
|
+
import {projectId, dataset} from 'lib/sanity.client'
|
|
325
|
+
|
|
326
|
+
export const usePreview = definePreview({projectId, dataset})
|
|
327
|
+
```
|
|
328
|
+
|
|
329
|
+
`components/PreviewDocumentsCount.js`:
|
|
330
|
+
|
|
331
|
+
```jsx
|
|
332
|
+
'use client'
|
|
333
|
+
|
|
334
|
+
import {usePreview} from 'lib/sanity.preview'
|
|
335
|
+
import {query, DocumentsCount} from 'components/DocumentsCount'
|
|
336
|
+
|
|
337
|
+
export default function PreviewDocumentsCount({token}) {
|
|
338
|
+
const data = usePreview(token, query)
|
|
339
|
+
return <DocumentsCount data={data} />
|
|
340
|
+
}
|
|
341
|
+
```
|
|
342
|
+
|
|
343
|
+
##### Next 12
|
|
344
|
+
|
|
345
|
+
`pages/index.js`:
|
|
346
|
+
|
|
347
|
+
```jsx
|
|
348
|
+
import {PreviewSuspense} from 'next-sanity/preview'
|
|
349
|
+
import {lazy} from 'react'
|
|
350
|
+
import {DocumentsCount, query} from 'components/DocumentsCount'
|
|
351
|
+
import {client} from 'lib/sanity.client'
|
|
352
|
+
|
|
353
|
+
const PreviewDocumentsCount = lazy(() => import('components/PreviewDocumentsCount'))
|
|
354
|
+
|
|
355
|
+
export const getStaticProps = async ({preview = false, previewData = {}}) => {
|
|
356
|
+
if (preview && previewData?.token) {
|
|
357
|
+
return {props: {preview, token: previewData.token}}
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
const data = await client.fetch(query)
|
|
361
|
+
|
|
362
|
+
return {props: {preview, data}}
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
export default function IndexPage({preview, token, data}) {
|
|
366
|
+
if (preview) {
|
|
367
|
+
return (
|
|
368
|
+
<PreviewSuspense fallback="Loading...">
|
|
369
|
+
<PreviewDocumentsCount token={token} />
|
|
370
|
+
</PreviewSuspense>
|
|
371
|
+
)
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
return <DocumentsCount data={data} />
|
|
375
|
+
}
|
|
376
|
+
```
|
|
377
|
+
|
|
378
|
+
##### Next 13 `appDir`
|
|
379
|
+
|
|
380
|
+
`components/PreviewSuspense.js`:
|
|
381
|
+
|
|
382
|
+
```jsx
|
|
383
|
+
'use client'
|
|
384
|
+
|
|
385
|
+
// Once rollup supports 'use client' module directives then 'next-sanity' will include them and this re-export will no longer be necessary
|
|
386
|
+
export {PreviewSuspense as default} from 'next-sanity/preview'
|
|
387
|
+
```
|
|
388
|
+
|
|
389
|
+
`app/page.js`:
|
|
390
|
+
|
|
391
|
+
```jsx
|
|
392
|
+
import {lazy} from 'react'
|
|
393
|
+
import {previewData} from 'next/headers'
|
|
394
|
+
import PreviewSuspense from 'components/PreviewSuspense'
|
|
395
|
+
import {DocumentsCount, query} from 'components/DocumentsCount'
|
|
396
|
+
import {client} from 'lib/sanity.client'
|
|
397
|
+
|
|
398
|
+
const PreviewDocumentsCount = lazy(() => import('components/PreviewDocumentsCount'))
|
|
399
|
+
|
|
400
|
+
export default async function IndexPage() {
|
|
401
|
+
if (previewData()?.token) {
|
|
402
|
+
return (
|
|
403
|
+
<PreviewSuspense fallback="Loading...">
|
|
404
|
+
<PreviewDocumentsCount token={previewData().token} />
|
|
405
|
+
</PreviewSuspense>
|
|
406
|
+
)
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
const data = await client.fetch(query)
|
|
410
|
+
return <DocumentsCount data={data} />
|
|
411
|
+
}
|
|
412
|
+
```
|
|
413
|
+
|
|
414
|
+
### Starters
|
|
415
|
+
|
|
416
|
+
- [A Next.js Blog with a Native Authoring Experience](https://github.com/sanity-io/nextjs-blog-cms-sanity-v3)
|
|
40
417
|
|
|
41
418
|
### Limits
|
|
42
419
|
|
|
43
420
|
The real-time preview isn't optimized and comes with a configured limit of 3000 documents. You can experiment with larger datasets by configuring the hook with `documentLimit: <Integer>`. Be aware that this might significantly affect the preview performance.
|
|
421
|
+
You may use the `includeTypes` option to reduce the amount of documents and reduce the risk of hitting the `documentLimit`:
|
|
422
|
+
|
|
423
|
+
```js
|
|
424
|
+
import {definePreview} from 'next-sanity/preview'
|
|
425
|
+
|
|
426
|
+
export const usePreview = definePreview({
|
|
427
|
+
projectId,
|
|
428
|
+
dataset,
|
|
429
|
+
documentLimit: 10000,
|
|
430
|
+
includeTypes: ['page', 'product', 'sanity.imageAsset'],
|
|
431
|
+
})
|
|
432
|
+
```
|
|
44
433
|
|
|
45
434
|
We have plans for optimizations in the roadmap.
|
|
46
435
|
|
|
@@ -206,6 +595,113 @@ function Studiopage() {
|
|
|
206
595
|
|
|
207
596
|
## Migrate
|
|
208
597
|
|
|
598
|
+
### From `v1`
|
|
599
|
+
|
|
600
|
+
#### `createPreviewSubscriptionHook` is replaced with `definePreview`
|
|
601
|
+
|
|
602
|
+
There are several differences between the hooks. First of all, `definePreview` requires React 18 and Suspense. And as it's designed to work with React Server Components you provide `token` in the hook itself instead of in the `definePreview` step. Secondly, `definePreview` encourages code-splitting using `React.lazy` and that means you only call the `usePreview` hook in a component that is lazy loaded. Quite different from `usePreviewSubscription` which was designed to be used in both preview mode, and in production by providing `initialData`.
|
|
603
|
+
|
|
604
|
+
##### Before
|
|
605
|
+
|
|
606
|
+
The files that are imported here are the same as the [Next 12 example](#next-12).
|
|
607
|
+
|
|
608
|
+
`pages/index.js`
|
|
609
|
+
|
|
610
|
+
```jsx
|
|
611
|
+
import {createPreviewSubscriptionHook} from 'next-sanity'
|
|
612
|
+
import {DocumentsCount, query} from 'components/DocumentsCount'
|
|
613
|
+
import {client, projectId, dataset} from 'lib/sanity.client'
|
|
614
|
+
|
|
615
|
+
export const getStaticProps = async ({preview = false}) => {
|
|
616
|
+
const data = await client.fetch(query)
|
|
617
|
+
|
|
618
|
+
return {props: {preview, data}}
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
const usePreviewSubscription = createPreviewSubscriptionHook({projectId, dataset})
|
|
622
|
+
export default function IndexPage({preview, data: initialData}) {
|
|
623
|
+
const {data} = usePreviewSubscription(indexQuery, {initialData, enabled: preview})
|
|
624
|
+
return <DocumentsCount data={data} />
|
|
625
|
+
}
|
|
626
|
+
```
|
|
627
|
+
|
|
628
|
+
##### After
|
|
629
|
+
|
|
630
|
+
`components/PreviewDocumentsCount.js`
|
|
631
|
+
|
|
632
|
+
```jsx
|
|
633
|
+
import {definePreview} from 'next-sanity/preview'
|
|
634
|
+
import {projectId, dataset} from 'lib/sanity.client'
|
|
635
|
+
|
|
636
|
+
const usePreview = definePreview({projectId, dataset})
|
|
637
|
+
export default function PreviewDocumentsCount() {
|
|
638
|
+
const data = usePreview(null, query)
|
|
639
|
+
return <DocumentsCount data={data} />
|
|
640
|
+
}
|
|
641
|
+
```
|
|
642
|
+
|
|
643
|
+
`pages/index.js`
|
|
644
|
+
|
|
645
|
+
```jsx
|
|
646
|
+
import {lazy} from 'react'
|
|
647
|
+
import {PreviewSuspense} from 'next-sanity/preview'
|
|
648
|
+
import {DocumentsCount, query} from 'components/DocumentsCount'
|
|
649
|
+
import {client} from 'lib/sanity.client'
|
|
650
|
+
|
|
651
|
+
const PreviewDocumentsCount = lazy(() => import('components/PreviewDocumentsCount'))
|
|
652
|
+
|
|
653
|
+
export const getStaticProps = async ({preview = false}) => {
|
|
654
|
+
const data = await client.fetch(query)
|
|
655
|
+
|
|
656
|
+
return {props: {preview, data}}
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
export default function IndexPage({preview, data}) {
|
|
660
|
+
if (preview) {
|
|
661
|
+
return (
|
|
662
|
+
<PreviewSuspense fallback={<DocumentsCount data={data} />}>
|
|
663
|
+
<PreviewDocumentsCount />
|
|
664
|
+
</PreviewSuspense>
|
|
665
|
+
)
|
|
666
|
+
}
|
|
667
|
+
return <DocumentsCount data={data} />
|
|
668
|
+
}
|
|
669
|
+
```
|
|
670
|
+
|
|
671
|
+
#### `createCurrentUserHook` is removed
|
|
672
|
+
|
|
673
|
+
If you used this hook to check if the user is cookie authenticated:
|
|
674
|
+
|
|
675
|
+
```jsx
|
|
676
|
+
import {createCurrentUserHook} from 'next-sanity'
|
|
677
|
+
|
|
678
|
+
const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
|
|
679
|
+
const useCurrentUser = createCurrentUserHook({projectId})
|
|
680
|
+
const useCheckAuth = () => {
|
|
681
|
+
const {data, loading} = useCurrentUser()
|
|
682
|
+
return loading ? false : !!data
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
export default function Page() {
|
|
686
|
+
const isAuthenticated = useCheckAuth()
|
|
687
|
+
}
|
|
688
|
+
```
|
|
689
|
+
|
|
690
|
+
Then you can achieve the same functionality using `@sanity/preview-kit` and `suspend-react`:
|
|
691
|
+
|
|
692
|
+
```jsx
|
|
693
|
+
import {suspend} from 'suspend-react'
|
|
694
|
+
import {_checkAuth} from '@sanity/preview-kit'
|
|
695
|
+
|
|
696
|
+
const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
|
|
697
|
+
const useCheckAuth = () =>
|
|
698
|
+
suspend(() => _checkAuth(projectId, null), ['@sanity/preview-kit', 'checkAuth', projectId])
|
|
699
|
+
|
|
700
|
+
export default function Page() {
|
|
701
|
+
const isAuthenticated = useCheckAuth()
|
|
702
|
+
}
|
|
703
|
+
```
|
|
704
|
+
|
|
209
705
|
### From `v0.4`
|
|
210
706
|
|
|
211
707
|
#### `createPortableTextComponent` is removed
|
package/dist/preview.cjs
CHANGED
|
@@ -1,28 +1,19 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
5
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
3
|
Object.defineProperty(exports, '__esModule', {
|
|
7
4
|
value: true
|
|
8
5
|
});
|
|
9
6
|
var previewKit = require('@sanity/preview-kit');
|
|
10
|
-
var react = require('react');
|
|
11
|
-
const lazyEventSourcePolyfill = react.cache(previewKit._lazyEventSourcePolyfill);
|
|
12
|
-
const lazyGroqStore = react.cache(previewKit._lazyGroqStore);
|
|
13
|
-
const checkAuth = react.cache(previewKit._checkAuth);
|
|
14
|
-
const preload = react.cache((store, query, params) => store.query(query, params));
|
|
15
|
-
const definePreview = config => previewKit._definePreview(_objectSpread(_objectSpread({}, config), {}, {
|
|
16
|
-
importEventSourcePolyfill: () => react.use(lazyEventSourcePolyfill()),
|
|
17
|
-
importGroqStore: () => react.use(lazyGroqStore()),
|
|
18
|
-
checkAuth: (projectId, token) => react.use(checkAuth(projectId, token)),
|
|
19
|
-
preload: (store, query, params) => react.use(preload(store, query, params))
|
|
20
|
-
}));
|
|
21
7
|
Object.defineProperty(exports, 'PreviewSuspense', {
|
|
22
8
|
enumerable: true,
|
|
23
9
|
get: function () {
|
|
24
10
|
return previewKit.PreviewSuspense;
|
|
25
11
|
}
|
|
26
12
|
});
|
|
27
|
-
exports
|
|
13
|
+
Object.defineProperty(exports, 'definePreview', {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () {
|
|
16
|
+
return previewKit.definePreview;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
28
19
|
//# sourceMappingURL=preview.cjs.map
|
package/dist/preview.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preview.cjs","sources":[
|
|
1
|
+
{"version":3,"file":"preview.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
|
package/dist/preview.d.ts
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
|
+
import {definePreview} from '@sanity/preview-kit'
|
|
1
2
|
import {Params} from '@sanity/preview-kit'
|
|
2
3
|
import {PreviewConfig} from '@sanity/preview-kit'
|
|
3
4
|
import {PreviewSuspense} from '@sanity/preview-kit'
|
|
4
5
|
import {PreviewSuspenseProps} from '@sanity/preview-kit'
|
|
5
6
|
import {UsePreview} from '@sanity/preview-kit'
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
* @public
|
|
9
|
-
*/
|
|
10
|
-
export declare const definePreview: (config: PreviewConfig) => UsePreview
|
|
8
|
+
export {definePreview}
|
|
11
9
|
|
|
12
10
|
export {Params}
|
|
13
11
|
|
package/dist/preview.js
CHANGED
|
@@ -1,18 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
3
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
-
import { _lazyEventSourcePolyfill, _lazyGroqStore, _checkAuth, _definePreview } from '@sanity/preview-kit';
|
|
5
|
-
export { PreviewSuspense } from '@sanity/preview-kit';
|
|
6
|
-
import { cache, use } from 'react';
|
|
7
|
-
const lazyEventSourcePolyfill = cache(_lazyEventSourcePolyfill);
|
|
8
|
-
const lazyGroqStore = cache(_lazyGroqStore);
|
|
9
|
-
const checkAuth = cache(_checkAuth);
|
|
10
|
-
const preload = cache((store, query, params) => store.query(query, params));
|
|
11
|
-
const definePreview = config => _definePreview(_objectSpread(_objectSpread({}, config), {}, {
|
|
12
|
-
importEventSourcePolyfill: () => use(lazyEventSourcePolyfill()),
|
|
13
|
-
importGroqStore: () => use(lazyGroqStore()),
|
|
14
|
-
checkAuth: (projectId, token) => use(checkAuth(projectId, token)),
|
|
15
|
-
preload: (store, query, params) => use(preload(store, query, params))
|
|
16
|
-
}));
|
|
17
|
-
export { definePreview };
|
|
1
|
+
export { PreviewSuspense, definePreview } from '@sanity/preview-kit';
|
|
18
2
|
//# sourceMappingURL=preview.js.map
|
package/dist/preview.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preview.js","sources":[
|
|
1
|
+
{"version":3,"file":"preview.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|