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

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

import {useCallback} from 'react'

import {ShopActionResult} from '@shopify/shop-minis-platform/actions'
import {useQuery} from '@tanstack/react-query'

import {DataHookFetchPolicy} from '../../types'

import {useShopMinisQueryClient} from './queryClient'

/**
 * Helper to use React Query with Shop Actions (non-paginated)
 * Replaces useShopActionsDataFetching
 *
 * @example
 * ```ts
 * const { data, loading, error, refetch } = useShopActionQuery(
 *   ['product', id],
 *   getProduct,
 *   { id },
 *   { skip: false }
 * )
 * ```
 */
export function useShopActionQuery<
  TData,
  TParams extends {fetchPolicy?: DataHookFetchPolicy},
>(
  queryKey: unknown[],
  action: (params: TParams) => Promise<ShopActionResult<{data: TData}>>,
  params: TParams,
  options?: {
    skip?: boolean
  }
) {
  const {skip = false} = options ?? {}

  // Always use our SDK's QueryClient for isolation
  const queryClient = useShopMinisQueryClient()

  const {
    data,
    error,
    isLoading,
    refetch: reactQueryRefetch,
  } = useQuery(
    {
      queryKey,
      queryFn: async () => {
        const result = await action(params)

        if (!result.ok) {
          throw result.error
        }

        return result.data.data
      },
      enabled: !skip,
      // Caching disabled by default (handled by Apollo)
      // fetchPolicy param is passed through to the action (Apollo layer)
    },
    queryClient
  )

  const refetch = useCallback(async () => {
    await reactQueryRefetch()
  }, [reactQueryRefetch])

  return {
    data: data ?? null,
    loading: isLoading,
    error: error as Error | null,
    refetch,
  }
}