@tanstack/create 0.65.0 → 0.67.0

package/src/frameworks/react/add-ons/shopify/assets/src/hooks/use-cart.ts

@@ -0,0 +1,276 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import type {
+  Image as StorefrontImage,
+  MoneyV2,
+} from '@shopify/hydrogen-react/storefront-api-types'
+
+import {
+  addToCart,
+  applyDiscountCode,
+  getCart,
+  removeCartLine,
+  removeDiscountCode,
+  updateCartLine,
+} from '#/server/shopify/cart.functions'
+import type { CartDetail, CartLineDetail } from '#/lib/shopify/queries'
+
+/**
+ * Shared React Query key for the current user's cart.
+ *
+ * The cart ID lives in an httpOnly cookie on the server, so the client never
+ * needs to know it — a single cache key is enough. Route loaders can prefetch
+ * into this key so the first render already has the data.
+ */
+export const CART_QUERY_KEY = ['shopify', 'cart'] as const
+
+const CART_MUTATION_KEY = ['shopify', 'cart', 'mutate'] as const
+
+/**
+ * Explicit in-flight counter. We don't rely on `queryClient.isMutating()`
+ * because its semantics at `onSettled` time vary across React Query versions.
+ * A module-level counter is unambiguous: increment in onMutate, decrement in
+ * onSettled, invalidate when the count hits zero.
+ *
+ * @see https://tkdodo.eu/blog/concurrent-optimistic-updates-in-react-query
+ */
+let cartMutationsInFlight = 0
+
+function trackMutationStart() {
+  cartMutationsInFlight++
+}
+
+function settleWhenIdle(qc: ReturnType<typeof useQueryClient>) {
+  cartMutationsInFlight = Math.max(0, cartMutationsInFlight - 1)
+  if (cartMutationsInFlight === 0) {
+    return qc.invalidateQueries({ queryKey: CART_QUERY_KEY })
+  }
+}
+
+export function useCart() {
+  const query = useQuery<CartDetail | null>({
+    queryKey: CART_QUERY_KEY,
+    queryFn: () => getCart(),
+    staleTime: 30_000,
+  })
+
+  return {
+    cart: query.data ?? null,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    isError: query.isError,
+    error: query.error,
+    refetch: query.refetch,
+    totalQuantity: query.data?.totalQuantity ?? 0,
+  }
+}
+
+type AddToCartLineSnapshot = {
+  productTitle: string
+  productHandle: string
+  variantTitle: string
+  price: Pick<MoneyV2, 'amount' | 'currencyCode'>
+  image: Pick<StorefrontImage, 'url' | 'altText' | 'width' | 'height'> | null
+  selectedOptions: Array<{ name: string; value: string }>
+}
+
+type AddToCartInput = {
+  variantId: string
+  quantity?: number
+  /** Product snapshot for optimistic line rendering. */
+  line?: AddToCartLineSnapshot
+}
+
+export function useAddToCart() {
+  const qc = useQueryClient()
+
+  return useMutation({
+    mutationKey: CART_MUTATION_KEY,
+    mutationFn: (input: AddToCartInput) =>
+      addToCart({
+        data: { variantId: input.variantId, quantity: input.quantity ?? 1 },
+      }),
+
+    onMutate: async (input) => {
+      trackMutationStart()
+      const quantity = input.quantity ?? 1
+      await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
+      const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
+
+      if (previous && input.line) {
+        const snap = input.line
+        const existingIdx = previous.lines.nodes.findIndex(
+          (l) => l.merchandise.id === input.variantId,
+        )
+
+        let nextLines: CartDetail['lines']['nodes']
+        if (existingIdx >= 0) {
+          nextLines = previous.lines.nodes.map((l, i) =>
+            i === existingIdx ? { ...l, quantity: l.quantity + quantity } : l,
+          )
+        } else {
+          const lineTotal = String(Number(snap.price.amount) * quantity)
+          nextLines = [
+            {
+              id: `optimistic-${Date.now()}`,
+              quantity,
+              merchandise: {
+                id: input.variantId,
+                title: snap.variantTitle,
+                availableForSale: true,
+                selectedOptions: snap.selectedOptions,
+                price: snap.price,
+                image: snap.image,
+                product: {
+                  handle: snap.productHandle,
+                  title: snap.productTitle,
+                },
+              },
+              cost: {
+                totalAmount: {
+                  amount: lineTotal,
+                  currencyCode: snap.price.currencyCode,
+                },
+              },
+            } satisfies CartLineDetail,
+            ...previous.lines.nodes,
+          ]
+        }
+
+        qc.setQueryData<CartDetail | null>(CART_QUERY_KEY, {
+          ...previous,
+          totalQuantity: nextLines.reduce((s, l) => s + l.quantity, 0),
+          lines: { ...previous.lines, nodes: nextLines },
+        })
+      } else if (previous) {
+        qc.setQueryData<CartDetail | null>(CART_QUERY_KEY, {
+          ...previous,
+          totalQuantity: (previous.totalQuantity ?? 0) + quantity,
+        })
+      }
+
+      return { previous }
+    },
+
+    onError: (_err, _input, ctx) => {
+      if (ctx?.previous !== undefined)
+        qc.setQueryData(CART_QUERY_KEY, ctx.previous)
+    },
+
+    onSuccess: (cart) => {
+      qc.setQueryData(CART_QUERY_KEY, cart)
+    },
+
+    onSettled: () => settleWhenIdle(qc),
+  })
+}
+
+export function useUpdateCartLine() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationKey: CART_MUTATION_KEY,
+    mutationFn: (input: { lineId: string; quantity: number }) =>
+      updateCartLine({ data: input }),
+
+    onMutate: async (input) => {
+      trackMutationStart()
+      await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
+      const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
+      if (previous) {
+        const nextLines = previous.lines.nodes.map((line) =>
+          line.id === input.lineId
+            ? { ...line, quantity: input.quantity }
+            : line,
+        )
+        const nextQty = nextLines.reduce((sum, line) => sum + line.quantity, 0)
+        qc.setQueryData<CartDetail | null>(CART_QUERY_KEY, {
+          ...previous,
+          totalQuantity: nextQty,
+          lines: { ...previous.lines, nodes: nextLines },
+        })
+      }
+      return { previous }
+    },
+
+    onError: (_err, _input, ctx) => {
+      if (ctx?.previous !== undefined)
+        qc.setQueryData(CART_QUERY_KEY, ctx.previous)
+    },
+
+    onSettled: () => settleWhenIdle(qc),
+  })
+}
+
+export function useRemoveCartLine() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationKey: CART_MUTATION_KEY,
+    mutationFn: (input: { lineId: string }) => removeCartLine({ data: input }),
+
+    onMutate: async (input) => {
+      trackMutationStart()
+      await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
+      const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
+      if (previous) {
+        const nextLines = previous.lines.nodes.filter(
+          (line) => line.id !== input.lineId,
+        )
+        const nextQty = nextLines.reduce((sum, line) => sum + line.quantity, 0)
+        qc.setQueryData<CartDetail | null>(CART_QUERY_KEY, {
+          ...previous,
+          totalQuantity: nextQty,
+          lines: { ...previous.lines, nodes: nextLines },
+        })
+      }
+      return { previous }
+    },
+
+    onError: (_err, _input, ctx) => {
+      if (ctx?.previous !== undefined)
+        qc.setQueryData(CART_QUERY_KEY, ctx.previous)
+    },
+
+    onSettled: () => settleWhenIdle(qc),
+  })
+}
+
+export function useApplyDiscountCode() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationKey: CART_MUTATION_KEY,
+    mutationFn: (input: { code: string }) =>
+      applyDiscountCode({ data: { code: input.code } }),
+    onMutate: async () => {
+      trackMutationStart()
+      await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
+    },
+    onSuccess: (cart) => {
+      qc.setQueryData(CART_QUERY_KEY, cart)
+    },
+    onSettled: () => settleWhenIdle(qc),
+  })
+}
+
+export function useRemoveDiscountCode() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationKey: CART_MUTATION_KEY,
+    mutationFn: () => removeDiscountCode(),
+    onMutate: async () => {
+      trackMutationStart()
+      await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
+      const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
+      if (previous) {
+        qc.setQueryData<CartDetail | null>(CART_QUERY_KEY, {
+          ...previous,
+          discountCodes: [],
+        })
+      }
+      return { previous }
+    },
+    onError: (_err, _input, ctx) => {
+      if (ctx?.previous !== undefined)
+        qc.setQueryData(CART_QUERY_KEY, ctx.previous)
+    },
+    onSettled: () => settleWhenIdle(qc),
+  })
+}

package/src/frameworks/react/add-ons/shopify/assets/src/hooks/use-customer.ts.ejs

@@ -0,0 +1,22 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+import { useQuery } from '@tanstack/react-query'
+
+import { getCustomer } from '#/server/shopify/customer.functions'
+import type { CustomerProfile } from '#/lib/shopify/customer-queries'
+
+export const CUSTOMER_QUERY_KEY = ['shopify', 'customer'] as const
+
+export function useCustomer() {
+  const query = useQuery<CustomerProfile | null>({
+    queryKey: CUSTOMER_QUERY_KEY,
+    queryFn: () => getCustomer(),
+    staleTime: 60_000,
+  })
+  return {
+    customer: query.data ?? null,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    isError: query.isError,
+    error: query.error,
+  }
+}

package/src/frameworks/react/add-ons/shopify/assets/src/integrations/shopify/header-cart.tsx

@@ -0,0 +1,37 @@
+import { Link } from '@tanstack/react-router'
+
+import { useCart } from '#/hooks/use-cart'
+
+export default function ShopifyHeaderCart() {
+  const { totalQuantity } = useCart()
+  return (
+    <Link
+      to="/shop/cart"
+      className="relative inline-flex items-center justify-center rounded-xl p-2 transition hover:bg-[var(--storefront-line)]/40"
+      aria-label={`Cart, ${totalQuantity} item${totalQuantity === 1 ? '' : 's'}`}
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="22"
+        height="22"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        aria-hidden="true"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M3 4h2.5l1.5 12.5a1.5 1.5 0 0 0 1.5 1.3h9.4a1.5 1.5 0 0 0 1.5-1.2L21 7H6"
+        />
+        <circle cx="9" cy="20.5" r="1.2" />
+        <circle cx="18" cy="20.5" r="1.2" />
+      </svg>
+      {totalQuantity > 0 && (
+        <span className="absolute -right-0.5 -top-0.5 inline-flex min-w-[1.1rem] items-center justify-center rounded-full bg-[var(--storefront-accent,#0a0a0a)] px-1 text-[10px] font-semibold leading-[1.1rem] text-[var(--storefront-accent-fg,#fff)]">
+          {totalQuantity}
+        </span>
+      )}
+    </Link>
+  )
+}

package/src/frameworks/react/add-ons/shopify/assets/src/lib/shopify/customer-queries.ts.ejs

@@ -0,0 +1,228 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+/**
+ * GraphQL queries for the Shopify Customer Account API.
+ *
+ * The Customer Account API has its own schema, distinct from the Storefront
+ * API. We hand-type the slices we use; if the surface area grows we can wire
+ * up @shopify/customer-account-api-codegen later.
+ */
+
+export const CUSTOMER_QUERY = /* GraphQL */ `
+  query Customer {
+    customer {
+      id
+      firstName
+      lastName
+      emailAddress {
+        emailAddress
+      }
+      phoneNumber {
+        phoneNumber
+      }
+      defaultAddress {
+        id
+        firstName
+        lastName
+        address1
+        address2
+        city
+        zoneCode
+        zip
+        territoryCode
+        phoneNumber
+      }
+    }
+  }
+`
+
+export type CustomerProfile = {
+  id: string
+  firstName: string | null
+  lastName: string | null
+  emailAddress: { emailAddress: string } | null
+  phoneNumber: { phoneNumber: string } | null
+  defaultAddress: CustomerAddress | null
+}
+
+export type CustomerQueryResult = { customer: CustomerProfile }
+
+export type CustomerAddress = {
+  id: string
+  firstName: string | null
+  lastName: string | null
+  address1: string | null
+  address2: string | null
+  city: string | null
+  zoneCode: string | null
+  zip: string | null
+  territoryCode: string | null
+  phoneNumber: string | null
+}
+
+export const CUSTOMER_ADDRESSES_QUERY = /* GraphQL */ `
+  query CustomerAddresses($first: Int!) {
+    customer {
+      addresses(first: $first) {
+        nodes {
+          id
+          firstName
+          lastName
+          address1
+          address2
+          city
+          zoneCode
+          zip
+          territoryCode
+          phoneNumber
+        }
+      }
+      defaultAddress {
+        id
+      }
+    }
+  }
+`
+
+export type CustomerAddressesQueryResult = {
+  customer: {
+    addresses: { nodes: Array<CustomerAddress> }
+    defaultAddress: { id: string } | null
+  }
+}
+
+export const ORDERS_QUERY = /* GraphQL */ `
+  query CustomerOrders($first: Int!, $after: String) {
+    customer {
+      orders(first: $first, after: $after, sortKey: PROCESSED_AT, reverse: true) {
+        nodes {
+          id
+          name
+          processedAt
+          financialStatus
+          fulfillmentStatus
+          totalPrice {
+            amount
+            currencyCode
+          }
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+      }
+    }
+  }
+`
+
+export type OrderListItem = {
+  id: string
+  name: string
+  processedAt: string
+  financialStatus: string | null
+  fulfillmentStatus: string | null
+  totalPrice: { amount: string; currencyCode: string }
+}
+
+export type OrdersQueryResult = {
+  customer: {
+    orders: {
+      nodes: Array<OrderListItem>
+      pageInfo: { hasNextPage: boolean; endCursor: string | null }
+    }
+  }
+}
+
+export const ORDER_QUERY = /* GraphQL */ `
+  query Order($id: ID!) {
+    order(id: $id) {
+      id
+      name
+      processedAt
+      financialStatus
+      fulfillmentStatus
+      totalPrice {
+        amount
+        currencyCode
+      }
+      subtotal {
+        amount
+        currencyCode
+      }
+      totalShipping {
+        amount
+        currencyCode
+      }
+      totalTax {
+        amount
+        currencyCode
+      }
+      shippingAddress {
+        firstName
+        lastName
+        address1
+        address2
+        city
+        zoneCode
+        zip
+        territoryCode
+      }
+      lineItems(first: 50) {
+        nodes {
+          id
+          title
+          quantity
+          variantTitle
+          price {
+            amount
+            currencyCode
+          }
+          image {
+            url
+            altText
+            width
+            height
+          }
+        }
+      }
+    }
+  }
+`
+
+export type OrderDetailLine = {
+  id: string
+  title: string
+  quantity: number
+  variantTitle: string | null
+  price: { amount: string; currencyCode: string }
+  image: {
+    url: string
+    altText: string | null
+    width: number | null
+    height: number | null
+  } | null
+}
+
+export type OrderDetail = {
+  id: string
+  name: string
+  processedAt: string
+  financialStatus: string | null
+  fulfillmentStatus: string | null
+  totalPrice: { amount: string; currencyCode: string }
+  subtotal: { amount: string; currencyCode: string } | null
+  totalShipping: { amount: string; currencyCode: string } | null
+  totalTax: { amount: string; currencyCode: string } | null
+  shippingAddress: {
+    firstName: string | null
+    lastName: string | null
+    address1: string | null
+    address2: string | null
+    city: string | null
+    zoneCode: string | null
+    zip: string | null
+    territoryCode: string | null
+  } | null
+  lineItems: { nodes: Array<OrderDetailLine> }
+}
+
+export type OrderQueryResult = { order: OrderDetail | null }

package/src/frameworks/react/add-ons/shopify/assets/src/lib/shopify/format.ts

@@ -0,0 +1,33 @@
+/**
+ * Browser-safe formatting helpers for Shopify Storefront API responses.
+ * Framework-free — no React, no provider context required.
+ */
+
+export function formatMoney(amount: string | number, currencyCode: string) {
+  return new Intl.NumberFormat(undefined, {
+    style: 'currency',
+    currency: currencyCode,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(typeof amount === 'string' ? Number(amount) : amount)
+}
+
+type ShopifyImageOptions = {
+  width?: number
+  height?: number
+  format?: 'webp' | 'jpg' | 'png'
+  crop?: 'center' | 'top' | 'bottom' | 'left' | 'right'
+}
+
+/**
+ * Append Shopify CDN transform parameters to a product image URL.
+ * Shopify's CDN serves resized/reformatted versions automatically.
+ */
+export function shopifyImageUrl(url: string, opts: ShopifyImageOptions = {}) {
+  const u = new URL(url)
+  if (opts.width) u.searchParams.set('width', String(opts.width))
+  if (opts.height) u.searchParams.set('height', String(opts.height))
+  if (opts.format) u.searchParams.set('format', opts.format)
+  if (opts.crop) u.searchParams.set('crop', opts.crop)
+  return u.toString()
+}