mirror of
https://github.com/vercel/commerce.git
synced 2025-05-20 00:16:59 +00:00
Implement client fetch
This commit is contained in:
Henrik Larsson
parent
eecef825c5
commit
37e2ef06fc
@ -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,40 +19,28 @@ 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 pageData = await client.fetch(query, queryParams)
|
||||
const { query = '', queryParams, docType } = getQueryFromSlug(slug, locale);
|
||||
|
||||
const data = filterDataToSingleItem(pageData, isEnabled)
|
||||
const pageData = await clientFetch(query, queryParams);
|
||||
|
||||
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 (
|
||||
<>
|
||||
{docType === 'home' && <HomePage data={data} />}
|
||||
@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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!;
|
||||
@ -9,4 +10,6 @@ export const client = createClient({
|
||||
dataset,
|
||||
apiVersion,
|
||||
useCdn: true,
|
||||
});
|
||||
});
|
||||
|
||||
export const clientFetch = cache(client.fetch.bind(client));
|
||||
Loading…
x
Reference in New Issue
Block a user