Parameterize all queries with channel (#1045)

Fixes #1028

package.json

@@ -85,4 +85,4 @@
 		"pnpm": ">=8.9.0",
 		"node": ">=18"
 	}
-}
+}

src/app/(main)/categories/[slug]/page.tsx

@@ -3,13 +3,14 @@ import { type ResolvingMetadata, type Metadata } from "next";
 import { ProductListByCategoryDocument } from "@/gql/graphql";
 import { executeGraphQL } from "@/lib/graphql";
 import { ProductList } from "@/ui/components/ProductList";
+import { DEFAULT_CHANNEL } from "@/checkout/lib/regions";
 
 export const generateMetadata = async (
 	{ params }: { params: { slug: string } },
 	parent: ResolvingMetadata,
 ): Promise<Metadata> => {
 	const { category } = await executeGraphQL(ProductListByCategoryDocument, {
-		variables: { slug: params.slug },
+		variables: { slug: params.slug, channel: DEFAULT_CHANNEL },
 		revalidate: 60,
 	});
 
@@ -21,7 +22,7 @@ export const generateMetadata = async (
 
 export default async function Page({ params }: { params: { slug: string } }) {
 	const { category } = await executeGraphQL(ProductListByCategoryDocument, {
-		variables: { slug: params.slug },
+		variables: { slug: params.slug, channel: DEFAULT_CHANNEL },
 		revalidate: 60,
 	});
 

src/app/(main)/collections/[slug]/page.tsx

@@ -3,13 +3,14 @@ import { type ResolvingMetadata, type Metadata } from "next";
 import { ProductListByCollectionDocument } from "@/gql/graphql";
 import { executeGraphQL } from "@/lib/graphql";
 import { ProductList } from "@/ui/components/ProductList";
+import { DEFAULT_CHANNEL } from "@/checkout/lib/regions";
 
 export const generateMetadata = async (
 	{ params }: { params: { slug: string } },
 	parent: ResolvingMetadata,
 ): Promise<Metadata> => {
 	const { collection } = await executeGraphQL(ProductListByCollectionDocument, {
-		variables: { slug: params.slug },
+		variables: { slug: params.slug, channel: DEFAULT_CHANNEL },
 		revalidate: 60,
 	});
 
@@ -22,7 +23,7 @@ export const generateMetadata = async (
 
 export default async function Page({ params }: { params: { slug: string } }) {
 	const { collection } = await executeGraphQL(ProductListByCollectionDocument, {
-		variables: { slug: params.slug },
+		variables: { slug: params.slug, channel: DEFAULT_CHANNEL },
 		revalidate: 60,
 	});
 

src/app/(main)/page.tsx

@@ -1,3 +1,4 @@
+import { DEFAULT_CHANNEL } from "@/checkout/lib/regions";
 import { ProductListByCollectionDocument } from "@/gql/graphql";
 import { executeGraphQL } from "@/lib/graphql";
 import { ProductList } from "@/ui/components/ProductList";
@@ -12,6 +13,7 @@ export default async function Page() {
 	const data = await executeGraphQL(ProductListByCollectionDocument, {
 		variables: {
 			slug: "featured-products",
+			channel: DEFAULT_CHANNEL,
 		},
 		revalidate: 60,
 	});

src/app/(main)/products/[slug]/page.tsx

@@ -14,6 +14,7 @@ import { formatMoney, formatMoneyRange } from "@/lib/utils";
 import { CheckoutAddLineDocument, ProductDetailsDocument, ProductListDocument } from "@/gql/graphql";
 import * as Checkout from "@/lib/checkout";
 import { AvailabilityMessage } from "@/ui/components/AvailabilityMessage";
+import { DEFAULT_CHANNEL } from "@/checkout/lib/regions";
 
 const shouldUseHttps =
 	process.env.NEXT_PUBLIC_STOREFRONT_URL?.startsWith("https") || !!process.env.NEXT_PUBLIC_VERCEL_URL;
@@ -31,6 +32,7 @@ export async function generateMetadata(
 	const { product } = await executeGraphQL(ProductDetailsDocument, {
 		variables: {
 			slug: decodeURIComponent(params.slug),
+			channel: DEFAULT_CHANNEL,
 		},
 		revalidate: 60,
 	});
@@ -70,7 +72,7 @@ export async function generateMetadata(
 export async function generateStaticParams() {
 	const { products } = await executeGraphQL(ProductListDocument, {
 		revalidate: 60,
-		variables: { first: 20 },
+		variables: { first: 20, channel: DEFAULT_CHANNEL },
 		withAuth: false,
 	});
 
@@ -86,6 +88,7 @@ export default async function Page(props: { params: { slug: string }; searchPara
 	const { product } = await executeGraphQL(ProductDetailsDocument, {
 		variables: {
 			slug: decodeURIComponent(params.slug),
+			channel: DEFAULT_CHANNEL,
 		},
 		revalidate: 60,
 	});

src/app/(main)/products/page.tsx

@@ -3,6 +3,7 @@ import { ProductListPaginatedDocument } from "@/gql/graphql";
 import { executeGraphQL } from "@/lib/graphql";
 import { Pagination } from "@/ui/components/Pagination";
 import { ProductList } from "@/ui/components/ProductList";
+import { DEFAULT_CHANNEL } from "@/checkout/lib/regions";
 import { ProductsPerPage } from "@/app/config";
 
 export const metadata = {
@@ -23,6 +24,7 @@ export default async function Page({ searchParams }: Props) {
 		variables: {
 			first: ProductsPerPage,
 			after: cursor,
+			channel: DEFAULT_CHANNEL,
 		},
 		revalidate: 60,
 	});

src/app/(main)/search/page.tsx

@@ -3,6 +3,7 @@ import { OrderDirection, ProductOrderField, SearchProductsDocument } from "@/gql
 import { executeGraphQL } from "@/lib/graphql";
 import { Pagination } from "@/ui/components/Pagination";
 import { ProductList } from "@/ui/components/ProductList";
+import { DEFAULT_CHANNEL } from "@/checkout/lib/regions";
 import { ProductsPerPage } from "@/app/config";
 
 export const metadata = {
@@ -37,6 +38,7 @@ export default async function Page({ searchParams }: Props) {
 			after: cursor,
 			sortBy: ProductOrderField.Rating,
 			sortDirection: OrderDirection.Asc,
+			channel: DEFAULT_CHANNEL,
 		},
 		revalidate: 60,
 	});

src/graphql/CheckoutCreate.graphql

@@ -1,5 +1,5 @@
-mutation CheckoutCreate {
-	checkoutCreate(input: { channel: "default-channel", lines: [] }) {
+mutation CheckoutCreate($channel: String!) {
+	checkoutCreate(input: { channel: $channel, lines: [] }) {
 		checkout {
 			id
 			email

src/graphql/MenuGetBySlug.graphql

@@ -20,8 +20,8 @@ fragment MenuItem on MenuItem {
 	url
 }
 
-query MenuGetBySlug($slug: String!) {
-	menu(slug: $slug, channel: "default-channel") {
+query MenuGetBySlug($slug: String!, $channel: String!) {
+	menu(slug: $slug, channel: $channel) {
 		items {
 			...MenuItem
 			children {

src/graphql/ProductDetails.graphql

@@ -1,5 +1,5 @@
-query ProductDetails($slug: String!) {
-	product(slug: $slug, channel: "default-channel") {
+query ProductDetails($slug: String!, $channel: String!) {
+	product(slug: $slug, channel: $channel) {
 		id
 		name
 		slug

src/graphql/ProductList.graphql

@@ -1,5 +1,5 @@
-query ProductList($first: Int = 9) {
-	products(first: $first, channel: "default-channel") {
+query ProductList($first: Int = 9, $channel: String!) {
+	products(first: $first, channel: $channel) {
 		edges {
 			node {
 				...ProductListItem

src/graphql/ProductListByCategory.graphql

@@ -1,10 +1,10 @@
-query ProductListByCategory($slug: String!) {
+query ProductListByCategory($slug: String!, $channel: String!) {
 	category(slug: $slug) {
 		name
 		description
 		seoDescription
 		seoTitle
-		products(first: 100, channel: "default-channel") {
+		products(first: 100, channel: $channel) {
 			edges {
 				node {
 					...ProductListItem

src/graphql/ProductListByCollection.graphql

@@ -1,5 +1,5 @@
-query ProductListByCollection($slug: String!) {
-	collection(slug: $slug, channel: "default-channel") {
+query ProductListByCollection($slug: String!, $channel: String!) {
+	collection(slug: $slug, channel: $channel) {
 		name
 		description
 		seoDescription

src/graphql/ProductListPaginated.graphql

@@ -1,5 +1,5 @@
-query ProductListPaginated($first: Int!, $after: String) {
-	products(first: $first, channel: "default-channel", after: $after) {
+query ProductListPaginated($first: Int!, $after: String, $channel: String!) {
+	products(first: $first, after: $after, channel: $channel) {
 		totalCount
 		edges {
 			node {

src/graphql/SearchProducts.graphql

@@ -4,11 +4,12 @@ query SearchProducts(
 	$sortDirection: OrderDirection!
 	$first: Int!
 	$after: String
+	$channel: String!
 ) {
 	products(
 		first: $first
 		after: $after
-		channel: "default-channel"
+		channel: $channel
 		sortBy: { field: $sortBy, direction: $sortDirection }
 		filter: { search: $search }
 	) {

src/lib/checkout.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_CHANNEL } from "@/checkout/lib/regions";
 import { CheckoutCreateDocument, CheckoutFindDocument } from "@/gql/graphql";
 import { executeGraphQL } from "@/lib/graphql";
 
@@ -26,4 +27,5 @@ export async function findOrCreate(checkoutId?: string) {
 	return checkout || (await create()).checkoutCreate?.checkout;
 }
 
-export const create = () => executeGraphQL(CheckoutCreateDocument, { cache: "no-cache" });
+export const create = () =>
+	executeGraphQL(CheckoutCreateDocument, { cache: "no-cache", variables: { channel: DEFAULT_CHANNEL } });

src/ui/components/Footer.tsx

@@ -1,10 +1,11 @@
 import Link from "next/link";
 import { MenuGetBySlugDocument } from "@/gql/graphql";
 import { executeGraphQL } from "@/lib/graphql";
+import { DEFAULT_CHANNEL } from "@/checkout/lib/regions";
 
 export async function Footer() {
 	const footerLinks = await executeGraphQL(MenuGetBySlugDocument, {
-		variables: { slug: "footer" },
+		variables: { slug: "footer", channel: DEFAULT_CHANNEL },
 		revalidate: 60 * 60 * 24,
 	});
 	const currentYear = new Date().getFullYear();

src/ui/components/nav/components/NavLinks.tsx

@@ -2,10 +2,11 @@ import Link from "next/link";
 import { NavLink } from "./NavLink";
 import { executeGraphQL } from "@/lib/graphql";
 import { MenuGetBySlugDocument } from "@/gql/graphql";
+import { DEFAULT_CHANNEL } from "@/checkout/lib/regions";
 
 export const NavLinks = async () => {
 	const navLinks = await executeGraphQL(MenuGetBySlugDocument, {
-		variables: { slug: "navbar" },
+		variables: { slug: "navbar", channel: DEFAULT_CHANNEL },
 		revalidate: 60 * 60 * 24,
 	});
 

src/ui/components/nav/components/UserMenu/UserMenu.tsx

@@ -49,7 +49,6 @@ export function UserMenu({ user }: Props) {
 					<div className="flex flex-col px-1 py-1">
 						<Menu.Item>
 							{({ active }) => (
-
 								<form action={logout}>
 									<button
 										type="submit"
@@ -66,6 +65,6 @@ export function UserMenu({ user }: Props) {
 					</div>
 				</Menu.Items>
 			</Transition>
-		</Menu >
+		</Menu>
 	);
 }