crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-20 00:16:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement client fetch

Browse Source
This commit is contained in:
Henrik Larsson 2023-07-03 14:05:31 +02:00
parent eecef825c5
commit 37e2ef06fc
3 changed files with 76 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
app/[locale]/[[...slug]]/page.tsx
View File

@ -1,9 +1,12 @@
// Next
import type { Metadata } from 'next';
import { draftMode } from 'next/headers';
// Sanity
import PreviewSuspense from 'components/preview-suspense';
import getQueryFromSlug from 'helpers/getQueryFromSlug';
import { docQuery } from 'lib/sanity/queries';
import { client } from 'lib/sanity/sanity.client';
import type { Metadata } from 'next';
import { draftMode } from 'next/headers';
import { clientFetch } from 'lib/sanity/sanity.client';
// Pages.
import CategoryPage from './category-page';
import CategoryPagePreview from './category-page-preview';
import HomePage from './home-page';
@ -16,38 +19,26 @@ import SinglePagePreview from './single-page-preview';
/**
* Render pages depending on type.
*/
export default async function Page({
params,
}: {
params: { slug: string[], locale: string };
}) {
export default async function Page({ params }: { params: { slug: string[]; locale: string } }) {
const { isEnabled } = draftMode();
const { slug, locale } = params;
const { query = '', queryParams, docType } = getQueryFromSlug(slug, locale)
const { query = '', queryParams, docType } = getQueryFromSlug(slug, locale);
const pageData = await client.fetch(query, queryParams)
const pageData = await clientFetch(query, queryParams);
const data = filterDataToSingleItem(pageData, isEnabled)
const data = filterDataToSingleItem(pageData, isEnabled);
if (isEnabled) {
return (
<PreviewSuspense fallback="Loading...">
{docType === 'home' && (
<HomePagePreview query={query} queryParams={queryParams} />
)}
{docType === 'page' && (
<SinglePagePreview query={query} queryParams={queryParams} />
)}
{docType === 'product' && (
<ProductPagePreview query={query} queryParams={queryParams} />
)}
{docType === 'category' && (
<CategoryPagePreview query={query} queryParams={queryParams} />
)}
{docType === 'home' && <HomePagePreview query={query} queryParams={queryParams} />}
{docType === 'page' && <SinglePagePreview query={query} queryParams={queryParams} />}
{docType === 'product' && <ProductPagePreview query={query} queryParams={queryParams} />}
{docType === 'category' && <CategoryPagePreview query={query} queryParams={queryParams} />}
</PreviewSuspense>
)
);
}
return (
@ -57,7 +48,7 @@ export default async function Page({
{docType === 'category' && <CategoryPage data={data} />}
{docType === 'page' && <SinglePage data={data} />}
</>
)
);
}
// Background revalidate once every day.
@ -67,15 +58,12 @@ export const revalidate = 86400;
* Get paths for each page.
*/
export async function generateStaticParams() {
const paths = await client.fetch(docQuery)
const paths = await clientFetch(docQuery);
return paths.map((path: {
slug: string,
locale: string
}) => ({
return paths.map((path: { slug: string; locale: string }) => ({
slug: path.slug.split('/').filter((p) => p),
locale: path.locale
}))
}));
}
/**
@ -83,54 +71,51 @@ export async function generateStaticParams() {
* If we're in "preview mode" and have multiple documents, return the draft
*/
function filterDataToSingleItem(data: any, preview = false) {
if (!Array.isArray(data)) {
return data
return data;
}
if (data.length === 1) {
return data[0]
return data[0];
}
if (preview) {
return data.find((item) => item._id.startsWith(`drafts.`)) || data[0]
return data.find((item) => item._id.startsWith(`drafts.`)) || data[0];
}
return data[0]
return data[0];
}
/**
* Generate metadata for each page.
*/
export async function generateMetadata({ params }: {params: { slug: string[], locale: string }}): Promise<Metadata> {
const { slug, locale } = params
export async function generateMetadata({
params
}: {
params: { slug: string[]; locale: string };
}): Promise<Metadata> {
const { slug, locale } = params;
const { query = '', queryParams } = getQueryFromSlug(slug, locale)
const { query = '', queryParams } = getQueryFromSlug(slug, locale);
const pageData = await client.fetch(query, queryParams)
const pageData = await clientFetch(query, queryParams);
const data = filterDataToSingleItem(pageData, false)
const data = filterDataToSingleItem(pageData, false);
const { seo } = data ?? {};
return {
title: seo?.title ? seo?.title : data?.title,
description: seo?.description
? seo.description
: 'Webb och digitalbyrå från Göteborg',
description: seo?.description ? seo.description : 'Webb och digitalbyrå från Göteborg',
openGraph: {
images: [
{
url: seo?.image?.asset?.url
? seo.image.asset.url
: '/og-image.jpg',
url: seo?.image?.asset?.url ? seo.image.asset.url : '/og-image.jpg',
width: 1200,
height: 630,
alt: seo?.coverImage?.alt
? seo.coverImage.alt
: 'Kodamera AB',
},
],
},
}
alt: seo?.coverImage?.alt ? seo.coverImage.alt : 'Kodamera AB'
}
]
}
};
}

65
components/ui/text/text.tsx
View File

@ -1,19 +1,15 @@
'use client'
'use client';
import { cn } from 'lib/utils'
import React, {
CSSProperties,
FunctionComponent,
JSXElementConstructor,
} from 'react'
import { cn } from 'lib/utils';
import React, { CSSProperties, FunctionComponent, JSXElementConstructor } from 'react';
interface TextProps {
variant?: Variant
className?: string
style?: CSSProperties
children?: React.ReactNode | any
html?: string
onClick?: () => any
variant?: Variant;
className?: string;
style?: CSSProperties;
children?: React.ReactNode | any;
html?: string;
onClick?: () => any;
}
type Variant =
@ -24,7 +20,7 @@ type Variant =
| 'sectionHeading'
| 'label'
| 'paragraph'
| 'listChildHeading'
| 'listChildHeading';
const Text: FunctionComponent<TextProps> = ({
style,
@ -32,10 +28,10 @@ const Text: FunctionComponent<TextProps> = ({
variant = 'body',
children,
html,
onClick,
onClick
}) => {
const componentsMap: {
[P in Variant]: React.ComponentType<any> | string
[P in Variant]: React.ComponentType<any> | string;
} = {
body: 'div',
heading: 'h1',
@ -44,39 +40,38 @@ const Text: FunctionComponent<TextProps> = ({
sectionHeading: 'h2',
listChildHeading: 'h3',
label: 'div',
paragraph: 'p',
}
paragraph: 'p'
};
const Component:
| JSXElementConstructor<any>
| React.ReactElement<any>
| React.ComponentType<any>
| string = componentsMap![variant!]
| string = componentsMap![variant!];
const htmlContentProps = html
? {
dangerouslySetInnerHTML: { __html: html },
dangerouslySetInnerHTML: { __html: html }
}
: {}
: {};
return (
<Component
className={cn(
'',
{
['text-base max-w-prose']: variant === 'body',
['max-w-prose text-4xl font-display font-bold leading-none md:text-5xl md:leading-none lg:leading-none lg:text-6xl']:
['max-w-prose text-base']: variant === 'body',
['max-w-prose font-display text-4xl font-extrabold leading-none md:text-5xl md:leading-none lg:text-6xl lg:leading-none']:
variant === 'heading',
['max-w-prose text-3xl font-display font-bold leading-none md:text-4xl md:leading-none lg:leading-none lg:text-5xl']:
['extrabold max-w-prose font-display text-3xl leading-none md:text-4xl md:leading-none lg:text-5xl lg:leading-none']:
variant === 'pageHeading',
['max-w-prose text-2xl font-display leading-none md:text-3xl md:leading-none lg:leading-none lg:text-4xl']:
variant === 'productHeading',
['max-w-prose text-2xl font-display font-bold leading-none md:text-3xl md:leading-none lg:leading-none lg:text-4xl']:
variant === 'sectionHeading',
['text-sm font-medium leading-tight lg:text-base']:
variant === 'listChildHeading',
['text-sm max-w-prose lg:text-base 2xl:text-lg']: variant === 'label',
['max-w-prose lg:text-lg 2xl:text-xl']: variant === 'paragraph',
['max-w-prose font-display text-2xl leading-none md:text-3xl md:leading-none lg:text-4xl lg:leading-none']:
variant === 'productHeading',
['max-w-prose font-display text-2xl font-extrabold leading-none md:text-3xl md:leading-none lg:text-4xl lg:leading-none']:
variant === 'sectionHeading',
['text-sm font-medium leading-tight lg:text-base']: variant === 'listChildHeading',
['max-w-prose text-sm lg:text-base 2xl:text-lg']: variant === 'label',
['max-w-prose lg:text-lg 2xl:text-xl']: variant === 'paragraph'
},
className
)}
@ -86,7 +81,7 @@ const Text: FunctionComponent<TextProps> = ({
>
{children}
</Component>
)
}
);
};
export default Text
export default Text;

3
lib/sanity/sanity.client.ts
View File

@ -1,4 +1,5 @@
import { createClient } from "next-sanity";
import { cache } from 'react';
export const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!;
export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET!;
@ -10,3 +11,5 @@ export const client = createClient({
apiVersion,
useCdn: true,
});
export const clientFetch = cache(client.fetch.bind(client));