diff --git a/.vscode/settings.example.json b/.vscode/settings.example.json
index 867356d2d..5af3f81ca 100644
--- a/.vscode/settings.example.json
+++ b/.vscode/settings.example.json
@@ -1,5 +1,6 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
   "eslint.workingDirectories": [
     { "pattern": "apps/*/" },
     { "pattern": "packages/*/" }
diff --git a/apps/core/app/(default)/product/[slug]/_components/breadcrumbs.tsx b/apps/core/app/(default)/product/[slug]/_components/breadcrumbs.tsx
index 79a0f5660..d18af5b74 100644
--- a/apps/core/app/(default)/product/[slug]/_components/breadcrumbs.tsx
+++ b/apps/core/app/(default)/product/[slug]/_components/breadcrumbs.tsx
@@ -1,23 +1,44 @@
-import { getProduct } from '~/client/queries/get-product';
+import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
+
 import { Link } from '~/components/link';
 import { cn } from '~/lib/utils';
+import { FragmentOf, graphql, readFragment } from '~/tada/graphql';
+
+export const BreadcrumbsFragment = graphql(`
+  fragment BreadcrumbsFragment on CategoryConnection {
+    edges {
+      node {
+        breadcrumbs(depth: 5) {
+          edges {
+            node {
+              name
+              path
+            }
+          }
+        }
+      }
+    }
+  }
+`);
 
 interface Props {
-  productId: number;
+  data: FragmentOf<typeof BreadcrumbsFragment>;
 }
 
-export const BreadCrumbs = async ({ productId }: Props) => {
-  const product = await getProduct(productId);
-  const category = product?.categories?.[0];
+export const BreadCrumbs = ({ data }: Props) => {
+  const fragmentData = readFragment(BreadcrumbsFragment, data);
+  const [category] = removeEdgesAndNodes(fragmentData);
 
   if (!category) {
     return null;
   }
 
+  const breadcrumbs = removeEdgesAndNodes(category.breadcrumbs);
+
   return (
     <nav>
       <ul className="m-0 flex flex-wrap items-center p-0 md:container md:mx-auto ">
-        {category.breadcrumbs.map((breadcrumb, i, arr) => {
+        {breadcrumbs.map((breadcrumb, i, arr) => {
           const isLast = arr.length - 1 === i;
 
           return (
diff --git a/apps/core/app/(default)/product/[slug]/_components/product-details/fragment.ts b/apps/core/app/(default)/product/[slug]/_components/product-details/fragment.ts
new file mode 100644
index 000000000..6686c28be
--- /dev/null
+++ b/apps/core/app/(default)/product/[slug]/_components/product-details/fragment.ts
@@ -0,0 +1,66 @@
+import { ProductFormFragment } from '~/components/product-form/fragment';
+import { graphql } from '~/tada/graphql';
+
+import { ProductSchemaFragment } from '../product-schema';
+import { ReviewSummaryFragment } from '../review-summary';
+
+export const ProductDetailsFragment = graphql(
+  `
+    fragment ProductDetailsFragment on Product {
+      entityId
+      name
+      sku
+      upc
+      minPurchaseQuantity
+      maxPurchaseQuantity
+      condition
+      weight {
+        value
+        unit
+      }
+      availabilityV2 {
+        description
+      }
+      brand {
+        name
+      }
+      prices {
+        priceRange {
+          min {
+            value
+          }
+          max {
+            value
+          }
+        }
+        retailPrice {
+          value
+        }
+        salePrice {
+          value
+        }
+        basePrice {
+          value
+        }
+        price {
+          value
+        }
+      }
+      customFields {
+        edges {
+          node {
+            entityId
+            name
+            value
+          }
+        }
+      }
+      reviewSummary {
+        ...ReviewSummaryFragment
+      }
+      ...ProductSchemaFragment
+      ...ProductFormFragment
+    }
+  `,
+  [ReviewSummaryFragment, ProductSchemaFragment, ProductFormFragment],
+);
diff --git a/apps/core/app/(default)/product/[slug]/_components/product-details/index.tsx b/apps/core/app/(default)/product/[slug]/_components/product-details/index.tsx
new file mode 100644
index 000000000..55f211027
--- /dev/null
+++ b/apps/core/app/(default)/product/[slug]/_components/product-details/index.tsx
@@ -0,0 +1,139 @@
+import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
+
+import { ProductForm } from '~/components/product-form';
+import { FragmentOf, readFragment } from '~/tada/graphql';
+
+import { ProductSchema } from '../product-schema';
+import { ReviewSummary } from '../review-summary';
+
+import { ProductDetailsFragment } from './fragment';
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+});
+
+interface Props {
+  data: FragmentOf<typeof ProductDetailsFragment>;
+}
+
+export const ProductDetails = ({ data }: Props) => {
+  const product = readFragment(ProductDetailsFragment, data);
+  const customFields = removeEdgesAndNodes(product.customFields);
+
+  const showPriceRange =
+    product.prices?.priceRange.min.value !== product.prices?.priceRange.max.value;
+
+  return (
+    <div>
+      {product.brand && (
+        <p className="mb-2 font-semibold uppercase text-gray-500">{product.brand.name}</p>
+      )}
+
+      <h1 className="mb-4 text-h2">{product.name}</h1>
+
+      <ReviewSummary data={product.reviewSummary} />
+
+      {product.prices && (
+        <div className="my-6 text-h4">
+          {showPriceRange ? (
+            <span>
+              {currencyFormatter.format(product.prices.priceRange.min.value)} -{' '}
+              {currencyFormatter.format(product.prices.priceRange.max.value)}
+            </span>
+          ) : (
+            <>
+              {product.prices.retailPrice?.value !== undefined && (
+                <span>
+                  MSRP:{' '}
+                  <span className="line-through">
+                    {currencyFormatter.format(product.prices.retailPrice.value)}
+                  </span>
+                  <br />
+                </span>
+              )}
+              {product.prices.salePrice?.value !== undefined &&
+              product.prices.basePrice?.value !== undefined ? (
+                <>
+                  <span>
+                    Was:{' '}
+                    <span className="line-through">
+                      {currencyFormatter.format(product.prices.basePrice.value)}
+                    </span>
+                  </span>
+                  <br />
+                  <span>Now: {currencyFormatter.format(product.prices.salePrice.value)}</span>
+                </>
+              ) : (
+                product.prices.price.value && (
+                  <span>{currencyFormatter.format(product.prices.price.value)}</span>
+                )
+              )}
+            </>
+          )}
+        </div>
+      )}
+
+      <ProductForm data={product} />
+
+      <div className="my-12">
+        <h2 className="mb-4 text-h5">Additional details</h2>
+        <div className="grid gap-3 sm:grid-cols-2">
+          {Boolean(product.sku) && (
+            <div>
+              <h3 className="text-base font-bold">SKU</h3>
+              <p>{product.sku}</p>
+            </div>
+          )}
+          {Boolean(product.upc) && (
+            <div>
+              <h3 className="text-base font-bold">UPC</h3>
+              <p>{product.upc}</p>
+            </div>
+          )}
+          {Boolean(product.minPurchaseQuantity) && (
+            <div>
+              <h3 className="text-base font-bold">Minimum purchase</h3>
+              <p>{product.minPurchaseQuantity}</p>
+            </div>
+          )}
+          {Boolean(product.maxPurchaseQuantity) && (
+            <div>
+              <h3 className="text-base font-bold">Maxiumum purchase</h3>
+              <p>{product.maxPurchaseQuantity}</p>
+            </div>
+          )}
+          {Boolean(product.availabilityV2.description) && (
+            <div>
+              <h3 className="text-base font-bold">Availability</h3>
+              <p>{product.availabilityV2.description}</p>
+            </div>
+          )}
+          {Boolean(product.condition) && (
+            <div>
+              <h3 className="text-base font-bold">Condition</h3>
+              <p>{product.condition}</p>
+            </div>
+          )}
+          {Boolean(product.weight) && (
+            <div>
+              <h3 className="text-base font-bold">Weight</h3>
+              <p>
+                {product.weight?.value} {product.weight?.unit}
+              </p>
+            </div>
+          )}
+          {Boolean(customFields) &&
+            customFields.map((customField) => (
+              <div key={customField.entityId}>
+                <h3 className="text-base font-bold">{customField.name}</h3>
+                <p>{customField.value}</p>
+              </div>
+            ))}
+        </div>
+      </div>
+
+      <ProductSchema data={product} />
+    </div>
+  );
+};
diff --git a/apps/core/app/(default)/product/[slug]/_components/product-review-schema.tsx b/apps/core/app/(default)/product/[slug]/_components/product-review-schema.tsx
index ed72ca26b..ff7edeae4 100644
--- a/apps/core/app/(default)/product/[slug]/_components/product-review-schema.tsx
+++ b/apps/core/app/(default)/product/[slug]/_components/product-review-schema.tsx
@@ -1,15 +1,39 @@
+import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
 import { Product as ProductSchemaType, WithContext } from 'schema-dts';
 
-import { getProductReviews } from '~/client/queries/get-product-reviews';
-import { ExistingResultType } from '~/client/util';
+import { FragmentOf, graphql, readFragment } from '~/tada/graphql';
+
+export const ProductReviewSchemaFragment = graphql(`
+  fragment ProductReviewSchema on Product {
+    entityId
+    reviews(first: 5) {
+      edges {
+        node {
+          entityId
+          author {
+            name
+          }
+          createdAt {
+            utc
+          }
+          rating
+          title
+          text
+        }
+      }
+    }
+  }
+`);
+
+interface Props {
+  data: FragmentOf<typeof ProductReviewSchemaFragment>;
+}
+
+export const ProductReviewSchema = ({ data }: Props) => {
+  const fragmentData = readFragment(ProductReviewSchemaFragment, data);
+  const productId = fragmentData.entityId;
+  const reviews = removeEdgesAndNodes(fragmentData.reviews);
 
-export const ProductReviewSchema = ({
-  reviews,
-  productId,
-}: {
-  reviews: ExistingResultType<typeof getProductReviews>['reviews'];
-  productId: number;
-}) => {
   const productReviewSchema: WithContext<ProductSchemaType> = {
     '@context': 'https://schema.org',
     '@type': 'Product',
diff --git a/apps/core/app/(default)/product/[slug]/_components/product-schema.tsx b/apps/core/app/(default)/product/[slug]/_components/product-schema.tsx
index eeb17b3e4..06dd43429 100644
--- a/apps/core/app/(default)/product/[slug]/_components/product-schema.tsx
+++ b/apps/core/app/(default)/product/[slug]/_components/product-schema.tsx
@@ -1,9 +1,53 @@
 import { Product as ProductSchemaType, WithContext } from 'schema-dts';
 
-import { getProduct } from '~/client/queries/get-product';
+import { FragmentOf, graphql, readFragment } from '~/tada/graphql';
 
-export const ProductSchema = ({ product }: { product: Awaited<ReturnType<typeof getProduct>> }) => {
-  if (product === null) return null;
+export const ProductSchemaFragment = graphql(`
+  fragment ProductSchemaFragment on Product {
+    name
+    path
+    plainTextDescription
+    sku
+    gtin
+    mpn
+    brand {
+      name
+      path
+    }
+    reviewSummary {
+      numberOfReviews
+      averageRating
+    }
+    defaultImage {
+      url(width: 600)
+    }
+    prices {
+      price {
+        value
+        currencyCode
+      }
+      priceRange {
+        min {
+          value
+        }
+        max {
+          value
+        }
+      }
+    }
+    condition
+    availabilityV2 {
+      status
+    }
+  }
+`);
+
+interface Props {
+  data: FragmentOf<typeof ProductSchemaFragment>;
+}
+
+export const ProductSchema = ({ data }: Props) => {
+  const product = readFragment(ProductSchemaFragment, data);
 
   /* TODO: use common default image when product has no images */
   const image = product.defaultImage ? { image: product.defaultImage.url } : null;
diff --git a/apps/core/app/(default)/product/[slug]/_components/related-products.tsx b/apps/core/app/(default)/product/[slug]/_components/related-products.tsx
index 74d7dd5d5..0e68a8361 100644
--- a/apps/core/app/(default)/product/[slug]/_components/related-products.tsx
+++ b/apps/core/app/(default)/product/[slug]/_components/related-products.tsx
@@ -1,18 +1,16 @@
 import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
 
-import { ProductCardFragment } from '~/components/product-card';
+import { ProductCard, ProductCardFragment } from '~/components/product-card';
 import { ProductCardCarousel } from '~/components/product-card-carousel';
 import { FragmentOf, graphql, readFragment } from '~/tada/graphql';
 
 export const RelatedProductsFragment = graphql(
   `
-    fragment RelatedProductsFragment on Site {
-      product(entityId: $entityId) {
-        relatedProducts(first: $first) {
-          edges {
-            node {
-              ...ProductCardFragment
-            }
+    fragment RelatedProductsFragment on Product {
+      relatedProducts(first: $firstRelatedProducts) {
+        edges {
+          node {
+            ...ProductCardFragment
           }
         }
       }
@@ -27,13 +25,13 @@ interface Props {
 
 export const RelatedProducts = ({ data }: Props) => {
   const fragmentData = readFragment(RelatedProductsFragment, data);
-  const product = fragmentData.product;
+  const relatedProducts = removeEdgesAndNodes(fragmentData.relatedProducts);
 
-  if (!product) {
-    return null;
-  }
-
-  const relatedProducts = removeEdgesAndNodes(product.relatedProducts);
-
-  return <ProductCardCarousel data={relatedProducts} title="Related Products" />;
+  return (
+    <ProductCardCarousel title="Related Products">
+      {relatedProducts.map((relatedProductsFragment, i) => (
+        <ProductCard data={relatedProductsFragment} key={i} />
+      ))}
+    </ProductCardCarousel>
+  );
 };
diff --git a/apps/core/app/(default)/product/[slug]/_components/review-summary.tsx b/apps/core/app/(default)/product/[slug]/_components/review-summary.tsx
index 71c8129c2..7c6ec487b 100644
--- a/apps/core/app/(default)/product/[slug]/_components/review-summary.tsx
+++ b/apps/core/app/(default)/product/[slug]/_components/review-summary.tsx
@@ -1,23 +1,24 @@
 import { Rating } from '@bigcommerce/components/Rating';
 import { useId } from 'react';
 
-import { getProductReviews } from '~/client/queries/get-product-reviews';
 import { cn } from '~/lib/utils';
+import { FragmentOf, graphql, readFragment } from '~/tada/graphql';
+
+export const ReviewSummaryFragment = graphql(`
+  fragment ReviewSummaryFragment on Reviews {
+    summationOfRatings
+    numberOfReviews
+    averageRating
+  }
+`);
 
 interface Props {
-  productId: number;
+  data: FragmentOf<typeof ReviewSummaryFragment>;
 }
 
-export const ReviewSummary = async ({ productId }: Props) => {
+export const ReviewSummary = ({ data }: Props) => {
   const summaryId = useId();
-
-  const reviews = await getProductReviews(productId);
-
-  if (!reviews) {
-    return null;
-  }
-
-  const { numberOfReviews, averageRating } = reviews.reviewSummary;
+  const { numberOfReviews, averageRating } = readFragment(ReviewSummaryFragment, data);
 
   const hasNoReviews = numberOfReviews === 0;
 
diff --git a/apps/core/app/(default)/product/[slug]/_components/reviews.tsx b/apps/core/app/(default)/product/[slug]/_components/reviews.tsx
index cfa482b3f..ede303138 100644
--- a/apps/core/app/(default)/product/[slug]/_components/reviews.tsx
+++ b/apps/core/app/(default)/product/[slug]/_components/reviews.tsx
@@ -1,6 +1,7 @@
+import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
 import { Rating } from '@bigcommerce/components/Rating';
 
-import { getProductReviews } from '~/client/queries/get-product-reviews';
+import { FragmentOf, graphql, readFragment } from '~/tada/graphql';
 
 import { ProductReviewSchema } from './product-review-schema';
 
@@ -8,13 +9,32 @@ interface Props {
   productId: number;
 }
 
-export const Reviews = async ({ productId }: Props) => {
-  const product = await getProductReviews(productId);
-  const reviews = product?.reviews;
-
-  if (!reviews) {
-    return null;
+export const ReviewsFragment = graphql(`
+  fragment ReviewsFragment on ReviewConnection {
+    edges {
+      node {
+        entityId
+        author {
+          name
+        }
+        createdAt {
+          utc
+        }
+        rating
+        title
+        text
+      }
+    }
   }
+`);
+
+interface Props {
+  data: FragmentOf<typeof ReviewsFragment>;
+}
+
+export const Reviews = ({ data }: Props) => {
+  const fragmentData = readFragment(ReviewsFragment, data);
+  const reviews = removeEdgesAndNodes(fragmentData);
 
   return (
     <>
diff --git a/apps/core/app/(default)/product/[slug]/page.tsx b/apps/core/app/(default)/product/[slug]/page.tsx
index d6ecbf180..b8b899383 100644
--- a/apps/core/app/(default)/product/[slug]/page.tsx
+++ b/apps/core/app/(default)/product/[slug]/page.tsx
@@ -1,144 +1,20 @@
+import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { Suspense } from 'react';
 
 import { getProduct } from '~/client/queries/get-product';
-import { ProductForm } from '~/components/product-form';
 import { execute, graphql } from '~/tada/graphql';
 
-import { BreadCrumbs } from './_components/breadcrumbs';
+import { BreadCrumbs, BreadcrumbsFragment } from './_components/breadcrumbs';
 import { Gallery } from './_components/gallery';
-import { ProductSchema } from './_components/product-schema';
+import { ProductDetails } from './_components/product-details';
+import { ProductDetailsFragment } from './_components/product-details/fragment';
 import { RelatedProducts, RelatedProductsFragment } from './_components/related-products';
-import { ReviewSummary } from './_components/review-summary';
 import { Reviews } from './_components/reviews';
 
 type Product = Awaited<ReturnType<typeof getProduct>>;
 
-const currencyFormatter = new Intl.NumberFormat('en-US', {
-  style: 'currency',
-  currency: 'USD',
-});
-
-const ProductDetails = ({ product }: { product: NonNullable<Product> }) => {
-  const showPriceRange =
-    product.prices?.priceRange.min.value !== product.prices?.priceRange.max.value;
-
-  return (
-    <div>
-      {product.brand && (
-        <p className="mb-2 font-semibold uppercase text-gray-500">{product.brand.name}</p>
-      )}
-
-      <h1 className="mb-4 text-h2">{product.name}</h1>
-
-      <Suspense fallback="Loading...">
-        <ReviewSummary productId={product.entityId} />
-      </Suspense>
-
-      {product.prices && (
-        <div className="my-6 text-h4">
-          {showPriceRange ? (
-            <span>
-              {currencyFormatter.format(product.prices.priceRange.min.value)} -{' '}
-              {currencyFormatter.format(product.prices.priceRange.max.value)}
-            </span>
-          ) : (
-            <>
-              {product.prices.retailPrice?.value !== undefined && (
-                <span>
-                  MSRP:{' '}
-                  <span className="line-through">
-                    {currencyFormatter.format(product.prices.retailPrice.value)}
-                  </span>
-                  <br />
-                </span>
-              )}
-              {product.prices.salePrice?.value !== undefined &&
-              product.prices.basePrice?.value !== undefined ? (
-                <>
-                  <span>
-                    Was:{' '}
-                    <span className="line-through">
-                      {currencyFormatter.format(product.prices.basePrice.value)}
-                    </span>
-                  </span>
-                  <br />
-                  <span>Now: {currencyFormatter.format(product.prices.salePrice.value)}</span>
-                </>
-              ) : (
-                product.prices.price.value && (
-                  <span>{currencyFormatter.format(product.prices.price.value)}</span>
-                )
-              )}
-            </>
-          )}
-        </div>
-      )}
-
-      <ProductForm product={product} />
-
-      <div className="my-12">
-        <h2 className="mb-4 text-h5">Additional details</h2>
-        <div className="grid gap-3 sm:grid-cols-2">
-          {Boolean(product.sku) && (
-            <div>
-              <h3 className="text-base font-bold">SKU</h3>
-              <p>{product.sku}</p>
-            </div>
-          )}
-          {Boolean(product.upc) && (
-            <div>
-              <h3 className="text-base font-bold">UPC</h3>
-              <p>{product.upc}</p>
-            </div>
-          )}
-          {Boolean(product.minPurchaseQuantity) && (
-            <div>
-              <h3 className="text-base font-bold">Minimum purchase</h3>
-              <p>{product.minPurchaseQuantity}</p>
-            </div>
-          )}
-          {Boolean(product.maxPurchaseQuantity) && (
-            <div>
-              <h3 className="text-base font-bold">Maxiumum purchase</h3>
-              <p>{product.maxPurchaseQuantity}</p>
-            </div>
-          )}
-          {Boolean(product.availabilityV2.description) && (
-            <div>
-              <h3 className="text-base font-bold">Availability</h3>
-              <p>{product.availabilityV2.description}</p>
-            </div>
-          )}
-          {Boolean(product.condition) && (
-            <div>
-              <h3 className="text-base font-bold">Condition</h3>
-              <p>{product.condition}</p>
-            </div>
-          )}
-          {Boolean(product.weight) && (
-            <div>
-              <h3 className="text-base font-bold">Weight</h3>
-              <p>
-                {product.weight?.value} {product.weight?.unit}
-              </p>
-            </div>
-          )}
-          {Boolean(product.customFields) &&
-            product.customFields.map((customField) => (
-              <div key={customField.entityId}>
-                <h3 className="text-base font-bold">{customField.name}</h3>
-                <p>{customField.value}</p>
-              </div>
-            ))}
-        </div>
-      </div>
-      <ProductSchema product={product} />
-    </div>
-  );
-};
-
 const ProductDescriptionAndReviews = ({ product }: { product: NonNullable<Product> }) => {
   return (
     <div className="lg:col-span-2">
@@ -198,13 +74,28 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
 
 const ProductPageQuery = graphql(
   `
-    query ProductPageQuery($first: Int!, $entityId: Int!) {
+    query ProductPageQuery($firstRelatedProducts: Int!, $entityId: Int!) {
       site {
-        ...RelatedProductsFragment
+        product(entityId: $entityId) {
+          ...ProductDetailsFragment
+          ...RelatedProductsFragment
+          categories(first: 1) {
+            ...BreadcrumbsFragment
+          }
+          images {
+            edges {
+              node {
+                altText
+                isDefault
+                url(width: 600)
+              }
+            }
+          }
+        }
       }
     }
   `,
-  [RelatedProductsFragment],
+  [RelatedProductsFragment, BreadcrumbsFragment, ProductDetailsFragment],
 );
 
 export default async function Product({ params, searchParams }: ProductPageProps) {
@@ -224,15 +115,22 @@ export default async function Product({ params, searchParams }: ProductPageProps
 
   const fragmentData = await execute(ProductPageQuery, {
     entityId: productId,
-    first: 12,
+    firstRelatedProducts: 12,
   });
 
+  const product2 = fragmentData.site.product;
+
   if (!product) {
     return notFound();
   }
 
+  // Remove this when we merge
+  if (!product2) {
+    return notFound();
+  }
+
   // make a copy of product.images
-  const images = product.images;
+  const images = removeEdgesAndNodes(product2.images);
 
   // pick the top-level default image out of the `Image` response
   const topLevelDefaultImg = product.images.find((image) => image.isDefault);
@@ -252,15 +150,17 @@ export default async function Product({ params, searchParams }: ProductPageProps
 
   return (
     <>
-      <BreadCrumbs productId={productId} />
+      <BreadCrumbs data={product2.categories} />
       <div className="mb-12 mt-4 lg:grid lg:grid-cols-2 lg:gap-8">
         <Gallery images={images} />
-        <ProductDetails product={product} />
+        <ProductDetails data={product2} />
         <ProductDescriptionAndReviews product={product} />
       </div>
 
+      {/* TODO - TADA: This suspense is not being used because we do a single request */}
+      {/* do we want to split the requests? */}
       <Suspense fallback="Loading...">
-        <RelatedProducts data={fragmentData.site} />
+        <RelatedProducts data={product2} />
       </Suspense>
     </>
   );
diff --git a/apps/core/components/product-form/fields/multiple-choice-field/fragment.ts b/apps/core/components/product-form/fields/multiple-choice-field/fragment.ts
new file mode 100644
index 000000000..6ccf66a1f
--- /dev/null
+++ b/apps/core/components/product-form/fields/multiple-choice-field/fragment.ts
@@ -0,0 +1,34 @@
+import { graphql } from '~/tada/graphql';
+
+export const MultipleChoiceFieldFragment = graphql(`
+  fragment MultipleChoiceFieldFragment on MultipleChoiceOption {
+    __typename
+    entityId
+    displayName
+    isRequired
+    displayStyle
+    values(first: 10) {
+      edges {
+        node {
+          entityId
+          label
+          isDefault
+          isSelected
+          ... on SwatchOptionValue {
+            __typename
+            hexColors
+            imageUrl(width: 36)
+          }
+          ... on ProductPickListOptionValue {
+            __typename
+            defaultImage {
+              altText
+              url(width: 48)
+            }
+            productId
+          }
+        }
+      }
+    }
+  }
+`);
diff --git a/apps/core/components/product-form/fields/multiple-choice-field.tsx b/apps/core/components/product-form/fields/multiple-choice-field/index.tsx
similarity index 89%
rename from apps/core/components/product-form/fields/multiple-choice-field.tsx
rename to apps/core/components/product-form/fields/multiple-choice-field/index.tsx
index 6e4135774..7041cf316 100644
--- a/apps/core/components/product-form/fields/multiple-choice-field.tsx
+++ b/apps/core/components/product-form/fields/multiple-choice-field/index.tsx
@@ -1,3 +1,4 @@
+import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
 import { Label } from '@bigcommerce/components/Label';
 import { PickList, PickListItem } from '@bigcommerce/components/PickList';
 import { RadioGroup, RadioItem } from '@bigcommerce/components/RadioGroup';
@@ -7,23 +8,25 @@ import { Swatch, SwatchItem } from '@bigcommerce/components/Swatch';
 import Image from 'next/image';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
-import { getProduct } from '~/client/queries/get-product';
-import { ExistingResultType, Unpacked } from '~/client/util';
+import { FragmentOf, readFragment } from '~/tada/graphql';
 
-import { useProductFieldController } from '../use-product-form';
+import { useProductFieldController } from '../../use-product-form';
+import { ErrorMessage } from '../shared/error-message';
 
-import { ErrorMessage } from './shared/error-message';
+import { MultipleChoiceFieldFragment } from './fragment';
 
-type MultipleChoiceOption = Extract<
-  Unpacked<ExistingResultType<typeof getProduct>['productOptions']>,
-  { __typename: 'MultipleChoiceOption' }
->;
+interface Props {
+  data: FragmentOf<typeof MultipleChoiceFieldFragment>;
+}
 
-export const MultipleChoiceField = ({ option }: { option: MultipleChoiceOption }) => {
+export const MultipleChoiceField = ({ data }: Props) => {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
+  const option = readFragment(MultipleChoiceFieldFragment, data);
+  const values = removeEdgesAndNodes(option.values);
+
   const searchParamSelected = searchParams.get(String(option.entityId));
 
   const handleOnValueChange = ({ optionId, valueId }: { optionId: number; valueId: number }) => {
@@ -34,8 +37,8 @@ export const MultipleChoiceField = ({ option }: { option: MultipleChoiceOption }
     router.replace(`${pathname}?${optionSearchParams.toString()}`, { scroll: false });
   };
 
-  const selectedValue = option.values.find((value) => value.isSelected)?.entityId.toString();
-  const defaultValue = option.values.find((value) => value.isDefault)?.entityId.toString();
+  const selectedValue = values.find((value) => value.isSelected)?.entityId.toString();
+  const defaultValue = values.find((value) => value.isDefault)?.entityId.toString();
 
   const { field, fieldState } = useProductFieldController({
     name: `attribute_${option.entityId}`,
@@ -66,7 +69,7 @@ export const MultipleChoiceField = ({ option }: { option: MultipleChoiceOption }
             }}
             value={field.value?.toString()}
           >
-            {option.values.map((value) => {
+            {values.map((value) => {
               if ('__typename' in value && value.__typename === 'SwatchOptionValue') {
                 return (
                   <SwatchItem
@@ -104,7 +107,7 @@ export const MultipleChoiceField = ({ option }: { option: MultipleChoiceOption }
             }}
             value={field.value?.toString()}
           >
-            {option.values.map((value) => {
+            {values.map((value) => {
               return (
                 <RectangleListItem
                   key={value.entityId}
@@ -139,7 +142,7 @@ export const MultipleChoiceField = ({ option }: { option: MultipleChoiceOption }
             }}
             value={field.value?.toString()}
           >
-            {option.values.map((value) => (
+            {values.map((value) => (
               <div className="mb-2 flex" key={value.entityId}>
                 <RadioItem id={`${value.entityId}`} value={`${value.entityId}`} />
                 <Label className="cursor-pointer ps-4 font-normal" htmlFor={`${value.entityId}`}>
@@ -173,7 +176,7 @@ export const MultipleChoiceField = ({ option }: { option: MultipleChoiceOption }
             variant={error && 'error'}
           >
             <SelectContent>
-              {option.values.map((value) => (
+              {values.map((value) => (
                 <SelectItem key={value.entityId} value={`${value.entityId}`}>
                   {value.label}
                 </SelectItem>
@@ -204,7 +207,7 @@ export const MultipleChoiceField = ({ option }: { option: MultipleChoiceOption }
             }}
             value={field.value?.toString()}
           >
-            {option.values.map((value) => {
+            {values.map((value) => {
               if ('__typename' in value && value.__typename === 'ProductPickListOptionValue') {
                 return (
                   <div className="flex items-center p-4" key={value.entityId}>
diff --git a/apps/core/components/product-form/fragment.ts b/apps/core/components/product-form/fragment.ts
new file mode 100644
index 000000000..c6549ed9e
--- /dev/null
+++ b/apps/core/components/product-form/fragment.ts
@@ -0,0 +1,24 @@
+import { graphql } from '~/tada/graphql';
+
+import { MultipleChoiceFieldFragment } from './fields/multiple-choice-field/fragment';
+
+export const ProductFormFragment = graphql(
+  `
+    fragment ProductFormFragment on Product {
+      entityId
+      availabilityV2 {
+        status
+      }
+      productOptions {
+        edges {
+          node {
+            __typename
+            entityId
+            ...MultipleChoiceFieldFragment
+          }
+        }
+      }
+    }
+  `,
+  [MultipleChoiceFieldFragment],
+);
diff --git a/apps/core/components/product-form/index.tsx b/apps/core/components/product-form/index.tsx
index 80a2ede1a..0961c199c 100644
--- a/apps/core/components/product-form/index.tsx
+++ b/apps/core/components/product-form/index.tsx
@@ -1,28 +1,27 @@
 'use client';
 
+import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
 import { Button } from '@bigcommerce/components/Button';
 import { AlertCircle, Check, Heart } from 'lucide-react';
 import { FormProvider } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 
-import { getProduct } from '~/client/queries/get-product';
-import { ExistingResultType } from '~/client/util';
+import { FragmentOf, readFragment } from '~/tada/graphql';
 
 import { Link } from '../link';
 
 import { handleAddToCart } from './_actions/add-to-cart';
 import { AddToCart } from './add-to-cart';
-import { CheckboxField } from './fields/checkbox-field';
-import { DateField } from './fields/date-field';
-import { MultiLineTextField } from './fields/multi-line-text-field';
+// import { CheckboxField } from './fields/checkbox-field';
+// import { DateField } from './fields/date-field';
+// import { MultiLineTextField } from './fields/multi-line-text-field';
 import { MultipleChoiceField } from './fields/multiple-choice-field';
-import { NumberField } from './fields/number-field';
+// import { NumberField } from './fields/number-field';
 import { QuantityField } from './fields/quantity-field';
-import { TextField } from './fields/text-field';
+// import { TextField } from './fields/text-field';
+import { ProductFormFragment } from './fragment';
 import { ProductFormData, useProductForm } from './use-product-form';
 
-type Product = ExistingResultType<typeof getProduct>;
-
 export const productFormSubmit = async (data: ProductFormData) => {
   const result = await handleAddToCart(data);
   const quantity = Number(data.quantity);
@@ -50,38 +49,45 @@ export const productFormSubmit = async (data: ProductFormData) => {
   );
 };
 
-export const ProductForm = ({ product }: { product: Product }) => {
+interface Props {
+  data: FragmentOf<typeof ProductFormFragment>;
+}
+
+export const ProductForm = ({ data }: Props) => {
   const { handleSubmit, register, ...methods } = useProductForm();
 
+  const product = readFragment(ProductFormFragment, data);
+  const productOptions = removeEdgesAndNodes(product.productOptions);
+
   return (
     <FormProvider handleSubmit={handleSubmit} register={register} {...methods}>
       <form className="flex flex-col gap-6 @container" onSubmit={handleSubmit(productFormSubmit)}>
         <input type="hidden" value={product.entityId} {...register('product_id')} />
 
-        {product.productOptions?.map((option) => {
+        {productOptions.map((option) => {
           if (option.__typename === 'MultipleChoiceOption') {
-            return <MultipleChoiceField key={option.entityId} option={option} />;
+            return <MultipleChoiceField data={option} key={option.entityId} />;
           }
 
-          if (option.__typename === 'CheckboxOption') {
-            return <CheckboxField key={option.entityId} option={option} />;
-          }
+          // if (option.__typename === 'CheckboxOption') {
+          //   return <CheckboxField key={option.entityId} option={option} />;
+          // }
 
-          if (option.__typename === 'NumberFieldOption') {
-            return <NumberField key={option.entityId} option={option} />;
-          }
+          // if (option.__typename === 'NumberFieldOption') {
+          //   return <NumberField key={option.entityId} option={option} />;
+          // }
 
-          if (option.__typename === 'MultiLineTextFieldOption') {
-            return <MultiLineTextField key={option.entityId} option={option} />;
-          }
+          // if (option.__typename === 'MultiLineTextFieldOption') {
+          //   return <MultiLineTextField key={option.entityId} option={option} />;
+          // }
 
-          if (option.__typename === 'TextFieldOption') {
-            return <TextField key={option.entityId} option={option} />;
-          }
+          // if (option.__typename === 'TextFieldOption') {
+          //   return <TextField key={option.entityId} option={option} />;
+          // }
 
-          if (option.__typename === 'DateFieldOption') {
-            return <DateField key={option.entityId} option={option} />;
-          }
+          // if (option.__typename === 'DateFieldOption') {
+          //   return <DateField key={option.entityId} option={option} />;
+          // }
 
           return null;
         })}
diff --git a/apps/core/package.json b/apps/core/package.json
index b4cd81281..e9914d804 100644
--- a/apps/core/package.json
+++ b/apps/core/package.json
@@ -23,7 +23,7 @@
     "@vercel/kv": "^1.0.0",
     "@vercel/speed-insights": "^1.0.1",
     "clsx": "^2.0.0",
-    "gql.tada": "^1.2.1",
+    "gql.tada": "1.3.0-canary-26e4993bd76373f5c4b409240c1ce0d83d80cb79",
     "graphql": "^16.8.1",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.294.0",
@@ -41,7 +41,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@0no-co/graphqlsp": "^1.3.3",
+    "@0no-co/graphqlsp": "^1.4.2",
     "@bigcommerce/eslint-config-catalyst": "workspace:^",
     "@graphql-codegen/cli": "^5.0.0",
     "@graphql-codegen/client-preset": "^4.1.0",
diff --git a/apps/core/tada/fragments/product-details.ts b/apps/core/tada/fragments/product-details.ts
deleted file mode 100644
index 9e0166b9b..000000000
--- a/apps/core/tada/fragments/product-details.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { graphql } from '../graphql';
-
-import { PricesFragment } from './prices';
-
-export const ProductDetailsFragment = graphql(
-  `
-    fragment ProductDetailsFragment on Product {
-      entityId
-      name
-      description
-      path
-      ...PricesFragment
-      brand {
-        name
-        path
-      }
-      defaultImage {
-        url(width: $imageWidth, height: $imageHeight)
-        altText
-      }
-      availabilityV2 {
-        status
-      }
-      inventory {
-        aggregated {
-          availableToSell
-        }
-      }
-      reviewSummary {
-        averageRating
-        numberOfReviews
-      }
-      categories {
-        edges {
-          node {
-            name
-            path
-          }
-        }
-      }
-      productOptions(first: 3) {
-        edges {
-          node {
-            entityId
-          }
-        }
-      }
-    }
-  `,
-  [PricesFragment],
-);
diff --git a/apps/core/tada/graphql.ts b/apps/core/tada/graphql.ts
index 8d0858006..ebe864ac2 100644
--- a/apps/core/tada/graphql.ts
+++ b/apps/core/tada/graphql.ts
@@ -41,7 +41,7 @@ export async function execute<Result = any, Variables = any>(
   );
 
   if (!response.ok) {
-    throw new Error('Failed to fetch data');
+    throw new Error(`Failed to fetch data${JSON.stringify(await response.json())}`);
   }
 
   const timeEnd = Date.now();
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d32e3bf63..bca737af0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,8 +48,8 @@ importers:
         specifier: ^2.0.0
         version: 2.0.0
       gql.tada:
-        specifier: ^1.2.1
-        version: 1.2.1(graphql@16.8.1)
+        specifier: 1.3.0-canary-26e4993bd76373f5c4b409240c1ce0d83d80cb79
+        version: 1.3.0-canary-26e4993bd76373f5c4b409240c1ce0d83d80cb79(graphql@16.8.1)
       graphql:
         specifier: ^16.8.1
         version: 16.8.1
@@ -97,8 +97,8 @@ importers:
         version: 3.22.4
     devDependencies:
       '@0no-co/graphqlsp':
-        specifier: ^1.3.3
-        version: 1.3.3
+        specifier: ^1.4.2
+        version: 1.4.2
       '@bigcommerce/eslint-config-catalyst':
         specifier: workspace:^
         version: link:../../packages/eslint-config-catalyst
@@ -492,8 +492,8 @@ packages:
       graphql: 16.8.1
     dev: false
 
-  /@0no-co/graphqlsp@1.3.3:
-    resolution: {integrity: sha512-LYgxvD1G5FtetrIbLRQ3MyVlNa+4ymsffD/ThFAt+E8RIvGPI7NVkywGpYbu/hnm2/MyuAli2nR/n5maWfdP7w==}
+  /@0no-co/graphqlsp@1.4.2:
+    resolution: {integrity: sha512-qgrRwrz5Q7ev7lO9XKm3mf6UefFtjIciZUKL69mZjoEPGbRzM/Mx+6YNd2dGt1uIi52T5jT+f6rR4K5lWyDS0A==}
     dependencies:
       node-fetch: 2.7.0
     transitivePeerDependencies:
@@ -2324,6 +2324,13 @@ packages:
   /@floating-ui/utils@0.1.1:
     resolution: {integrity: sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==}
 
+  /@gql.tada/cli-utils@0.1.0-canary-26e4993bd76373f5c4b409240c1ce0d83d80cb79:
+    resolution: {integrity: sha512-BlhfBVOZX4Lws++8nBdacpPrylHqUae28scsoQq3AGg2tQ4mwKVu1uzE+RtP9ZuJ/2OBuGFK3QDXWItNh1QYeg==}
+    dependencies:
+      '@urql/introspection': 1.0.3(graphql@16.8.1)
+      graphql: 16.8.1
+    dev: false
+
   /@graphql-codegen/add@5.0.0(graphql@16.8.1):
     resolution: {integrity: sha512-ynWDOsK2yxtFHwcJTB9shoSkUd7YXd6ZE57f0nk7W5cu/nAgxZZpEsnTPEpZB/Mjf14YRGe2uJHQ7AfElHjqUQ==}
     peerDependencies:
@@ -6233,6 +6240,14 @@ packages:
       crypto-js: 4.2.0
     dev: false
 
+  /@urql/introspection@1.0.3(graphql@16.8.1):
+    resolution: {integrity: sha512-5zgnfUDV10c3qudqYvfZ/rOtWVB2QvqanmoDMttqpt+TCCPkSUZdb2qcLCEB6DL7ph8mQRTZhXI29J57nTnqKg==}
+    peerDependencies:
+      graphql: ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      graphql: 16.8.1
+    dev: false
+
   /@vercel/analytics@1.1.1:
     resolution: {integrity: sha512-+NqgNmSabg3IFfxYhrWCfB/H+RCUOCR5ExRudNG2+pcRehq628DJB5e1u1xqwpLtn4pAYii4D98w7kofORAGQA==}
     dependencies:
@@ -9266,10 +9281,12 @@ packages:
     dependencies:
       get-intrinsic: 1.2.2
 
-  /gql.tada@1.2.1(graphql@16.8.1):
-    resolution: {integrity: sha512-Nx8x3g9WLT23eu9aL/4TTFDBwm7CBGVd4F2Jp2H5oOjDpuWv12i1mTLKReQwn2V1ZP+jG8V0ATXzFQZt1pxSgw==}
+  /gql.tada@1.3.0-canary-26e4993bd76373f5c4b409240c1ce0d83d80cb79(graphql@16.8.1):
+    resolution: {integrity: sha512-CnA6DcVx8tnMigki+ko08XyPxeF4QpEmfzW2MC8RdU5gXvzVzbKxev5ivVzdwxTjQ7Xgo00tD/5S0d45pvhA8g==}
+    hasBin: true
     dependencies:
       '@0no-co/graphql.web': 1.0.4(graphql@16.8.1)
+      '@gql.tada/cli-utils': 0.1.0-canary-26e4993bd76373f5c4b409240c1ce0d83d80cb79
     transitivePeerDependencies:
       - graphql
     dev: false