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

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

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

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