Improve sanity.io example #18227

rexxars · 2020-10-25T18:22:38Z

Hi!

This PR introduces a few changes to the Sanity CMS example:

Rearranges the order of the document types in the schema for the Sanity studio (posts first, authors after)
Sets the source for the slug field to be the title field, enabling a Generate button
Uses the Sanity image URL builder for images, enabling automatic selection of best image format supported by the browser, as well as reducing the size of the images to something a little closer to what will be displayed
Uses the new preview subscription hook from the next-sanity module, for faster client-side previews
Allows configuration of the dataset name through environment variable

Because the queries needs to be used in both the preview subscription and in the getStaticProps function, I switched to exposing queries instead of functions for data fetching.

ijjk · 2020-10-25T18:32:24Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
buildDuration	12.2s	12s	-169ms
nodeModulesSize	91.3 MB	91.3 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.439	2.366	-0.07
/ avg req/sec	1025.21	1056.61	+31.4
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.463	1.483	⚠️ +0.02
/error-in-render avg req/sec	1709.06	1686.17	⚠️ -22.89

Client Bundles (main, webpack, commons)

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
677f882d2ed8..574c.js gzip	11.2 kB	11.2 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-3dd37a4..54de.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
677f882d2ed8..dule.js gzip	7.02 kB	7.02 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-082aff9..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	994 B	994 B	✓
Overall change	3 kB	3 kB	✓

Serverless Mode

General

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
buildDuration	13.8s	13.8s	-11ms
nodeModulesSize	91.3 MB	91.3 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
677f882d2ed8..574c.js gzip	11.2 kB	11.2 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-3dd37a4..54de.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
677f882d2ed8..dule.js gzip	7.02 kB	7.02 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-082aff9..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.73 kB	4.73 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.1 MB	1.1 MB	✓
withRouter.js	1.1 MB	1.1 MB	✓
Overall change	5.42 MB	5.42 MB	✓

Commit: eae6afe

lfades

@rexxars Hi there 👋 and thank you for the PR 💯

Overall it looks pretty good, added some suggestions and then it'll be ready to go 🕵️

examples/cms-sanity/README.md

examples/cms-sanity/pages/api/preview.js

examples/cms-sanity/lib/sanity.js

lfades · 2020-12-10T23:57:52Z

@rexxars Any updates on this PR? 👀

rexxars · 2020-12-17T12:32:47Z

@rexxars Any updates on this PR? 👀

Sorry for the lack of updates! I've addressed two of the points and rebased. Left some comments on the individual points.

ijjk · 2020-12-17T12:34:26Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
buildDuration	9.5s	10.1s	⚠️ +586ms
nodeModulesSize	82.4 MB	82.4 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.404	2.4	0
/ avg req/sec	1039.82	1041.48	+1.66
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.286	1.331	⚠️ +0.04
/error-in-render avg req/sec	1944.47	1878.34	⚠️ -66.13

Client Bundles (main, webpack, commons)

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
677f882d2ed8..5e70.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-086d1b7..8537.js gzip	6.56 kB	6.56 kB	✓
webpack-95c2..e870.js gzip	751 B	751 B	✓
Overall change	59 kB	59 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
polyfills-d3..23f6.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_app-0d19cb6..5497.js gzip	1.28 kB	1.28 kB	✓
_error-2cf0e..a0a0.js gzip	3.69 kB	3.69 kB	✓
hooks-42456f..0c06.js gzip	887 B	887 B	✓
index-8081ce..e44f.js gzip	227 B	227 B	✓
link-0ab9f83..fa00.js gzip	1.61 kB	1.61 kB	✓
routerDirect..c3d8.js gzip	303 B	303 B	✓
withRouter-0..a68e.js gzip	302 B	302 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Rendered Page Sizes

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
index.html gzip	613 B	613 B	✓
link.html gzip	619 B	619 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
buildDuration	12s	12.1s	⚠️ +90ms
nodeModulesSize	82.4 MB	82.4 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
677f882d2ed8..5e70.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-086d1b7..8537.js gzip	6.56 kB	6.56 kB	✓
webpack-95c2..e870.js gzip	751 B	751 B	✓
Overall change	59 kB	59 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
polyfills-d3..23f6.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_app-0d19cb6..5497.js gzip	1.28 kB	1.28 kB	✓
_error-2cf0e..a0a0.js gzip	3.69 kB	3.69 kB	✓
hooks-42456f..0c06.js gzip	887 B	887 B	✓
index-8081ce..e44f.js gzip	227 B	227 B	✓
link-0ab9f83..fa00.js gzip	1.61 kB	1.61 kB	✓
routerDirect..c3d8.js gzip	303 B	303 B	✓
withRouter-0..a68e.js gzip	302 B	302 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Serverless bundles

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.16 MB	5.16 MB	✓

Commit: 2490e92

ijjk · 2020-12-17T12:54:17Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
buildDuration	8.7s	8.9s	⚠️ +204ms
nodeModulesSize	82.4 MB	82.4 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.063	2.052	-0.01
/ avg req/sec	1211.87	1218.14	+6.27
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.111	1.149	⚠️ +0.04
/error-in-render avg req/sec	2250.32	2175.15	⚠️ -75.17

Client Bundles (main, webpack, commons)

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
677f882d2ed8..5e70.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-086d1b7..8537.js gzip	6.56 kB	6.56 kB	✓
webpack-95c2..e870.js gzip	751 B	751 B	✓
Overall change	59 kB	59 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
polyfills-d3..23f6.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_app-0d19cb6..5497.js gzip	1.28 kB	1.28 kB	✓
_error-2cf0e..a0a0.js gzip	3.69 kB	3.69 kB	✓
hooks-42456f..0c06.js gzip	887 B	887 B	✓
index-8081ce..e44f.js gzip	227 B	227 B	✓
link-0ab9f83..fa00.js gzip	1.61 kB	1.61 kB	✓
routerDirect..c3d8.js gzip	303 B	303 B	✓
withRouter-0..a68e.js gzip	302 B	302 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Rendered Page Sizes

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
index.html gzip	613 B	613 B	✓
link.html gzip	619 B	619 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
buildDuration	10.4s	10.4s	-38ms
nodeModulesSize	82.4 MB	82.4 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
677f882d2ed8..5e70.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-086d1b7..8537.js gzip	6.56 kB	6.56 kB	✓
webpack-95c2..e870.js gzip	751 B	751 B	✓
Overall change	59 kB	59 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
polyfills-d3..23f6.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_app-0d19cb6..5497.js gzip	1.28 kB	1.28 kB	✓
_error-2cf0e..a0a0.js gzip	3.69 kB	3.69 kB	✓
hooks-42456f..0c06.js gzip	887 B	887 B	✓
index-8081ce..e44f.js gzip	227 B	227 B	✓
link-0ab9f83..fa00.js gzip	1.61 kB	1.61 kB	✓
routerDirect..c3d8.js gzip	303 B	303 B	✓
withRouter-0..a68e.js gzip	302 B	302 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Serverless bundles

	vercel/next.js canary	rexxars/next.js improve-sanity-example	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.16 MB	5.16 MB	✓

Commit: 7e66a50

leerob · 2021-02-07T18:26:53Z

Hey @rexxars, this PR is looking great! I believe you just need to address this comment.

…eadme

rexxars · 2021-02-09T02:58:15Z

Hey @rexxars, this PR is looking great! I believe you just need to address this comment.

Fixed, ready for another review.

leerob · 2021-02-09T02:59:40Z

examples/cms-sanity/components/cover-image.js

    />
+  ) : (
+    <div style={{ paddingTop: '50%', backgroundColor: '#ddd' }} />


Doesn't need to block this PR, but we should use next/image here so we don't need to do paddingTop hacks. Follow up perhaps?

leerob · 2021-02-09T03:01:31Z

examples/cms-sanity/package.json

    "classnames": "2.2.6",
    "date-fns": "2.10.0",
+    "next-sanity": "0.1.5",
    "next": "latest",
    "react": "^16.13.0",


Follow up could also update these libraries 😄

leerob · 2021-02-09T03:01:42Z

examples/cms-sanity/lib/sanity.js

+import {
+  createImageUrlBuilder,
+  createPreviewSubscriptionHook,
+} from 'next-sanity'


Awesome! 🚀

leerob · 2021-02-09T03:02:54Z

examples/cms-sanity/pages/index.js

@@ -36,7 +37,7 @@ export default function Index({ allPosts, preview }) {
 }

 export async function getStaticProps({ preview = false }) {
-  const allPosts = await getAllPostsForHome(preview)
+  const allPosts = overlayDrafts(await getClient(preview).fetch(indexQuery))


Maybe it's just the naming of this (overlayDrafts) but I'm pretty confused as to what this does.

jneterer · 2021-02-09T03:50:22Z

Can't wait for this PR to be merged! 😃 I didn't know next-sanity existed until after using the existing example here to do my company website. So far the documentation from here has been super helpful, and I'm sure the changes from this PR will provide great in-depth examples too!

leerob

Overall, most of my feedback is pretty minor and could be handled in a follow-up PR if necessary. Thank you so much for updating this! Love the next-sanity package 🌟

rexxars requested review from chibicode, ijjk, lfades, Timer and timneutkens as code owners October 25, 2020 18:22

ijjk added the examples Issue was opened via the examples template. label Oct 25, 2020

lfades requested changes Nov 12, 2020

View reviewed changes

examples/cms-sanity/README.md Show resolved Hide resolved

examples/cms-sanity/pages/api/preview.js Outdated Show resolved Hide resolved

examples/cms-sanity/lib/sanity.js Outdated Show resolved Hide resolved

vercel bot temporarily deployed to Preview December 17, 2020 12:25 Inactive

vercel bot temporarily deployed to Preview December 17, 2020 12:46 Inactive

rexxars requested a review from lfades December 17, 2020 14:52

rexxars added 10 commits February 8, 2021 18:18

[cms-sanity] Use natural order of schema types, set source for slug

df7bb56

[cms-sanity] Use image url builder where possible

30aec5a

[cms-sanity] Use preview subscription hook

ac23f45

[cms-sanity] Allow environment configurable dataset

5bc47db

[cms-sanity] Remove unused @sanity/client dependency

3a15e3f

[cms-sanity] Include explanation of dataset environment variable in r…

1f4f3fe

…eadme

[cms-sanity] Use slug from post instead of query params

41ed492

[cms-sanity] Fix hook being called conditionally

c03ad14

[cms-sanity] Move server-only utilities into separate file

21c99b4

[cms-sanity] Gracefully handle missing data on posts route

e9a2c37

leerob reviewed Feb 9, 2021

View reviewed changes

leerob approved these changes Feb 9, 2021

View reviewed changes

vercel locked as resolved and limited conversation to collaborators Jan 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve sanity.io example #18227

Improve sanity.io example #18227

rexxars commented Oct 25, 2020

ijjk commented Oct 25, 2020

lfades left a comment

lfades commented Dec 10, 2020

rexxars commented Dec 17, 2020

ijjk commented Dec 17, 2020

ijjk commented Dec 17, 2020

leerob commented Feb 7, 2021

rexxars commented Feb 9, 2021

leerob Feb 9, 2021

leerob Feb 9, 2021

leerob Feb 9, 2021

leerob Feb 9, 2021

jneterer commented Feb 9, 2021

leerob left a comment

Improve sanity.io example #18227

Improve sanity.io example #18227

Conversation

rexxars commented Oct 25, 2020

ijjk commented Oct 25, 2020

Stats from current PR

lfades left a comment

Choose a reason for hiding this comment

lfades commented Dec 10, 2020

rexxars commented Dec 17, 2020

ijjk commented Dec 17, 2020

Stats from current PR

ijjk commented Dec 17, 2020

Stats from current PR

leerob commented Feb 7, 2021

rexxars commented Feb 9, 2021

leerob Feb 9, 2021

Choose a reason for hiding this comment

leerob Feb 9, 2021

Choose a reason for hiding this comment

leerob Feb 9, 2021

Choose a reason for hiding this comment

leerob Feb 9, 2021

Choose a reason for hiding this comment

jneterer commented Feb 9, 2021

leerob left a comment

Choose a reason for hiding this comment