This commit is contained in:
karl 2025-03-26 16:02:22 -04:00
parent e8d5b6e789
commit ad785c9f9a
2 changed files with 195 additions and 190 deletions

View File

@ -48,4 +48,11 @@ export const TAGS = {
export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden'
export const DEFAULT_OPTION = 'Default Title'
export const SHOPIFY_GRAPHQL_API_ENDPOINT = `https://${process.env.SHOPIFY_STORE_DOMAIN}/api/2023-01/graphql.json`
export function getShopifyGraphqlEndpoint() {
const storeDomain = process.env.SHOPIFY_STORE_DOMAIN
if (!storeDomain) {
throw new Error('SHOPIFY_STORE_DOMAIN environment variable is not set')
}
return `https://${storeDomain}/api/2023-01/graphql.json`
}

View File

@ -1,36 +1,36 @@
import {
HIDDEN_PRODUCT_TAG,
SHOPIFY_GRAPHQL_API_ENDPOINT,
TAGS
} from 'lib/constants';
import { isShopifyError } from 'lib/type-guards';
import { ensureStartsWith } from 'lib/utils';
getShopifyGraphqlEndpoint,
TAGS,
} from 'lib/constants'
import { isShopifyError } from 'lib/type-guards'
import { ensureStartsWith } from 'lib/utils'
import {
revalidateTag,
unstable_cacheTag as cacheTag,
unstable_cacheLife as cacheLife
} from 'next/cache';
import { cookies, headers } from 'next/headers';
import { NextRequest, NextResponse } from 'next/server';
unstable_cacheLife as cacheLife,
} from 'next/cache'
import { cookies, headers } from 'next/headers'
import { NextRequest, NextResponse } from 'next/server'
import {
addToCartMutation,
createCartMutation,
editCartItemsMutation,
removeFromCartMutation
} from './mutations/cart';
import { getCartQuery } from './queries/cart';
removeFromCartMutation,
} from './mutations/cart'
import { getCartQuery } from './queries/cart'
import {
getCollectionProductsQuery,
getCollectionQuery,
getCollectionsQuery
} from './queries/collection';
import { getMenuQuery } from './queries/menu';
import { getPageQuery, getPagesQuery } from './queries/page';
getCollectionsQuery,
} from './queries/collection'
import { getMenuQuery } from './queries/menu'
import { getPageQuery, getPagesQuery } from './queries/page'
import {
getProductQuery,
getProductRecommendationsQuery,
getProductsQuery
} from './queries/product';
getProductsQuery,
} from './queries/product'
import {
Cart,
Collection,
@ -55,292 +55,290 @@ import {
ShopifyProductRecommendationsOperation,
ShopifyProductsOperation,
ShopifyRemoveFromCartOperation,
ShopifyUpdateCartOperation
} from './types';
ShopifyUpdateCartOperation,
} from './types'
const domain = process.env.SHOPIFY_STORE_DOMAIN
? ensureStartsWith(process.env.SHOPIFY_STORE_DOMAIN, 'https://')
: '';
const endpoint = `${domain}${SHOPIFY_GRAPHQL_API_ENDPOINT}`;
const key = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN!;
: ''
const key = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN!
type ExtractVariables<T> = T extends { variables: object }
? T['variables']
: never;
: never
export async function shopifyFetch<T>({
headers,
query,
variables
variables,
}: {
headers?: HeadersInit;
query: string;
variables?: ExtractVariables<T>;
headers?: HeadersInit
query: string
variables?: ExtractVariables<T>
}): Promise<{ status: number; body: T } | never> {
try {
const endpoint = getShopifyGraphqlEndpoint()
const result = await fetch(endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Shopify-Storefront-Access-Token': key,
...headers
...headers,
},
body: JSON.stringify({
...(query && { query }),
...(variables && { variables })
})
});
...(variables && { variables }),
}),
})
const body = await result.json();
const body = await result.json()
if (body.errors) {
throw body.errors[0];
throw body.errors[0]
}
return {
status: result.status,
body
};
body,
}
} catch (e) {
if (isShopifyError(e)) {
throw {
cause: e.cause?.toString() || 'unknown',
status: e.status || 500,
message: e.message,
query
};
query,
}
}
throw {
error: e,
query
};
query,
}
}
}
const removeEdgesAndNodes = <T>(array: Connection<T>): T[] => {
return array.edges.map((edge) => edge?.node);
};
return array.edges.map((edge) => edge?.node)
}
const reshapeCart = (cart: ShopifyCart): Cart => {
if (!cart.cost?.totalTaxAmount) {
cart.cost.totalTaxAmount = {
amount: '0.0',
currencyCode: cart.cost.totalAmount.currencyCode
};
currencyCode: cart.cost.totalAmount.currencyCode,
}
}
return {
...cart,
lines: removeEdgesAndNodes(cart.lines)
};
};
lines: removeEdgesAndNodes(cart.lines),
}
}
const reshapeCollection = (
collection: ShopifyCollection
collection: ShopifyCollection,
): Collection | undefined => {
if (!collection) {
return undefined;
return undefined
}
return {
...collection,
path: `/search/${collection.handle}`
};
};
path: `/search/${collection.handle}`,
}
}
const reshapeCollections = (collections: ShopifyCollection[]) => {
const reshapedCollections = [];
const reshapedCollections = []
for (const collection of collections) {
if (collection) {
const reshapedCollection = reshapeCollection(collection);
const reshapedCollection = reshapeCollection(collection)
if (reshapedCollection) {
reshapedCollections.push(reshapedCollection);
reshapedCollections.push(reshapedCollection)
}
}
}
return reshapedCollections;
};
return reshapedCollections
}
const reshapeImages = (images: Connection<Image>, productTitle: string) => {
const flattened = removeEdgesAndNodes(images);
const flattened = removeEdgesAndNodes(images)
return flattened.map((image) => {
const filename = image.url.match(/.*\/(.*)\..*/)?.[1];
const filename = image.url.match(/.*\/(.*)\..*/)?.[1]
return {
...image,
altText: image.altText || `${productTitle} - ${filename}`
};
});
};
altText: image.altText || `${productTitle} - ${filename}`,
}
})
}
const reshapeProduct = (
product: ShopifyProduct,
filterHiddenProducts: boolean = true
filterHiddenProducts: boolean = true,
) => {
if (
!product ||
(filterHiddenProducts && product.tags.includes(HIDDEN_PRODUCT_TAG))
) {
return undefined;
return undefined
}
const { images, variants, ...rest } = product;
const { images, variants, ...rest } = product
return {
...rest,
images: reshapeImages(images, product.title),
variants: removeEdgesAndNodes(variants)
};
};
variants: removeEdgesAndNodes(variants),
}
}
const reshapeProducts = (products: ShopifyProduct[]) => {
const reshapedProducts = [];
const reshapedProducts = []
for (const product of products) {
if (product) {
const reshapedProduct = reshapeProduct(product);
const reshapedProduct = reshapeProduct(product)
if (reshapedProduct) {
reshapedProducts.push(reshapedProduct);
reshapedProducts.push(reshapedProduct)
}
}
}
return reshapedProducts;
};
return reshapedProducts
}
export async function createCart(): Promise<Cart> {
const res = await shopifyFetch<ShopifyCreateCartOperation>({
query: createCartMutation
});
query: createCartMutation,
})
return reshapeCart(res.body.data.cartCreate.cart);
return reshapeCart(res.body.data.cartCreate.cart)
}
export async function addToCart(
lines: { merchandiseId: string; quantity: number }[]
lines: { merchandiseId: string; quantity: number }[],
): Promise<Cart> {
const cartId = (await cookies()).get('cartId')?.value!;
const cartId = (await cookies()).get('cartId')?.value!
const res = await shopifyFetch<ShopifyAddToCartOperation>({
query: addToCartMutation,
variables: {
cartId,
lines
}
});
return reshapeCart(res.body.data.cartLinesAdd.cart);
lines,
},
})
return reshapeCart(res.body.data.cartLinesAdd.cart)
}
export async function removeFromCart(lineIds: string[]): Promise<Cart> {
const cartId = (await cookies()).get('cartId')?.value!;
const cartId = (await cookies()).get('cartId')?.value!
const res = await shopifyFetch<ShopifyRemoveFromCartOperation>({
query: removeFromCartMutation,
variables: {
cartId,
lineIds
}
});
lineIds,
},
})
return reshapeCart(res.body.data.cartLinesRemove.cart);
return reshapeCart(res.body.data.cartLinesRemove.cart)
}
export async function updateCart(
lines: { id: string; merchandiseId: string; quantity: number }[]
lines: { id: string; merchandiseId: string; quantity: number }[],
): Promise<Cart> {
const cartId = (await cookies()).get('cartId')?.value!;
const cartId = (await cookies()).get('cartId')?.value!
const res = await shopifyFetch<ShopifyUpdateCartOperation>({
query: editCartItemsMutation,
variables: {
cartId,
lines
}
});
lines,
},
})
return reshapeCart(res.body.data.cartLinesUpdate.cart);
return reshapeCart(res.body.data.cartLinesUpdate.cart)
}
export async function getCart(): Promise<Cart | undefined> {
const cartId = (await cookies()).get('cartId')?.value;
const cartId = (await cookies()).get('cartId')?.value
if (!cartId) {
return undefined;
return undefined
}
const res = await shopifyFetch<ShopifyCartOperation>({
query: getCartQuery,
variables: { cartId }
});
variables: { cartId },
})
// Old carts becomes `null` when you checkout.
if (!res.body.data.cart) {
return undefined;
return undefined
}
return reshapeCart(res.body.data.cart);
return reshapeCart(res.body.data.cart)
}
export async function getCollection(
handle: string
handle: string,
): Promise<Collection | undefined> {
'use cache';
cacheTag(TAGS.collections);
cacheLife('days');
'use cache'
cacheTag(TAGS.collections)
cacheLife('days')
const res = await shopifyFetch<ShopifyCollectionOperation>({
query: getCollectionQuery,
variables: {
handle
}
});
handle,
},
})
return reshapeCollection(res.body.data.collection);
return reshapeCollection(res.body.data.collection)
}
export async function getCollectionProducts({
collection,
reverse,
sortKey
sortKey,
}: {
collection: string;
reverse?: boolean;
sortKey?: string;
collection: string
reverse?: boolean
sortKey?: string
}): Promise<Product[]> {
'use cache';
cacheTag(TAGS.collections, TAGS.products);
cacheLife('days');
'use cache'
cacheTag(TAGS.collections, TAGS.products)
cacheLife('days')
const res = await shopifyFetch<ShopifyCollectionProductsOperation>({
query: getCollectionProductsQuery,
variables: {
handle: collection,
reverse,
sortKey: sortKey === 'CREATED_AT' ? 'CREATED' : sortKey
}
});
sortKey: sortKey === 'CREATED_AT' ? 'CREATED' : sortKey,
},
})
if (!res.body.data.collection) {
console.log(`No collection found for \`${collection}\``);
return [];
console.log(`No collection found for \`${collection}\``)
return []
}
return reshapeProducts(
removeEdgesAndNodes(res.body.data.collection.products)
);
return reshapeProducts(removeEdgesAndNodes(res.body.data.collection.products))
}
export async function getCollections(): Promise<Collection[]> {
'use cache';
cacheTag(TAGS.collections);
cacheLife('days');
'use cache'
cacheTag(TAGS.collections)
cacheLife('days')
const res = await shopifyFetch<ShopifyCollectionsOperation>({
query: getCollectionsQuery
});
const shopifyCollections = removeEdgesAndNodes(res.body?.data?.collections);
query: getCollectionsQuery,
})
const shopifyCollections = removeEdgesAndNodes(res.body?.data?.collections)
const collections = [
{
handle: '',
@ -348,32 +346,32 @@ export async function getCollections(): Promise<Collection[]> {
description: 'All products',
seo: {
title: 'All',
description: 'All products'
description: 'All products',
},
path: '/search',
updatedAt: new Date().toISOString()
updatedAt: new Date().toISOString(),
},
// Filter out the `hidden` collections.
// Collections that start with `hidden-*` need to be hidden on the search page.
...reshapeCollections(shopifyCollections).filter(
(collection) => !collection.handle.startsWith('hidden')
)
];
(collection) => !collection.handle.startsWith('hidden'),
),
]
return collections;
return collections
}
export async function getMenu(handle: string): Promise<Menu[]> {
'use cache';
cacheTag(TAGS.collections);
cacheLife('days');
'use cache'
cacheTag(TAGS.collections)
cacheLife('days')
const res = await shopifyFetch<ShopifyMenuOperation>({
query: getMenuQuery,
variables: {
handle
}
});
handle,
},
})
return (
res.body?.data?.menu?.items.map((item: { title: string; url: string }) => ({
@ -381,83 +379,83 @@ export async function getMenu(handle: string): Promise<Menu[]> {
path: item.url
.replace(domain, '')
.replace('/collections', '/search')
.replace('/pages', '')
.replace('/pages', ''),
})) || []
);
)
}
export async function getPage(handle: string): Promise<Page> {
const res = await shopifyFetch<ShopifyPageOperation>({
query: getPageQuery,
variables: { handle }
});
variables: { handle },
})
return res.body.data.pageByHandle;
return res.body.data.pageByHandle
}
export async function getPages(): Promise<Page[]> {
const res = await shopifyFetch<ShopifyPagesOperation>({
query: getPagesQuery
});
query: getPagesQuery,
})
return removeEdgesAndNodes(res.body.data.pages);
return removeEdgesAndNodes(res.body.data.pages)
}
export async function getProduct(handle: string): Promise<Product | undefined> {
'use cache';
cacheTag(TAGS.products);
cacheLife('days');
'use cache'
cacheTag(TAGS.products)
cacheLife('days')
const res = await shopifyFetch<ShopifyProductOperation>({
query: getProductQuery,
variables: {
handle
}
});
handle,
},
})
return reshapeProduct(res.body.data.product, false);
return reshapeProduct(res.body.data.product, false)
}
export async function getProductRecommendations(
productId: string
productId: string,
): Promise<Product[]> {
'use cache';
cacheTag(TAGS.products);
cacheLife('days');
'use cache'
cacheTag(TAGS.products)
cacheLife('days')
const res = await shopifyFetch<ShopifyProductRecommendationsOperation>({
query: getProductRecommendationsQuery,
variables: {
productId
}
});
productId,
},
})
return reshapeProducts(res.body.data.productRecommendations);
return reshapeProducts(res.body.data.productRecommendations)
}
export async function getProducts({
query,
reverse,
sortKey
sortKey,
}: {
query?: string;
reverse?: boolean;
sortKey?: string;
query?: string
reverse?: boolean
sortKey?: string
}): Promise<Product[]> {
'use cache';
cacheTag(TAGS.products);
cacheLife('days');
'use cache'
cacheTag(TAGS.products)
cacheLife('days')
const res = await shopifyFetch<ShopifyProductsOperation>({
query: getProductsQuery,
variables: {
query,
reverse,
sortKey
}
});
sortKey,
},
})
return reshapeProducts(removeEdgesAndNodes(res.body.data.products));
return reshapeProducts(removeEdgesAndNodes(res.body.data.products))
}
// This is called from `app/api/revalidate.ts` so providers can control revalidation logic.
@ -467,35 +465,35 @@ export async function revalidate(req: NextRequest): Promise<NextResponse> {
const collectionWebhooks = [
'collections/create',
'collections/delete',
'collections/update'
];
'collections/update',
]
const productWebhooks = [
'products/create',
'products/delete',
'products/update'
];
const topic = (await headers()).get('x-shopify-topic') || 'unknown';
const secret = req.nextUrl.searchParams.get('secret');
const isCollectionUpdate = collectionWebhooks.includes(topic);
const isProductUpdate = productWebhooks.includes(topic);
'products/update',
]
const topic = (await headers()).get('x-shopify-topic') || 'unknown'
const secret = req.nextUrl.searchParams.get('secret')
const isCollectionUpdate = collectionWebhooks.includes(topic)
const isProductUpdate = productWebhooks.includes(topic)
if (!secret || secret !== process.env.SHOPIFY_REVALIDATION_SECRET) {
console.error('Invalid revalidation secret.');
return NextResponse.json({ status: 401 });
console.error('Invalid revalidation secret.')
return NextResponse.json({ status: 401 })
}
if (!isCollectionUpdate && !isProductUpdate) {
// We don't need to revalidate anything for any other topics.
return NextResponse.json({ status: 200 });
return NextResponse.json({ status: 200 })
}
if (isCollectionUpdate) {
revalidateTag(TAGS.collections);
revalidateTag(TAGS.collections)
}
if (isProductUpdate) {
revalidateTag(TAGS.products);
revalidateTag(TAGS.products)
}
return NextResponse.json({ status: 200, revalidated: true, now: Date.now() });
return NextResponse.json({ status: 200, revalidated: true, now: Date.now() })
}