feat: add sanity client query support

Add sanity client to query data in client ISSUES CLOSED: #4595
fremtind · Feb 26, 2025 · a2a44f9 · a2a44f9
1 parent 30bd26e
commit a2a44f9
Show file tree

Hide file tree

Showing 16 changed files with 1,579 additions and 261 deletions.
diff --git a/ny-portal/package.json b/ny-portal/package.json
@@ -12,7 +12,8 @@
         "generate:types": "cross-env NODE_OPTIONS=--no-deprecation payload generate:types",
         "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
         "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
-        "start": "cross-env NODE_OPTIONS=--no-deprecation next start -p 3333"
+        "start": "cross-env NODE_OPTIONS=--no-deprecation next start -p 3333",
+        "typegen": "sanity schema extract --path=src/sanity/extract.json && sanity typegen generate"
     },
     "dependencies": {
         "@aws-sdk/client-sts": "^3.731.1",
@@ -26,6 +27,7 @@
         "@payloadcms/richtext-lexical": "latest",
         "@payloadcms/ui": "latest",
         "@sanity/image-url": "^1.1.0",
+        "@sanity/client": "^6.28.1",
         "@sanity/vision": "^3.76.3",
         "@types/mdx": "^2.0.13",
         "clsx": "^2.1.1",
@@ -55,4 +57,4 @@
     "engines": {
         "node": ">=21.0.0"
     }
-}
+}
diff --git a/ny-portal/sanity-typegen.json b/ny-portal/sanity-typegen.json
@@ -0,0 +1,5 @@
+{
+    "path": "./src/**/*.{ts,tsx,js,jsx}",
+    "schema": "./src/sanity/extract.json",
+    "generates": "./src/sanity/types.ts"
+}
diff --git a/ny-portal/sanity.config.ts b/ny-portal/sanity.config.ts
@@ -1,7 +1,7 @@
 import { visionTool } from "@sanity/vision";
 import { defineConfig } from "sanity";
 import { structureTool } from "sanity/structure";
-import { schemaTypes } from "./sanity/schemas";
+import { schemaTypes } from "@/sanity/schemas";
 
 export default defineConfig({
     name: "default",

diff --git a/ny-portal/src/app/(frontend)/komponenter/[slug]/page.tsx b/ny-portal/src/app/(frontend)/komponenter/[slug]/page.tsx
@@ -1,43 +1,18 @@
-import { getPayload, Where } from "payload";
-import { PropDocumentation } from "@/components/prop-documentation/PropDocumentation";
-import { RichText } from "@/components/rich-text";
-import configPromise from "@/payload.config";
+import { client } from "@/sanity/client";
+import { componentPageBySlugQuery } from "@/sanity/queries/componentPage";
 
 export default async function Page({
     params,
 }: {
     params: Promise<{ slug: string }>;
 }) {
-    const payload = await getPayload({
-        config: configPromise,
-    });
-
     const slug = (await params).slug;
 
-    const query: Where = {
-        slug: {
-            equals: slug,
-        },
-    };
-
-    const data = await payload.find({
-        collection: "component-page",
-        where: query,
-    });
+    const data = await client.fetch(componentPageBySlugQuery, { slug });
 
     return (
         <>
-            <div>Hei jeg er {data.docs?.[0]?.title || "ikke i databasen"}</div>
-
-            {data.docs[0]?.content && (
-                <RichText data={data.docs[0].content}></RichText>
-            )}
-
-            {data.docs?.[0]?.["component-folder"] && (
-                <PropDocumentation
-                    component={data.docs[0]?.["component-folder"]}
-                />
-            )}
+            <div>Hei jeg er {data?.title || "ikke i databasen"}</div>
         </>
     );
 }
diff --git a/ny-portal/src/app/(frontend)/komponenter/page.tsx b/ny-portal/src/app/(frontend)/komponenter/page.tsx
@@ -1,27 +1,20 @@
 import { Flex, Link } from "@fremtind/jokul/components";
 import NextLink from "next/link";
-import { getPayload } from "payload";
-import configPromise from "@/payload.config";
+import { client } from "@/sanity/client";
+import { componentsQuery } from "@/sanity/queries/componentPage";
 
 export default async function Components() {
-    const payload = await getPayload({
-        config: configPromise,
-    });
-
-    const data = await payload.find({
-        collection: "component-page",
-        select: {
-            title: true,
-            slug: true,
-        },
-    });
+    const components = await client.fetch(componentsQuery);
 
     return (
         <Flex as="ul" direction="column" gap={16}>
-            {data.docs.map((page) => (
-                <li key={page.slug}>
-                    <Link as={NextLink} href={`/komponenter/${page.slug}`}>
-                        {page.title}
+            {components.map((component) => (
+                <li key={component.slug?.current}>
+                    <Link
+                        as={NextLink}
+                        href={`/komponenter/${component.slug?.current}`}
+                    >
+                        {component.title}
                     </Link>
                 </li>
             ))}

diff --git a/ny-portal/src/app/my-route/route.ts b/ny-portal/src/app/my-route/route.ts
diff --git a/ny-portal/src/components/Navigation/NavigationMenu.tsx b/ny-portal/src/components/Navigation/NavigationMenu.tsx
@@ -1,24 +1,10 @@
-import { getPayload } from "payload";
 import { NavigationMenuGroup } from "./NavigationMenuGroup";
 import { NavigationMenuList } from "./NavigationMenuList";
-import configPromise from "@/payload.config";
-
-export type MenuItems = {
-    id?: number;
-    title: string;
-    slug: string;
-};
+import { client } from "@/sanity/client";
+import { componentsQuery } from "@/sanity/queries/componentPage";
 
 export const NavigationMenu = async () => {
-    const payload = await getPayload({ config: configPromise });
-
-    const { docs: components } = await payload.find({
-        collection: "component-page",
-        select: {
-            title: true,
-            slug: true,
-        },
-    });
+    const components = await client.fetch(componentsQuery);
 
     return (
         <NavigationMenuList>
@@ -28,7 +14,10 @@ export const NavigationMenu = async () => {
                 items={[
                     {
                         title: "Oversikt",
-                        slug: "",
+                        slug: {
+                            current: "",
+                            _type: "slug",
+                        },
                     },
                     ...components,
                 ]}

diff --git a/ny-portal/src/components/Navigation/NavigationMenuGroup.tsx b/ny-portal/src/components/Navigation/NavigationMenuGroup.tsx
@@ -5,14 +5,14 @@ import clsx from "clsx";
 import { usePathname } from "next/navigation";
 import { FC, useId, useState } from "react";
 import styles from "./navigation.module.scss";
-import { MenuItems } from "./NavigationMenu";
 import { NavigationMenuButton } from "./NavigationMenuButton";
 import { NavigationMenuLink } from "./NavigationMenuLink";
+import { ComponentsQueryResult, Slug } from "@/sanity/types";
 
 type NavigationMenuGroupProps = {
     title: string;
     parentPath: string;
-    items: MenuItems[];
+    items: ComponentsQueryResult;
 };
 
 export const NavigationMenuGroup: FC<NavigationMenuGroupProps> = ({
@@ -23,11 +23,11 @@ export const NavigationMenuGroup: FC<NavigationMenuGroupProps> = ({
     const menuId = `navigation-menu-group-${useId()}`;
     const pathname = usePathname();
 
-    const getItemPath = (slug?: string) =>
+    const getItemPath = (slug: Slug | null) =>
         `/${parentPath}${slug ? `/${slug}` : ""}`;
 
     const [isOpen, setIsOpen] = useState(
-        items.some(({ slug }) => pathname === getItemPath(slug)),
+        items.some((item) => pathname === getItemPath(item.slug)),
     );
 
     const [menuRef] = useAnimatedHeight<HTMLDivElement>(isOpen);
@@ -53,13 +53,14 @@ export const NavigationMenuGroup: FC<NavigationMenuGroupProps> = ({
                 ref={menuRef}
             >
                 <ul>
-                    {items.map(({ slug, title }) => {
+                    {items.map((item) => {
+                        const { slug, title } = item;
                         const isActive = pathname === getItemPath(slug);
 
                         return (
                             <NavigationMenuLink
                                 key={`${slug}-${title}`}
-                                title={title}
+                                title={title ?? "Untitled"}
                                 path={slug}
                                 parentPath={parentPath}
                                 data-has-active-child={isActive}

diff --git a/ny-portal/src/components/Navigation/NavigationMenuLink.tsx b/ny-portal/src/components/Navigation/NavigationMenuLink.tsx
@@ -4,10 +4,11 @@ import { clsx } from "clsx";
 import Link from "next/link";
 import { useCallback, type FC, type HTMLAttributes } from "react";
 import styles from "./navigation-menu-item.module.scss";
+import { Slug } from "@/sanity/types";
 
 type NavigationMenuLinkProps = HTMLAttributes<HTMLAnchorElement> & {
-    title: string;
-    path: string;
+    title: string | null;
+    path: Slug | null;
     parentPath?: string;
 };
 
@@ -19,7 +20,9 @@ export const NavigationMenuLink: FC<NavigationMenuLinkProps> = ({
     onClick,
     ...restProps
 }) => {
-    const href = parentPath ? `/${parentPath}/${path}` : `/${path}`;
+    const href = parentPath
+        ? `/${parentPath}/${path?.current}`
+        : `/${path?.current}`;
 
     const handleClick = useCallback(
         (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {

diff --git a/ny-portal/src/sanity/client.ts b/ny-portal/src/sanity/client.ts
@@ -0,0 +1,6 @@
+import { createClient } from "next-sanity";
+
+export const client = createClient({
+    projectId: process.env.NEXT_PUBLIC_SANITY_STUDIO_PROJECT_ID || "",
+    dataset: process.env.NEXT_PUBLIC_SANITY_STUDIO_DATASET || "test",
+});