@shopify/shop-minis-react/src/internal/reactQuery/queryClient.ts

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import {createContext, useContext} from 'react'

import {QueryClient} from '@tanstack/react-query'

/**
 * Custom QueryClient context for Shop Minis SDK
 * This ensures our SDK always uses its own QueryClient,
 * even if the parent app has their own QueryClientProvider
 */
export const ShopMinisQueryClientContext = createContext<QueryClient | null>(
  null
)

export function useShopMinisQueryClient(): QueryClient {
  const client = useContext(ShopMinisQueryClientContext)
  if (!client) {
    throw new Error(
      'Shop Minis hooks must be used within <MinisContainer> or <MinisQueryProvider>. ' +
        'Wrap your component tree with one of these providers.'
    )
  }
  return client
}

/**
 * Create a QueryClient instance for Shop Minis SDK
 * Isolated from any parent app's QueryClient
 *
 * Caching is disabled by default since Apollo provides the cache layer.
 * React Query only provides request deduplication and state management.
 */
export function createShopMinisQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 0, // Data is immediately stale
        gcTime: 0, // Don't keep in cache after component unmounts
        retry: 1,
        refetchOnWindowFocus: false,
      },
    },
  })
}