@shopify/shop-minis-react 0.3.4 → 0.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -45,6 +45,7 @@
   "dependencies": {
     "@shopify/shop-minis-platform": "0.8.0",
     "@tailwindcss/vite": "4.1.8",
+    "@tanstack/react-query": "5.86.0",
     "@types/color": "3.0.6",
     "@types/lodash": "4.17.20",
     "@types/react-window": "1.8.8",
@@ -80,8 +81,6 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.54.2",
-    "@storybook/addon-docs": "^9.0.16",
-    "@storybook/react-vite": "^9.0.16",
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
@@ -90,12 +89,10 @@
     "@types/react-dom": "^19.1.2",
     "@vitest/coverage-v8": "^2.1.8",
     "@vitest/ui": "^2.1.8",
-    "eslint-plugin-storybook": "^9.0.16",
     "jsdom": "^25.0.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "serve": "^14.2.4",
-    "storybook": "^9.0.16",
     "typescript": "^5.8.3",
     "vite": "^6.3.3",
     "vite-plugin-dts": "^4.3.0",
@@ -125,8 +122,6 @@
     "build:watch": "vite build --mode lib --watch",
     "type-check": "tsc --noEmit",
     "clean": "rm -rf dist",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build -o ../../web/public/minis-playground",
     "lint": "eslint . --format codeframe --cache",
     "lint:fix": "eslint . --format codeframe --cache --fix",
     "test": "vitest",

package/src/components/MinisContainer.tsx

@@ -2,6 +2,7 @@ import React, {useCallback, useEffect, useState} from 'react'
 
 import {ReportErrorParams} from '@shopify/shop-minis-platform/actions'
 
+import {MinisQueryProvider} from '../internal/reactQuery'
 import {useShopActions} from '../internal/useShopActions'
 import {injectMocks} from '../mocks'
 import {ImagePickerProvider} from '../providers/ImagePickerProvider'
@@ -84,8 +85,10 @@ export function MinisContainer({children}: {children: React.ReactNode}) {
   }
 
   return (
-    <ErrorBoundary onError={handleError}>
-      <ImagePickerProvider>{children}</ImagePickerProvider>
-    </ErrorBoundary>
+    <MinisQueryProvider>
+      <ErrorBoundary onError={handleError}>
+        <ImagePickerProvider>{children}</ImagePickerProvider>
+      </ErrorBoundary>
+    </MinisQueryProvider>
   )
 }

package/src/hooks/content/useContent.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
 import {
   Content,
   ContentIdentifierInput,
@@ -27,24 +25,15 @@ export const useContent = (params: UseContentParams): UseContentReturns => {
   const {getContent} = useShopActions()
   const {identifiers, skip = false, ...restParams} = params
 
-  const {data, ...rest} = useShopActionsDataFetching(
+  const {data, ...rest} = useShopActionQuery(
+    ['content', identifiers, restParams],
     getContent,
-    {
-      identifiers,
-      ...restParams,
-    },
-    {
-      skip,
-      hook: 'useContent',
-    }
+    {identifiers, ...restParams},
+    {skip}
   )
 
-  const content = useMemo(() => {
-    return data ?? null
-  }, [data])
-
   return {
     ...rest,
-    content,
+    content: data,
   }
 }

package/src/hooks/product/useCuratedProducts.ts

@@ -1,5 +1,5 @@
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   Product,
   PaginatedDataHookOptionsBase,
@@ -25,13 +25,11 @@ export const useCuratedProducts = (
   const {getCuratedProducts} = useShopActions()
   const {skip, ...shopActionParams} = params ?? {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['curatedProducts', shopActionParams],
     getCuratedProducts,
     shopActionParams,
-    {
-      skip,
-      hook: 'useCuratedProducts',
-    }
+    {skip}
   )
 
   return {

package/src/hooks/product/usePopularProducts.ts

@@ -1,5 +1,5 @@
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   Product,
   PaginatedDataHookOptionsBase,
@@ -21,13 +21,11 @@ export const usePopularProducts = (
   const {getPopularProducts} = useShopActions()
   const {skip, ...shopActionParams} = params ?? {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['popularProducts', shopActionParams],
     getPopularProducts,
     shopActionParams,
-    {
-      skip,
-      hook: 'usePopularProducts',
-    }
+    {skip}
   )
 
   return {

package/src/hooks/product/useProduct.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
 import {DataHookOptionsBase, DataHookReturnsBase, Product} from '../../types'
 
 export interface UseProductParams extends DataHookOptionsBase {
@@ -22,24 +20,15 @@ export const useProduct = (params: UseProductParams): UseProductReturns => {
   const {getProduct} = useShopActions()
   const {id, skip = false, ...restParams} = params
 
-  const {data, ...rest} = useShopActionsDataFetching(
+  const {data, ...rest} = useShopActionQuery(
+    ['product', id, restParams],
     getProduct,
-    {
-      id,
-      ...restParams,
-    },
-    {
-      skip,
-      hook: 'useProduct',
-    }
+    {id, ...restParams},
+    {skip}
   )
 
-  const product = useMemo(() => {
-    return data ?? null
-  }, [data])
-
   return {
     ...rest,
-    product,
+    product: data,
   }
 }

package/src/hooks/product/useProductList.ts

@@ -1,13 +1,10 @@
-import {useCallback} from 'react'
-
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   ProductList,
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
 } from '../../types'
-import {MiniEntityNotFoundError} from '../../utils/errors'
 
 interface UseProductListParams extends PaginatedDataHookOptionsBase {
   /**
@@ -30,23 +27,11 @@ export const useProductList = (
   const {getProductList} = useShopActions()
   const {skip, ...shopActionParams} = params ?? {}
 
-  const validator = useCallback((data: ProductList | null) => {
-    if (data === null) {
-      throw new MiniEntityNotFoundError({
-        hook: 'useProductList',
-        message: 'Product list not found',
-      })
-    }
-  }, [])
-
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['productList', shopActionParams],
     getProductList,
     shopActionParams,
-    {
-      skip,
-      hook: 'useProductList',
-      validator,
-    }
+    {skip}
   )
 
   return {

package/src/hooks/product/useProductLists.ts

@@ -1,5 +1,5 @@
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -23,13 +23,11 @@ export const useProductLists = (
   const {getProductLists} = useShopActions()
   const {skip, ...shopActionParams} = params ?? {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['productLists', shopActionParams],
     getProductLists,
     shopActionParams,
-    {
-      skip,
-      hook: 'useProductLists',
-    }
+    {skip}
   )
 
   return {

package/src/hooks/product/useProductMedia.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -28,24 +26,15 @@ export const useProductMedia = (
   const {getProductMedia} = useShopActions()
   const {id, skip = false, ...restParams} = params
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['productMedia', id, restParams],
     getProductMedia,
-    {
-      id,
-      ...restParams,
-    },
-    {
-      skip,
-      hook: 'useProductMedia',
-    }
+    {id, ...restParams},
+    {skip}
   )
 
-  const media = useMemo(() => {
-    return data ?? null
-  }, [data])
-
   return {
     ...rest,
-    media,
+    media: data,
   }
 }

package/src/hooks/product/useProductSearch.ts

@@ -1,9 +1,9 @@
-import {useCallback, useEffect, useMemo, useState} from 'react'
+import {useCallback, useEffect, useState} from 'react'
 
 import debounce from 'lodash/debounce'
 
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -60,7 +60,11 @@ export const useProductSearch = (
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedSetQuery = useCallback(
     debounce((newQuery: string) => {
-      setDebouncedQuery(newQuery)
+      setDebouncedQuery(prev => {
+        // Only update if the query actually changed
+        if (prev === newQuery) return prev
+        return newQuery
+      })
     }, 300),
     []
   )
@@ -73,7 +77,16 @@ export const useProductSearch = (
     }
   }, [query, debouncedSetQuery])
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  // Use our Shop Action infinite query helper
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    [
+      'productSearch',
+      debouncedQuery,
+      filters,
+      sortBy,
+      includeSensitive,
+      restParams,
+    ],
     getProductSearch,
     {
       query: debouncedQuery,
@@ -83,22 +96,13 @@ export const useProductSearch = (
       ...restParams,
     },
     {
-      skip,
-      hook: 'useProductSearch',
+      skip: skip || debouncedQuery.trim().length === 0,
     }
   )
 
-  const products = useMemo(() => {
-    if (debouncedQuery.trim().length === 0) {
-      return null
-    }
-
-    return data ?? null
-  }, [data, debouncedQuery])
-
   return {
     ...rest,
-    products,
+    products: data,
     isTyping: debouncedQuery !== query,
   }
 }

package/src/hooks/product/useProductVariants.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -28,21 +26,15 @@ export const useProductVariants = (
   const {getProductVariants} = useShopActions()
   const {skip = false, ...restParams} = params
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['productVariants', restParams],
     getProductVariants,
     restParams,
-    {
-      skip,
-      hook: 'useProductVariants',
-    }
+    {skip}
   )
 
-  const variants = useMemo(() => {
-    return data ?? null
-  }, [data])
-
   return {
     ...rest,
-    variants,
+    variants: data,
   }
 }

package/src/hooks/product/useProducts.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
 import {DataHookOptionsBase, DataHookReturnsBase, Product} from '../../types'
 
 export interface UseProductsParams extends DataHookOptionsBase {
@@ -22,17 +20,15 @@ export const useProducts = (params: UseProductsParams): UseProductsReturns => {
   const {getProducts} = useShopActions()
   const {skip = false, ...restParams} = params
 
-  const {data, ...rest} = useShopActionsDataFetching(getProducts, restParams, {
-    skip,
-    hook: 'useProducts',
-  })
-
-  const products = useMemo(() => {
-    return data ?? null
-  }, [data])
+  const {data, ...rest} = useShopActionQuery(
+    ['products', restParams],
+    getProducts,
+    restParams,
+    {skip}
+  )
 
   return {
     ...rest,
-    products,
+    products: data,
   }
 }

package/src/hooks/product/useRecommendedProducts.ts

@@ -1,5 +1,5 @@
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   Product,
   PaginatedDataHookOptionsBase,
@@ -21,13 +21,11 @@ export const useRecommendedProducts = (
   const {getRecommendedProducts} = useShopActions()
   const {skip, ...shopActionParams} = params ?? {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['recommendedProducts', shopActionParams],
     getRecommendedProducts,
     shopActionParams,
-    {
-      skip,
-      hook: 'useRecommendedProducts',
-    }
+    {skip}
   )
 
   return {

package/src/hooks/shop/useRecommendedShops.ts

@@ -1,7 +1,7 @@
 import {useMemo} from 'react'
 
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   Shop,
   PaginatedDataHookOptionsBase,
@@ -21,13 +21,11 @@ export const useRecommendedShops = (
 
   const {skip, ...shopActionParamsToPass} = params || {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['recommendedShops', shopActionParamsToPass],
     getRecommendedShops,
     shopActionParamsToPass,
-    {
-      skip,
-      hook: 'useRecommendedShops',
-    }
+    {skip}
   )
 
   const shops = useMemo(() => {

package/src/hooks/shop/useShop.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
 import {DataHookOptionsBase, DataHookReturnsBase, Shop} from '../../types'
 
 export interface UseShopParams extends DataHookOptionsBase {
@@ -22,17 +20,15 @@ export const useShop = (params: UseShopParams): UseShopReturns => {
   const {getShop} = useShopActions()
   const {skip = false, ...restParams} = params
 
-  const {data, ...rest} = useShopActionsDataFetching(getShop, restParams, {
-    skip,
-    hook: 'useShop',
-  })
-
-  const shop = useMemo(() => {
-    return data ?? null
-  }, [data])
+  const {data, ...rest} = useShopActionQuery(
+    ['shop', restParams],
+    getShop,
+    restParams,
+    {skip}
+  )
 
   return {
     ...rest,
-    shop,
+    shop: data,
   }
 }

package/src/hooks/user/useBuyerAttributes.ts

@@ -1,5 +1,5 @@
+import {useShopActionQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
 import {
   DataHookOptionsBase,
   DataHookReturnsBase,
@@ -18,13 +18,11 @@ export const useBuyerAttributes = (
   const {skip, ...shopActionParams} = params || {}
   const {getBuyerAttributes} = useShopActions()
 
-  const {data, ...rest} = useShopActionsDataFetching(
+  const {data, ...rest} = useShopActionQuery(
+    ['buyerAttributes', shopActionParams],
     getBuyerAttributes,
     shopActionParams,
-    {
-      skip,
-      hook: 'useBuyerAttributes',
-    }
+    {skip}
   )
 
   return {

package/src/hooks/user/useCurrentUser.ts

@@ -1,5 +1,5 @@
+import {useShopActionQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
 import {
   DataHookOptionsBase,
   DataHookReturnsBase,
@@ -24,13 +24,11 @@ export const useCurrentUser = (
   const {skip, ...shopActionParams} = params || {}
   const {getCurrentUser} = useShopActions()
 
-  const {data, ...rest} = useShopActionsDataFetching(
+  const {data, ...rest} = useShopActionQuery(
+    ['currentUser', shopActionParams],
     getCurrentUser,
     shopActionParams,
-    {
-      skip,
-      hook: 'useCurrentUser',
-    }
+    {skip}
   )
 
   return {

package/src/hooks/user/useFollowedShops.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -23,21 +21,15 @@ export const useFollowedShops = (
   const {getFollowedShops} = useShopActions()
   const {skip = false, ...restParams} = params ?? {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['followedShops', restParams],
     getFollowedShops,
     restParams,
-    {
-      skip,
-      hook: 'useFollowedShops',
-    }
+    {skip}
   )
 
-  const shops = useMemo(() => {
-    return data ?? null
-  }, [data])
-
   return {
     ...rest,
-    shops,
+    shops: data,
   }
 }

package/src/hooks/user/useOrders.ts

@@ -1,5 +1,5 @@
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -16,13 +16,11 @@ export const useOrders = (params?: UseOrdersParams): UseOrdersReturns => {
   const {skip, ...shopActionParams} = params || {}
   const {getOrders} = useShopActions()
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['orders', shopActionParams],
     getOrders,
     shopActionParams,
-    {
-      skip,
-      hook: 'useOrders',
-    }
+    {skip}
   )
 
   return {

package/src/hooks/user/useRecentProducts.ts

@@ -1,7 +1,7 @@
 import {useMemo} from 'react'
 
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   PaginatedDataHookOptionsBase,
   PaginatedDataHookReturnsBase,
@@ -26,13 +26,11 @@ export const useRecentProducts = (
   const {getRecentProducts} = useShopActions()
   const {skip, ...shopActionParams} = params ?? {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['recentProducts', shopActionParams],
     getRecentProducts,
     shopActionParams,
-    {
-      skip,
-      hook: 'useRecentProducts',
-    }
+    {skip}
   )
 
   const products = useMemo(() => {