From 74f01e00ee2372e652d8cdc60deb3b6b69b433af Mon Sep 17 00:00:00 2001 From: Cody Olsen <81981+stipsan@users.noreply.github.com> Date: Mon, 26 Aug 2024 05:24:01 +0200 Subject: [PATCH] examples: Reduce TypeGen boilerplate in Sanity Example (#69134) --- examples/cms-sanity/app/(blog)/page.tsx | 6 ++--- .../app/(blog)/posts/[slug]/page.tsx | 2 +- examples/cms-sanity/package.json | 17 +++++++------- examples/cms-sanity/sanity-typegen.json | 1 - examples/cms-sanity/sanity.types.ts | 23 +++++++++---------- examples/cms-sanity/sanity/lib/queries.ts | 2 +- 6 files changed, 24 insertions(+), 27 deletions(-) delete mode 100644 examples/cms-sanity/sanity-typegen.json diff --git a/examples/cms-sanity/app/(blog)/page.tsx b/examples/cms-sanity/app/(blog)/page.tsx index b3ca1baf1581a..58b2a538169a6 100644 --- a/examples/cms-sanity/app/(blog)/page.tsx +++ b/examples/cms-sanity/app/(blog)/page.tsx @@ -8,7 +8,7 @@ import MoreStories from "./more-stories"; import Onboarding from "./onboarding"; import PortableText from "./portable-text"; -import type { HeroQueryResult, SettingsQueryResult } from "@/sanity.types"; +import type { HeroQueryResult } from "@/sanity.types"; import * as demo from "@/sanity/lib/demo"; import { sanityFetch } from "@/sanity/lib/fetch"; import { heroQuery, settingsQuery } from "@/sanity/lib/queries"; @@ -75,10 +75,10 @@ function HeroPost({ export default async function Page() { const [settings, heroPost] = await Promise.all([ - sanityFetch({ + sanityFetch({ query: settingsQuery, }), - sanityFetch({ query: heroQuery }), + sanityFetch({ query: heroQuery }), ]); return ( diff --git a/examples/cms-sanity/app/(blog)/posts/[slug]/page.tsx b/examples/cms-sanity/app/(blog)/posts/[slug]/page.tsx index 397fb23e78dc0..c8a99e39e3dc6 100644 --- a/examples/cms-sanity/app/(blog)/posts/[slug]/page.tsx +++ b/examples/cms-sanity/app/(blog)/posts/[slug]/page.tsx @@ -1,4 +1,4 @@ -import { defineQuery } from "groq"; +import { defineQuery } from "next-sanity"; import type { Metadata, ResolvingMetadata } from "next"; import { type PortableTextBlock } from "next-sanity"; import Link from "next/link"; diff --git a/examples/cms-sanity/package.json b/examples/cms-sanity/package.json index 15e03ccf69628..6c0be210bc48a 100644 --- a/examples/cms-sanity/package.json +++ b/examples/cms-sanity/package.json @@ -13,29 +13,28 @@ "typegen": "sanity schema extract && sanity typegen generate" }, "dependencies": { - "@sanity/assist": "^3.0.5", + "@sanity/assist": "^3.0.6", "@sanity/icons": "^3.3.1", "@sanity/image-url": "^1.0.2", - "@sanity/preview-url-secret": "^1.6.19", - "@sanity/vision": "^3.53.0", - "@tailwindcss/typography": "^0.5.13", + "@sanity/preview-url-secret": "^1.6.20", + "@sanity/vision": "^3.55.0", + "@tailwindcss/typography": "^0.5.14", "@types/node": "^20.14.13", - "@types/react": "^18.3.3", + "@types/react": "^18.3.4", "@types/react-dom": "^18.3.0", "@vercel/speed-insights": "^1.0.12", "autoprefixer": "^10.4.20", "date-fns": "^3.6.0", - "groq": "^3.53.0", "next": "^14.2.5", - "next-sanity": "^9.4.3", + "next-sanity": "^9.4.7", "postcss": "^8.4.41", "react": "^18.3.1", "react-dom": "^18.3.1", - "sanity": "^3.53.0", + "sanity": "^3.55.0", "sanity-plugin-asset-source-unsplash": "^3.0.1", "server-only": "^0.0.1", "styled-components": "^6.1.12", - "tailwindcss": "^3.4.7", + "tailwindcss": "^3.4.10", "typescript": "5.5.4" }, "devDependencies": { diff --git a/examples/cms-sanity/sanity-typegen.json b/examples/cms-sanity/sanity-typegen.json deleted file mode 100644 index f178d69539f71..0000000000000 --- a/examples/cms-sanity/sanity-typegen.json +++ /dev/null @@ -1 +0,0 @@ -{ "overloadClientMethods": true } diff --git a/examples/cms-sanity/sanity.types.ts b/examples/cms-sanity/sanity.types.ts index c27f9d02eb9ac..37df1b51da46c 100644 --- a/examples/cms-sanity/sanity.types.ts +++ b/examples/cms-sanity/sanity.types.ts @@ -482,7 +482,7 @@ export type SettingsQueryResult = { }; } | null; // Variable: heroQuery -// Query: *[_type == "post" && defined(slug.current)] | order(date desc, _updatedAt desc) [0] { content, _id, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _updatedAt), "author": author->{"name": coalesce(name, "Anonymous"), picture}, } +// Query: *[_type == "post" && defined(slug.current)] | order(date desc, _updatedAt desc) [0] { content, _id, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _updatedAt), "author": author->{"name": coalesce(name, "Anonymous"), picture}, } export type HeroQueryResult = { content: Array<{ children?: Array<{ @@ -537,7 +537,7 @@ export type HeroQueryResult = { } | null; } | null; // Variable: moreStoriesQuery -// Query: *[_type == "post" && _id != $skip && defined(slug.current)] | order(date desc, _updatedAt desc) [0...$limit] { _id, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _updatedAt), "author": author->{"name": coalesce(name, "Anonymous"), picture}, } +// Query: *[_type == "post" && _id != $skip && defined(slug.current)] | order(date desc, _updatedAt desc) [0...$limit] { _id, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _updatedAt), "author": author->{"name": coalesce(name, "Anonymous"), picture}, } export type MoreStoriesQueryResult = Array<{ _id: string; status: "draft" | "published"; @@ -574,7 +574,7 @@ export type MoreStoriesQueryResult = Array<{ } | null; }>; // Variable: postQuery -// Query: *[_type == "post" && slug.current == $slug] [0] { content, _id, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _updatedAt), "author": author->{"name": coalesce(name, "Anonymous"), picture}, } +// Query: *[_type == "post" && slug.current == $slug] [0] { content, _id, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _updatedAt), "author": author->{"name": coalesce(name, "Anonymous"), picture}, } export type PostQueryResult = { content: Array<{ children?: Array<{ @@ -628,23 +628,22 @@ export type PostQueryResult = { } | null; } | null; } | null; -import "@sanity/client"; -declare module "@sanity/client" { - interface SanityQueries { - '*[_type == "settings"][0]': SettingsQueryResult; - '\n *[_type == "post" && defined(slug.current)] | order(date desc, _updatedAt desc) [0] {\n content,\n \n _id,\n "status": select(_originalId in path("drafts.**") => "draft", "published"),\n "title": coalesce(title, "Untitled"),\n "slug": slug.current,\n excerpt,\n coverImage,\n "date": coalesce(date, _updatedAt),\n "author": author->{"name": coalesce(name, "Anonymous"), picture},\n\n }\n': HeroQueryResult; - '\n *[_type == "post" && _id != $skip && defined(slug.current)] | order(date desc, _updatedAt desc) [0...$limit] {\n \n _id,\n "status": select(_originalId in path("drafts.**") => "draft", "published"),\n "title": coalesce(title, "Untitled"),\n "slug": slug.current,\n excerpt,\n coverImage,\n "date": coalesce(date, _updatedAt),\n "author": author->{"name": coalesce(name, "Anonymous"), picture},\n\n }\n': MoreStoriesQueryResult; - '\n *[_type == "post" && slug.current == $slug] [0] {\n content,\n \n _id,\n "status": select(_originalId in path("drafts.**") => "draft", "published"),\n "title": coalesce(title, "Untitled"),\n "slug": slug.current,\n excerpt,\n coverImage,\n "date": coalesce(date, _updatedAt),\n "author": author->{"name": coalesce(name, "Anonymous"), picture},\n\n }\n': PostQueryResult; - } -} // Source: ./app/(blog)/posts/[slug]/page.tsx + +// Source: ./app/(blog)/posts/[slug]/page.tsx // Variable: postSlugs // Query: *[_type == "post" && defined(slug.current)]{"slug": slug.current} export type PostSlugsResult = Array<{ slug: string | null; }>; + +// Query TypeMap import "@sanity/client"; declare module "@sanity/client" { interface SanityQueries { + '*[_type == "settings"][0]': SettingsQueryResult; + '\n *[_type == "post" && defined(slug.current)] | order(date desc, _updatedAt desc) [0] {\n content,\n \n _id,\n "status": select(_originalId in path("drafts.**") => "draft", "published"),\n "title": coalesce(title, "Untitled"),\n "slug": slug.current,\n excerpt,\n coverImage,\n "date": coalesce(date, _updatedAt),\n "author": author->{"name": coalesce(name, "Anonymous"), picture},\n\n }\n': HeroQueryResult; + '\n *[_type == "post" && _id != $skip && defined(slug.current)] | order(date desc, _updatedAt desc) [0...$limit] {\n \n _id,\n "status": select(_originalId in path("drafts.**") => "draft", "published"),\n "title": coalesce(title, "Untitled"),\n "slug": slug.current,\n excerpt,\n coverImage,\n "date": coalesce(date, _updatedAt),\n "author": author->{"name": coalesce(name, "Anonymous"), picture},\n\n }\n': MoreStoriesQueryResult; + '\n *[_type == "post" && slug.current == $slug] [0] {\n content,\n \n _id,\n "status": select(_originalId in path("drafts.**") => "draft", "published"),\n "title": coalesce(title, "Untitled"),\n "slug": slug.current,\n excerpt,\n coverImage,\n "date": coalesce(date, _updatedAt),\n "author": author->{"name": coalesce(name, "Anonymous"), picture},\n\n }\n': PostQueryResult; '*[_type == "post" && defined(slug.current)]{"slug": slug.current}': PostSlugsResult; } } diff --git a/examples/cms-sanity/sanity/lib/queries.ts b/examples/cms-sanity/sanity/lib/queries.ts index 47e3f7db6f92b..12d45e4cf882a 100644 --- a/examples/cms-sanity/sanity/lib/queries.ts +++ b/examples/cms-sanity/sanity/lib/queries.ts @@ -1,4 +1,4 @@ -import { defineQuery } from "groq"; +import { defineQuery } from "next-sanity"; export const settingsQuery = defineQuery(`*[_type == "settings"][0]`);