@tanstack/create 0.65.0 → 0.67.0

package/dist/frameworks/react/add-ons/shopify/assets/src/server/shopify/catalog.functions.ts

@@ -0,0 +1,244 @@
+import { createServerFn } from '@tanstack/react-start'
+import { setResponseHeaders } from '@tanstack/react-start/server'
+import * as v from 'valibot'
+
+import { shopifyServerFetch } from '#/server/shopify/storefront-client'
+import {
+  COLLECTION_QUERY,
+  COLLECTIONS_QUERY,
+  PAGE_QUERY,
+  PRODUCT_QUERY,
+  PRODUCTS_QUERY,
+  SEARCH_QUERY,
+  SHOP_POLICIES_QUERY,
+  SHOP_QUERY,
+  flattenPolicies,
+  type CollectionDetail,
+  type CollectionListItem,
+  type CollectionQueryResult,
+  type CollectionsQueryResult,
+  type PageDetail,
+  type PageQueryResult,
+  type PolicySummary,
+  type ProductDetail,
+  type ProductListPage,
+  type ProductQueryResult,
+  type ProductsQueryResult,
+  type ProductsQueryVariables,
+  type SearchQueryResult,
+  type ShopPoliciesQueryResult,
+  type ShopPolicy,
+  type ShopQueryResult,
+} from '#/lib/shopify/queries'
+
+/**
+ * Edge-cache catalog responses for a few minutes. Catalog data doesn't change
+ * often. CDN-Cache-Control is the runtime-portable header (Cloudflare, Vercel,
+ * Netlify all read it); we also set a conservative public Cache-Control so
+ * intermediaries don't cache aggressively without explicit opt-in.
+ */
+function setBrowseCacheHeaders() {
+  setResponseHeaders(
+    new Headers({
+      'Cache-Control': 'public, max-age=0, must-revalidate',
+      'CDN-Cache-Control': 'public, max-age=300, stale-while-revalidate=600',
+    }),
+  )
+}
+
+const productSortKeys = [
+  'BEST_SELLING',
+  'CREATED_AT',
+  'ID',
+  'PRICE',
+  'PRODUCT_TYPE',
+  'RELEVANCE',
+  'TITLE',
+  'UPDATED_AT',
+  'VENDOR',
+] as const
+
+const collectionSortKeys = [
+  'BEST_SELLING',
+  'COLLECTION_DEFAULT',
+  'CREATED',
+  'ID',
+  'MANUAL',
+  'PRICE',
+  'RELEVANCE',
+  'TITLE',
+] as const
+
+export const getShop = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<ShopQueryResult['shop']> => {
+    setBrowseCacheHeaders()
+    const data = await shopifyServerFetch<ShopQueryResult>({ query: SHOP_QUERY })
+    return data.shop
+  },
+)
+
+export const getProducts = createServerFn({ method: 'POST' })
+  .inputValidator(
+    v.object({
+      first: v.optional(v.pipe(v.number(), v.integer(), v.minValue(1)), 24),
+      after: v.optional(v.nullable(v.string())),
+      sortKey: v.optional(v.picklist(productSortKeys)),
+      reverse: v.optional(v.boolean()),
+    }),
+  )
+  .handler(async ({ data }): Promise<ProductListPage> => {
+    setBrowseCacheHeaders()
+    const result = await shopifyServerFetch<
+      ProductsQueryResult,
+      ProductsQueryVariables
+    >({
+      query: PRODUCTS_QUERY,
+      variables: {
+        first: data.first,
+        after: data.after ?? null,
+        sortKey: data.sortKey ?? null,
+        reverse: data.reverse ?? null,
+      },
+    })
+    return result.products
+  })
+
+export const getCollections = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<Array<CollectionListItem>> => {
+    setBrowseCacheHeaders()
+    const result = await shopifyServerFetch<
+      CollectionsQueryResult,
+      { first: number }
+    >({
+      query: COLLECTIONS_QUERY,
+      variables: { first: 50 },
+    })
+    return result.collections.nodes
+  },
+)
+
+export const getProduct = createServerFn({ method: 'POST' })
+  .inputValidator(v.object({ handle: v.string() }))
+  .handler(async ({ data }): Promise<ProductDetail | null> => {
+    setBrowseCacheHeaders()
+    const result = await shopifyServerFetch<
+      ProductQueryResult,
+      { handle: string }
+    >({
+      query: PRODUCT_QUERY,
+      variables: { handle: data.handle },
+    })
+    return result.product
+  })
+
+export const getCollection = createServerFn({ method: 'POST' })
+  .inputValidator(
+    v.object({
+      handle: v.string(),
+      first: v.optional(v.pipe(v.number(), v.integer(), v.minValue(1)), 24),
+      after: v.optional(v.nullable(v.string())),
+      sortKey: v.optional(v.picklist(collectionSortKeys)),
+      reverse: v.optional(v.boolean()),
+    }),
+  )
+  .handler(async ({ data }): Promise<CollectionDetail | null> => {
+    setBrowseCacheHeaders()
+    const result = await shopifyServerFetch<
+      CollectionQueryResult,
+      {
+        handle: string
+        first: number
+        after: string | null
+        sortKey: (typeof collectionSortKeys)[number] | null
+        reverse: boolean | null
+      }
+    >({
+      query: COLLECTION_QUERY,
+      variables: {
+        handle: data.handle,
+        first: data.first,
+        after: data.after ?? null,
+        sortKey: data.sortKey ?? null,
+        reverse: data.reverse ?? null,
+      },
+    })
+    return result.collection
+  })
+
+export const getPage = createServerFn({ method: 'POST' })
+  .inputValidator(v.object({ handle: v.string() }))
+  .handler(async ({ data }): Promise<PageDetail | null> => {
+    setBrowseCacheHeaders()
+    const result = await shopifyServerFetch<
+      PageQueryResult,
+      { handle: string }
+    >({
+      query: PAGE_QUERY,
+      variables: { handle: data.handle },
+    })
+    return result.page
+  })
+
+export const getShopPolicies = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<Array<PolicySummary>> => {
+    setBrowseCacheHeaders()
+    const result = await shopifyServerFetch<ShopPoliciesQueryResult>({
+      query: SHOP_POLICIES_QUERY,
+    })
+    return flattenPolicies(result.shop)
+  },
+)
+
+export const getShopPolicy = createServerFn({ method: 'POST' })
+  .inputValidator(v.object({ handle: v.string() }))
+  .handler(
+    async ({ data }): Promise<{ title: string; body: string; handle: string } | null> => {
+      setBrowseCacheHeaders()
+      const result = await shopifyServerFetch<ShopPoliciesQueryResult>({
+        query: SHOP_POLICIES_QUERY,
+      })
+      const all = [
+        result.shop.privacyPolicy,
+        result.shop.refundPolicy,
+        result.shop.termsOfService,
+        result.shop.shippingPolicy,
+      ].filter((p): p is NonNullable<ShopPolicy> => p !== null)
+      return all.find((p) => p.handle === data.handle) ?? null
+    },
+  )
+
+export const searchProducts = createServerFn({ method: 'POST' })
+  .inputValidator(
+    v.object({
+      query: v.pipe(v.string(), v.minLength(1)),
+      first: v.optional(v.pipe(v.number(), v.integer(), v.minValue(1)), 24),
+      after: v.optional(v.nullable(v.string())),
+    }),
+  )
+  .handler(
+    async ({
+      data,
+    }): Promise<{
+      totalCount: number
+      pageInfo: { hasNextPage: boolean; endCursor: string | null }
+      products: ProductListPage['nodes']
+    }> => {
+      setBrowseCacheHeaders()
+      const result = await shopifyServerFetch<
+        SearchQueryResult,
+        { query: string; first: number; after: string | null }
+      >({
+        query: SEARCH_QUERY,
+        variables: {
+          query: data.query,
+          first: data.first,
+          after: data.after ?? null,
+        },
+      })
+      return {
+        totalCount: result.search.totalCount,
+        pageInfo: result.search.pageInfo,
+        products: result.search.nodes,
+      }
+    },
+  )

package/dist/frameworks/react/add-ons/shopify/assets/src/server/shopify/cookies.ts

@@ -0,0 +1,29 @@
+import {
+  deleteCookie,
+  getCookie,
+  setCookie,
+} from '@tanstack/react-start/server'
+
+export const CART_COOKIE_NAME = 'tanstack_cart_id'
+
+const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365
+
+const cartCookieOptions = () => ({
+  path: '/' as const,
+  maxAge: ONE_YEAR_SECONDS,
+  sameSite: 'lax' as const,
+  httpOnly: true,
+  secure: import.meta.env.PROD,
+})
+
+export function getCartId() {
+  return getCookie(CART_COOKIE_NAME)
+}
+
+export function setCartId(id: string) {
+  setCookie(CART_COOKIE_NAME, id, cartCookieOptions())
+}
+
+export function clearCartId() {
+  deleteCookie(CART_COOKIE_NAME, { path: '/' })
+}

package/dist/frameworks/react/add-ons/shopify/assets/src/server/shopify/customer-client.ts.ejs

@@ -0,0 +1,99 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+import {
+  buildSession,
+  getDiscovery,
+  refreshTokens,
+  signSession,
+  verifySession,
+  type CustomerSession,
+} from '#/server/shopify/oauth'
+import {
+  clearSessionCookie,
+  getSessionCookie,
+  setSessionCookie,
+} from '#/server/shopify/customer-cookies'
+
+const REFRESH_LEEWAY_MS = 60_000 // refresh if expiring within 60s
+
+class CustomerAuthError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'CustomerAuthError'
+  }
+}
+
+/**
+ * Read the current customer session, refreshing tokens if they're close to
+ * expiry. Returns null when the user is not signed in.
+ */
+export async function getCustomerSession(): Promise<CustomerSession | null> {
+  const cookie = getSessionCookie()
+  if (!cookie) return null
+
+  const session = await verifySession(cookie)
+  if (!session) {
+    clearSessionCookie()
+    return null
+  }
+
+  if (session.expiresAt - REFRESH_LEEWAY_MS > Date.now()) {
+    return session
+  }
+
+  // Token expired or near-expiry — refresh.
+  try {
+    const refreshed = await refreshTokens(session.refreshToken)
+    const next = buildSession(refreshed)
+    setSessionCookie(await signSession(next))
+    return next
+  } catch {
+    clearSessionCookie()
+    return null
+  }
+}
+
+export async function requireCustomerSession(): Promise<CustomerSession> {
+  const session = await getCustomerSession()
+  if (!session) throw new CustomerAuthError('Not signed in')
+  return session
+}
+
+type CustomerFetchInput<TVariables> = {
+  query: string
+  variables?: TVariables
+  session: CustomerSession
+}
+
+type CustomerResponse<TData> = {
+  data?: TData
+  errors?: Array<{ message: string }>
+}
+
+/**
+ * Authenticated GraphQL fetch against the Customer Account API. Caller must
+ * pass a verified session (obtained via getCustomerSession).
+ */
+export async function customerFetch<TData, TVariables = Record<string, unknown>>(
+  input: CustomerFetchInput<TVariables>,
+): Promise<TData> {
+  const discovery = await getDiscovery()
+  const res = await fetch(discovery.graphqlEndpoint, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: input.session.accessToken,
+    },
+    body: JSON.stringify({ query: input.query, variables: input.variables }),
+  })
+  if (!res.ok) {
+    throw new Error(
+      `Customer Account API error: ${res.status} ${res.statusText}`,
+    )
+  }
+  const json = (await res.json()) as CustomerResponse<TData>
+  if (json.errors?.length) {
+    throw new Error(json.errors.map((e) => e.message).join('\n'))
+  }
+  if (!json.data) throw new Error('Customer Account API returned no data.')
+  return json.data
+}

package/dist/frameworks/react/add-ons/shopify/assets/src/server/shopify/customer-cookies.ts.ejs

@@ -0,0 +1,49 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+import {
+  deleteCookie,
+  getCookie,
+  setCookie,
+} from '@tanstack/react-start/server'
+
+const SESSION_COOKIE = 'shopify_customer_session'
+const FLIGHT_COOKIE = 'shopify_oauth_state'
+
+const sessionCookieOptions = () => ({
+  path: '/' as const,
+  maxAge: 60 * 60 * 24 * 30, // 30 days
+  sameSite: 'lax' as const,
+  httpOnly: true,
+  secure: import.meta.env.PROD,
+})
+
+const flightCookieOptions = () => ({
+  path: '/' as const,
+  maxAge: 60 * 10, // 10 min
+  sameSite: 'lax' as const,
+  httpOnly: true,
+  secure: import.meta.env.PROD,
+})
+
+export function getSessionCookie() {
+  return getCookie(SESSION_COOKIE)
+}
+
+export function setSessionCookie(value: string) {
+  setCookie(SESSION_COOKIE, value, sessionCookieOptions())
+}
+
+export function clearSessionCookie() {
+  deleteCookie(SESSION_COOKIE, { path: '/' })
+}
+
+export function getFlightCookie() {
+  return getCookie(FLIGHT_COOKIE)
+}
+
+export function setFlightCookie(value: string) {
+  setCookie(FLIGHT_COOKIE, value, flightCookieOptions())
+}
+
+export function clearFlightCookie() {
+  deleteCookie(FLIGHT_COOKIE, { path: '/' })
+}

package/dist/frameworks/react/add-ons/shopify/assets/src/server/shopify/customer.functions.ts.ejs

@@ -0,0 +1,168 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+import { createServerFn } from '@tanstack/react-start'
+import { setResponseHeaders } from '@tanstack/react-start/server'
+import * as v from 'valibot'
+
+import {
+  customerFetch,
+  getCustomerSession,
+  requireCustomerSession,
+} from '#/server/shopify/customer-client'
+import {
+  clearFlightCookie,
+  clearSessionCookie,
+  getFlightCookie,
+  setFlightCookie,
+  setSessionCookie,
+} from '#/server/shopify/customer-cookies'
+import {
+  buildAuthorizationUrl,
+  buildEndSessionUrl,
+  buildSession,
+  createPkcePair,
+  createState,
+  exchangeCodeForTokens,
+  signFlightState,
+  signSession,
+  verifyFlightState,
+} from '#/server/shopify/oauth'
+import {
+  CUSTOMER_ADDRESSES_QUERY,
+  CUSTOMER_QUERY,
+  ORDER_QUERY,
+  ORDERS_QUERY,
+  type CustomerAddress,
+  type CustomerAddressesQueryResult,
+  type CustomerProfile,
+  type CustomerQueryResult,
+  type OrderDetail,
+  type OrderListItem,
+  type OrderQueryResult,
+  type OrdersQueryResult,
+} from '#/lib/shopify/customer-queries'
+
+function setPrivateHeaders() {
+  setResponseHeaders(
+    new Headers({ 'Cache-Control': 'private, no-store, must-revalidate' }),
+  )
+}
+
+export const startLogin = createServerFn({ method: 'POST' })
+  .inputValidator(
+    v.object({
+      redirectAfter: v.optional(v.string(), '/shop/account'),
+    }),
+  )
+  .handler(async ({ data }): Promise<{ authorizationUrl: string }> => {
+    setPrivateHeaders()
+    const { codeVerifier, codeChallenge } = await createPkcePair()
+    const state = createState()
+    const flight = await signFlightState({
+      state,
+      codeVerifier,
+      redirectAfter: data.redirectAfter,
+    })
+    setFlightCookie(flight)
+    const authorizationUrl = await buildAuthorizationUrl({ state, codeChallenge })
+    return { authorizationUrl }
+  })
+
+export const completeLogin = createServerFn({ method: 'POST' })
+  .inputValidator(v.object({ code: v.string(), state: v.string() }))
+  .handler(async ({ data }): Promise<{ redirectAfter: string }> => {
+    setPrivateHeaders()
+    const flightCookie = getFlightCookie()
+    if (!flightCookie) throw new Error('OAuth flight cookie missing or expired.')
+    const flight = await verifyFlightState(flightCookie)
+    if (!flight) throw new Error('OAuth flight cookie failed verification.')
+    if (flight.state !== data.state) throw new Error('OAuth state mismatch.')
+
+    const tokens = await exchangeCodeForTokens({
+      code: data.code,
+      codeVerifier: flight.codeVerifier,
+    })
+    const session = buildSession(tokens)
+    setSessionCookie(await signSession(session))
+    clearFlightCookie()
+    return { redirectAfter: flight.redirectAfter }
+  })
+
+export const logout = createServerFn({ method: 'POST' }).handler(
+  async (): Promise<{ endSessionUrl: string | null }> => {
+    setPrivateHeaders()
+    const session = await getCustomerSession()
+    clearSessionCookie()
+    if (!session) return { endSessionUrl: null }
+    return { endSessionUrl: await buildEndSessionUrl(session.idToken) }
+  },
+)
+
+export const getCustomer = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<CustomerProfile | null> => {
+    setPrivateHeaders()
+    const session = await getCustomerSession()
+    if (!session) return null
+    const result = await customerFetch<CustomerQueryResult>({
+      query: CUSTOMER_QUERY,
+      session,
+    })
+    return result.customer
+  },
+)
+
+export const getOrders = createServerFn({ method: 'POST' })
+  .inputValidator(
+    v.object({
+      first: v.optional(v.pipe(v.number(), v.integer(), v.minValue(1)), 20),
+      after: v.optional(v.nullable(v.string())),
+    }),
+  )
+  .handler(
+    async ({
+      data,
+    }): Promise<{
+      nodes: Array<OrderListItem>
+      pageInfo: { hasNextPage: boolean; endCursor: string | null }
+    }> => {
+      setPrivateHeaders()
+      const session = await requireCustomerSession()
+      const result = await customerFetch<OrdersQueryResult>({
+        query: ORDERS_QUERY,
+        variables: { first: data.first, after: data.after ?? null },
+        session,
+      })
+      return result.customer.orders
+    },
+  )
+
+export const getOrder = createServerFn({ method: 'POST' })
+  .inputValidator(v.object({ id: v.string() }))
+  .handler(async ({ data }): Promise<OrderDetail | null> => {
+    setPrivateHeaders()
+    const session = await requireCustomerSession()
+    const result = await customerFetch<OrderQueryResult>({
+      query: ORDER_QUERY,
+      variables: { id: data.id },
+      session,
+    })
+    return result.order
+  })
+
+export const getAddresses = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<{
+    addresses: Array<CustomerAddress>
+    defaultAddressId: string | null
+  }> => {
+    setPrivateHeaders()
+    const session = await requireCustomerSession()
+    const result = await customerFetch<CustomerAddressesQueryResult>({
+      query: CUSTOMER_ADDRESSES_QUERY,
+      variables: { first: 50 },
+      session,
+    })
+    return {
+      addresses: result.customer.addresses.nodes,
+      defaultAddressId: result.customer.defaultAddress?.id ?? null,
+    }
+  },
+)

package/dist/frameworks/react/add-ons/shopify/assets/src/server/shopify/env.ts

@@ -0,0 +1,89 @@
+import * as v from 'valibot'
+
+/**
+ * Defaults point to Shopify's public Hydrogen demo store so the storefront
+ * works on first run with zero setup. Override by setting the matching env
+ * vars in .env.local (or the deploy target's env config).
+ *
+ * Note: we don't rely on Vite's .env loading reaching `process.env` at runtime
+ * — different runtimes handle that differently. Reading .env.local through
+ * `process.env` works on most adapters; falling back to the demo values keeps
+ * the first-run experience unbroken when it doesn't.
+ */
+const DEMO_STORE_DOMAIN = 'hydrogen-preview.myshopify.com'
+const DEMO_API_VERSION = '2026-01'
+const DEMO_PUBLIC_TOKEN = '3b580e70970c4528da70c98e097c2fa0'
+
+const StorefrontEnvSchema = v.object({
+  SHOPIFY_STORE_DOMAIN: v.pipe(v.string(), v.minLength(1)),
+  SHOPIFY_STOREFRONT_API_VERSION: v.pipe(v.string(), v.minLength(1)),
+  SHOPIFY_PUBLIC_STOREFRONT_TOKEN: v.optional(v.string()),
+  SHOPIFY_PRIVATE_STOREFRONT_TOKEN: v.optional(v.string()),
+})
+
+const CustomerEnvSchema = v.object({
+  SHOPIFY_CUSTOMER_ACCOUNT_CLIENT_ID: v.pipe(
+    v.string(),
+    v.minLength(1, 'SHOPIFY_CUSTOMER_ACCOUNT_CLIENT_ID is required for customer accounts'),
+  ),
+  SHOPIFY_CUSTOMER_ACCOUNT_SHOP_ID: v.pipe(
+    v.string(),
+    v.minLength(1, 'SHOPIFY_CUSTOMER_ACCOUNT_SHOP_ID is required for customer accounts'),
+  ),
+  SHOPIFY_CUSTOMER_ACCOUNT_REDIRECT_URI: v.pipe(
+    v.string(),
+    v.url('SHOPIFY_CUSTOMER_ACCOUNT_REDIRECT_URI must be a valid URL'),
+  ),
+  SHOPIFY_SESSION_SECRET: v.pipe(
+    v.string(),
+    v.minLength(32, 'SHOPIFY_SESSION_SECRET must be at least 32 characters'),
+  ),
+})
+
+let cachedStorefront: v.InferOutput<typeof StorefrontEnvSchema> | null = null
+let cachedCustomer: v.InferOutput<typeof CustomerEnvSchema> | null = null
+
+function readEnv(name: string): string | undefined {
+  // process.env on most server runtimes; falls back to undefined on edge
+  // workers where process.env doesn't exist.
+  if (typeof process !== 'undefined' && process.env) {
+    const value = process.env[name]
+    if (value && value.length > 0) return value
+  }
+  return undefined
+}
+
+export function getStorefrontEnv() {
+  if (cachedStorefront) return cachedStorefront
+  cachedStorefront = v.parse(StorefrontEnvSchema, {
+    SHOPIFY_STORE_DOMAIN: readEnv('SHOPIFY_STORE_DOMAIN') ?? DEMO_STORE_DOMAIN,
+    SHOPIFY_STOREFRONT_API_VERSION:
+      readEnv('SHOPIFY_STOREFRONT_API_VERSION') ?? DEMO_API_VERSION,
+    SHOPIFY_PUBLIC_STOREFRONT_TOKEN:
+      readEnv('SHOPIFY_PUBLIC_STOREFRONT_TOKEN') ?? DEMO_PUBLIC_TOKEN,
+    SHOPIFY_PRIVATE_STOREFRONT_TOKEN: readEnv('SHOPIFY_PRIVATE_STOREFRONT_TOKEN'),
+  })
+  return cachedStorefront
+}
+
+export function getCustomerEnv() {
+  if (cachedCustomer) return cachedCustomer
+  cachedCustomer = v.parse(CustomerEnvSchema, {
+    SHOPIFY_CUSTOMER_ACCOUNT_CLIENT_ID: readEnv('SHOPIFY_CUSTOMER_ACCOUNT_CLIENT_ID'),
+    SHOPIFY_CUSTOMER_ACCOUNT_SHOP_ID: readEnv('SHOPIFY_CUSTOMER_ACCOUNT_SHOP_ID'),
+    SHOPIFY_CUSTOMER_ACCOUNT_REDIRECT_URI:
+      readEnv('SHOPIFY_CUSTOMER_ACCOUNT_REDIRECT_URI') ??
+      'http://localhost:3000/shop/account/callback',
+    SHOPIFY_SESSION_SECRET: readEnv('SHOPIFY_SESSION_SECRET'),
+  })
+  return cachedCustomer
+}
+
+export function isCustomerAccountConfigured() {
+  try {
+    getCustomerEnv()
+    return true
+  } catch {
+    return false
+  }
+}