npm install @apollo/client graphql

import { ApolloClient, InMemoryCache, HttpLink, ApolloLink } from '@apollo/client'

// Shopify Storefront API React: Apollo client configuration
const shopifyLink = new HttpLink({
  uri: `https://${process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN}/api/2025-01/graphql.json`,
  headers: {
    'X-Shopify-Storefront-Access-Token':
      process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_TOKEN!,
    'Content-Type': 'application/json',
  },
})

export const shopifyClient = new ApolloClient({
  link: shopifyLink,
  cache: new InMemoryCache({
    typePolicies: {
      // Shopify Storefront API React: cache products by handle
      Product: { keyFields: ['handle'] },
      Cart:    { keyFields: ['id'] },
    },
  }),
})

import { gql } from '@apollo/client'

// Shopify Storefront API React: product listing query
export const GET_PRODUCTS = gql`
  query GetProducts($first: Int!, $after: String) {
    products(first: $first, after: $after, sortKey: BEST_SELLING) {
      pageInfo {
        hasNextPage
        endCursor
      }
      edges {
        node {
          id
          handle
          title
          description
          priceRange {
            minVariantPrice { amount currencyCode }
          }
          images(first: 1) {
            edges { node { url altText } }
          }
          variants(first: 1) {
            edges { node { id availableForSale } }
          }
        }
      }
    }
  }
`

// Shopify Storefront API React: single product query by handle
export const GET_PRODUCT_BY_HANDLE = gql`
  query GetProductByHandle($handle: String!) {
    productByHandle(handle: $handle) {
      id handle title descriptionHtml
      priceRange {
        minVariantPrice { amount currencyCode }
      }
      images(first: 10) {
        edges { node { url altText } }
      }
      variants(first: 100) {
        edges {
          node {
            id title availableForSale
            selectedOptions { name value }
            price { amount currencyCode }
          }
        }
      }
    }
  }
`

import { gql } from '@apollo/client'

const CART_FIELDS = gql`
  fragment CartFields on Cart {
    id checkoutUrl
    totalQuantity
    cost { totalAmount { amount currencyCode } }
    lines(first: 100) {
      edges {
        node {
          id quantity
          merchandise {
            ... on ProductVariant {
              id title
              product { title handle }
              image { url altText }
              price { amount currencyCode }
            }
          }
        }
      }
    }
  }
`

// Create a new cart — Shopify Storefront API React first add
export const CART_CREATE = gql`
  mutation CartCreate($lines: [CartLineInput!]!) {
    cartCreate(input: { lines: $lines }) {
      cart { ...CartFields }
      userErrors { field message }
    }
  }
  ${CART_FIELDS}
`

// Add lines to existing cart — Shopify Storefront API React subsequent adds
export const CART_LINES_ADD = gql`
  mutation CartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) {
    cartLinesAdd(cartId: $cartId, lines: $lines) {
      cart { ...CartFields }
      userErrors { field message }
    }
  }
  ${CART_FIELDS}
`

// Update quantity — Shopify Storefront API React quantity change
export const CART_LINES_UPDATE = gql`
  mutation CartLinesUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!) {
    cartLinesUpdate(cartId: $cartId, lines: $lines) {
      cart { ...CartFields }
      userErrors { field message }
    }
  }
  ${CART_FIELDS}
`

import { useState, useCallback } from 'react'
import { useMutation }           from '@apollo/client'
import { CART_CREATE, CART_LINES_ADD } from '../graphql/cart.mutations'

export function useShopifyCart() {
  const [ cartId, setCartId ] = useState<string | null>(
    () => localStorage.getItem( 'shopify_cart_id' )
  )
  const [ cart, setCart ] = useState<any>( null )

  const [ createCart ]   = useMutation( CART_CREATE )
  const [ addCartLines ] = useMutation( CART_LINES_ADD )

  // Add to cart — Shopify Storefront API React
  const addToCart = useCallback( async ( variantId: string, quantity = 1 ) => {
    const lines = [{ merchandiseId: variantId, quantity }]

    if ( ! cartId ) {
      // First item: create cart in Shopify Storefront API React
      const { data } = await createCart({ variables: { lines } })
      const newCart  = data?.cartCreate?.cart
      if ( newCart ) {
        setCartId( newCart.id )
        setCart( newCart )
        localStorage.setItem( 'shopify_cart_id', newCart.id )
      }
    } else {
      // Subsequent items: add to existing cart
      const { data } = await addCartLines({ variables: { cartId, lines } })
      setCart( data?.cartLinesAdd?.cart )
    }
  }, [ cartId, createCart, addCartLines ])

  const checkout = useCallback( () => {
    if ( cart?.checkoutUrl ) window.location.href = cart.checkoutUrl
  }, [ cart ])

  return { cart, addToCart, checkout, itemCount: cart?.totalQuantity ?? 0 }
}