@shopify/shop-minis-react 0.3.2 → 0.4.0

package/src/internal/reactQuery/useShopActionInfiniteQuery.ts

@@ -0,0 +1,129 @@
+import {useCallback, useMemo} from 'react'
+
+import {ShopActionResult} from '@shopify/shop-minis-platform/actions'
+import {useInfiniteQuery} from '@tanstack/react-query'
+
+import {DataHookFetchPolicy} from '../../types'
+
+import {useShopMinisQueryClient} from './queryClient'
+
+/**
+ * Helper to use React Query with Shop Actions (paginated)
+ * Replaces useShopActionsPaginatedDataFetching
+ *
+ * @example
+ * ```ts
+ * // Example: Fetching saved products
+ * const { getSavedProducts } = useShopActions()
+ * const { data, loading, error, hasNextPage, fetchMore, refetch } =
+ *   useShopActionInfiniteQuery(
+ *     ['savedProducts', { includeSensitive }],  // Query key
+ *     getSavedProducts,                          // Shop Action
+ *     { includeSensitive },                      // Params (excludes 'after')
+ *     { skip: false }                            // Options
+ *   )
+ * // data will be flattened array of products from all pages
+ * ```
+ */
+export function useShopActionInfiniteQuery<
+  TData,
+  TParams extends {after?: string; fetchPolicy?: DataHookFetchPolicy},
+>(
+  queryKey: unknown[],
+  action: (params: TParams) => Promise<
+    ShopActionResult<{
+      data: TData
+      pageInfo: {hasNextPage: boolean; endCursor: string | null}
+    }>
+  >,
+  params: Omit<TParams, 'after'>,
+  options?: {
+    skip?: boolean
+  }
+) {
+  const {skip = false} = options ?? {}
+
+  // Always use our SDK's QueryClient for isolation
+  const queryClient = useShopMinisQueryClient()
+
+  interface PageData {
+    data: TData
+    pageInfo: {hasNextPage: boolean; endCursor: string | null}
+  }
+
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isLoading,
+    error,
+    refetch: reactQueryRefetch,
+  } = useInfiniteQuery<
+    PageData,
+    Error,
+    {pages: PageData[]},
+    unknown[],
+    string | undefined
+  >(
+    {
+      queryKey,
+      queryFn: async ({pageParam}: {pageParam: string | undefined}) => {
+        const result = await action({
+          ...params,
+          after: pageParam,
+        } as TParams)
+
+        if (!result.ok) {
+          throw result.error
+        }
+
+        return result.data
+      },
+      getNextPageParam: (lastPage: PageData) =>
+        lastPage.pageInfo.hasNextPage ? lastPage.pageInfo.endCursor : undefined,
+      initialPageParam: undefined as string | undefined,
+      enabled: !skip,
+      // Caching disabled by default (handled by Apollo)
+      // fetchPolicy param is passed through to the action (Apollo layer)
+    },
+    queryClient
+  )
+
+  // Flatten paginated data
+  // For paginated queries, we expect TData to be an array type
+  // Each page.data is an array that we concatenate together
+  const flattenedData = useMemo(() => {
+    if (!data?.pages || data.pages.length === 0) return null
+
+    // If first page data is null/undefined, return null
+    const firstPageData = data.pages[0].data
+    if (firstPageData === null || firstPageData === undefined) return null
+
+    // If data is array type, flatten all pages
+    if (Array.isArray(firstPageData)) {
+      return data.pages.flatMap((page: PageData) => page.data as any) as TData
+    }
+
+    // If data is not an array, just return the first page's data
+    // (Though in practice, all Shop Minis paginated queries return arrays)
+    return firstPageData as TData
+  }, [data?.pages])
+
+  // Wrap React Query functions to match expected API
+  const fetchMore = useCallback(async () => {
+    await fetchNextPage()
+  }, [fetchNextPage])
+
+  const refetch = useCallback(async () => {
+    await reactQueryRefetch()
+  }, [reactQueryRefetch])
+
+  return {
+    data: flattenedData,
+    loading: isLoading,
+    error: error as Error | null,
+    hasNextPage: hasNextPage ?? false,
+    fetchMore,
+    refetch,
+  }
+}

package/src/internal/reactQuery/useShopActionQuery.test.tsx

@@ -0,0 +1,184 @@
+import React from 'react'
+
+import {renderHook, waitFor} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
+
+import {MinisQueryProvider} from './MinisQueryProvider'
+import {useShopActionQuery} from './useShopActionQuery'
+
+describe('useShopActionQuery', () => {
+  const wrapper = ({children}: {children: React.ReactNode}) => (
+    <MinisQueryProvider>{children}</MinisQueryProvider>
+  )
+
+  describe('Successful Data Fetching', () => {
+    it('fetches and returns data', async () => {
+      const mockAction = vi.fn().mockResolvedValue({
+        ok: true,
+        data: {data: {id: '1', name: 'Test Product'}},
+      })
+
+      const {result} = renderHook(
+        () => useShopActionQuery(['test-1'], mockAction, {}),
+        {wrapper}
+      )
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false)
+      })
+
+      expect(result.current.data).toEqual({id: '1', name: 'Test Product'})
+      expect(result.current.error).toBeNull()
+      expect(mockAction).toHaveBeenCalledWith({})
+    })
+
+    it('returns null when data is undefined', async () => {
+      const mockAction = vi.fn().mockResolvedValue({
+        ok: true,
+        data: {data: undefined},
+      })
+
+      const {result} = renderHook(
+        () => useShopActionQuery(['test-undefined'], mockAction, {}),
+        {wrapper}
+      )
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false)
+      })
+
+      expect(result.current.data).toBeNull()
+    })
+  })
+
+  describe('Error Handling', () => {
+    it('handles action errors (ok: false)', async () => {
+      const mockAction = vi.fn().mockRejectedValue(new Error('API Error'))
+
+      const {result} = renderHook(
+        () => useShopActionQuery(['test-action-error'], mockAction, {}),
+        {wrapper}
+      )
+
+      // Wait for loading to complete (after retries)
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false)
+        },
+        {timeout: 3000}
+      )
+
+      expect(result.current.data).toBeNull()
+      expect(result.current.error).toBeInstanceOf(Error)
+      expect(result.current.error?.message).toBe('API Error')
+    })
+  })
+
+  describe('Skip Parameter', () => {
+    it('does not fetch when skip is true', async () => {
+      const mockAction = vi.fn()
+
+      renderHook(
+        () => useShopActionQuery(['test-skip'], mockAction, {}, {skip: true}),
+        {wrapper}
+      )
+
+      // Wait a bit to ensure no fetch happens
+      await new Promise(resolve => setTimeout(resolve, 100))
+
+      expect(mockAction).not.toHaveBeenCalled()
+    })
+
+    it('fetches when skip is false', async () => {
+      const mockAction = vi.fn().mockResolvedValue({
+        ok: true,
+        data: {data: 'skip-false-data'},
+      })
+
+      const {result} = renderHook(
+        () =>
+          useShopActionQuery(
+            ['test-noskip-query'],
+            mockAction,
+            {},
+            {skip: false}
+          ),
+        {wrapper}
+      )
+
+      await waitFor(() => {
+        expect(result.current.data).toBe('skip-false-data')
+      })
+
+      expect(mockAction).toHaveBeenCalled()
+    })
+  })
+
+  describe('API Contract', () => {
+    it('returns expected shape', async () => {
+      const mockAction = vi.fn().mockResolvedValue({
+        ok: true,
+        data: {data: 'contract-test'},
+      })
+
+      const {result} = renderHook(
+        () => useShopActionQuery(['test-contract'], mockAction, {}),
+        {wrapper}
+      )
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false)
+      })
+
+      // Verify all expected properties exist
+      expect(result.current).toHaveProperty('data')
+      expect(result.current).toHaveProperty('loading')
+      expect(result.current).toHaveProperty('error')
+      expect(result.current).toHaveProperty('refetch')
+
+      // Verify types
+      expect(typeof result.current.loading).toBe('boolean')
+      expect(typeof result.current.refetch).toBe('function')
+    })
+  })
+
+  describe('fetchPolicy Parameter', () => {
+    it('passes fetchPolicy to action', async () => {
+      const mockAction = vi.fn().mockResolvedValue({
+        ok: true,
+        data: {data: 'test'},
+      })
+
+      renderHook(
+        () =>
+          useShopActionQuery(['test-network-only'], mockAction, {
+            fetchPolicy: 'network-only',
+          }),
+        {wrapper}
+      )
+
+      await waitFor(() => {
+        expect(mockAction).toHaveBeenCalledWith({fetchPolicy: 'network-only'})
+      })
+    })
+
+    it('passes cache-first fetchPolicy to action', async () => {
+      const mockAction = vi.fn().mockResolvedValue({
+        ok: true,
+        data: {data: 'test'},
+      })
+
+      renderHook(
+        () =>
+          useShopActionQuery(['test-cache-first'], mockAction, {
+            fetchPolicy: 'cache-first',
+          }),
+        {wrapper}
+      )
+
+      await waitFor(() => {
+        expect(mockAction).toHaveBeenCalledWith({fetchPolicy: 'cache-first'})
+      })
+    })
+  })
+})

package/src/internal/reactQuery/useShopActionQuery.ts

@@ -0,0 +1,74 @@
+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,
+  }
+}

package/src/mocks.ts

@@ -378,7 +378,13 @@ export function makeMockActions(): ShopActions {
       pageInfo: createPagination(),
     },
     getProductSearch: {
-      data: [createProduct('search-3', 'Search Product 3', '39.99')],
+      data: [
+        createProduct('search-1', 'Search Product 1', '39.99'),
+        createProduct('search-2', 'Search Product 2', '19.99'),
+        createProduct('search-3', 'Search Product 3', '29.99'),
+        createProduct('search-4', 'Search Product 4', '49.99'),
+        createProduct('search-5', 'Search Product 5', '9.99'),
+      ],
       pageInfo: createPagination(),
     },
     getProducts: {data: [createProduct('prod-2', 'Product 2', '19.99')]},
@@ -407,7 +413,9 @@ export function makeMockActions(): ShopActions {
       ],
       pageInfo: createPagination(),
     },
-    getShop: {data: createShop('shop-1', 'Sample Shop')},
+    getShop: {
+      data: createShop('shop-1', 'Sample Shop', {featuredImagesLimit: 4}),
+    },
     getRecentShops: {
       data: [createShop('recent-shop-1', 'Recent Shop 1')],
       pageInfo: createPagination(),

package/src/providers/ImagePickerProvider.test.tsx

@@ -160,9 +160,7 @@ describe('ImagePickerProvider', () => {
         configurable: true,
       })
 
-      await act(async () => {
-        fireEvent.change(galleryInput)
-      })
+      fireEvent.change(galleryInput)
 
       // Check that the promise resolved with the file
       await vi.waitFor(() => {
@@ -427,9 +425,7 @@ describe('ImagePickerProvider', () => {
         configurable: true,
       })
 
-      await act(async () => {
-        fireEvent.change(cameraInput)
-      })
+      fireEvent.change(cameraInput)
 
       await vi.waitFor(() => {
         const cameraFile = document.querySelector('[data-testid="camera-file"]')
@@ -718,9 +714,7 @@ describe('ImagePickerProvider', () => {
         configurable: true,
       })
 
-      await act(async () => {
-        fireEvent.change(galleryInput)
-      })
+      fireEvent.change(galleryInput)
 
       // Check that input value was cleared
       expect(galleryInput.value).toBe('')

package/dist/internal/useShopActionsDataFetching.js

@@ -1,79 +0,0 @@
-import { useState as b, useCallback as u, useMemo as v, useEffect as M } from "react";
-import { MiniError as P, formatError as V } from "../utils/errors.js";
-const A = (c, d, f) => {
-  const [n, l] = b({
-    data: null,
-    loading: !0,
-    error: null
-  }), h = f?.skip === !0, { validator: g, hook: t } = f, w = u(
-    (s) => {
-      try {
-        return g?.(s), null;
-      } catch (e) {
-        return e instanceof Error ? e : new P({
-          hook: t,
-          message: "Validation failed"
-        });
-      }
-    },
-    [g, t]
-  ), y = v(() => d, [JSON.stringify(d)]), a = u(
-    async (s, {
-      setLoading: e = !0,
-      setError: p = !0,
-      resetOnError: E = !0,
-      throwOnError: O = !0
-    } = {}) => {
-      let m = null, i = null;
-      l((r) => ({
-        ...r,
-        loading: e ? !0 : r.loading
-      }));
-      try {
-        const r = await c({ ...y, ...s });
-        if (r.ok)
-          i = w(r.data.data), l((S) => ({
-            ...S,
-            data: r.data.data,
-            loading: !1,
-            error: i ?? null
-          }));
-        else
-          throw r.error;
-      } catch (r) {
-        m = V({ hook: t }, r);
-      }
-      const o = i || m;
-      if (o && (p || E) && l((r) => ({
-        data: E ? null : r.data,
-        loading: !1,
-        error: o
-      })), o && O)
-        throw o;
-    },
-    [c, y, t, w]
-  ), k = u(async () => {
-    await a({ fetchPolicy: "network-only" }, {
-      setLoading: !1,
-      resetOnError: !1,
-      throwOnError: !0
-    });
-  }, [a]);
-  return M(() => {
-    h || a(
-      {},
-      {
-        throwOnError: !1
-      }
-    );
-  }, [a, h]), {
-    data: n.data,
-    loading: n.loading,
-    error: n.error,
-    refetch: k
-  };
-};
-export {
-  A as useShopActionsDataFetching
-};
-//# sourceMappingURL=useShopActionsDataFetching.js.map

package/dist/internal/useShopActionsDataFetching.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useShopActionsDataFetching.js","sources":["../../src/internal/useShopActionsDataFetching.ts"],"sourcesContent":["import {useCallback, useEffect, useMemo, useState} from 'react'\n\nimport {ShopActionResult} from '@shopify/shop-minis-platform/actions'\n\nimport {DataHookFetchPolicy, DataHookReturnsBase} from '../types'\nimport {formatError, MiniError} from '../utils/errors'\n\nexport interface ShopActionsDataFetchingResult<R> extends DataHookReturnsBase {\n  data: R | null\n}\n\nexport const useShopActionsDataFetching = <\n  S = unknown,\n  P extends {fetchPolicy?: DataHookFetchPolicy} = {\n    fetchPolicy?: DataHookFetchPolicy\n  },\n>(\n  action: (params: P) => Promise<ShopActionResult<{data: S}>>,\n  params: P,\n  options: {\n    skip?: boolean\n    hook?: string\n    validator?: (data: S) => void\n  }\n): ShopActionsDataFetchingResult<S> => {\n  const [state, setState] = useState<{\n    data: S | null\n    loading: boolean\n    error: Error | null\n  }>({\n    data: null,\n    loading: true,\n    error: null,\n  })\n\n  const skip = options?.skip === true\n  const {validator, hook} = options\n  const runValidator = useCallback(\n    (dataToValidate: S) => {\n      try {\n        validator?.(dataToValidate)\n        return null\n      } catch (err) {\n        if (err instanceof Error) return err\n\n        return new MiniError({\n          hook,\n          message: 'Validation failed',\n        })\n      }\n    },\n    [validator, hook]\n  )\n\n  // Params object is recreated on every render, so we need to memoize it.\n  // We don't know what's inside the params object, but we can stringify it.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const stableParams = useMemo(() => params, [JSON.stringify(params)])\n\n  // There's a lot of complexity here because each type of fetch has different side effects if we are trying to\n  // stay close to how Apollo client works. eg:\n  // - Initial fetch: set loading, set error, set data, reset on error (don't throw)\n  // - change params fetch: set loading, set error, set data, reset on error (don't throw)\n  // - refetch fetch: don't set loading, set error, update data, leave data as is was on error (also throw)\n  // - fetchMore fetch: don't set loading, don't set error, update data, leave data as is was on error (also throw)\n  const fetch = useCallback(\n    async (\n      extraParams?: Partial<P>,\n      {\n        setLoading = true,\n        setError = true,\n        resetOnError = true,\n        throwOnError = true,\n      }: {\n        setLoading?: boolean\n        setError?: boolean\n        resetOnError?: boolean\n        throwOnError?: boolean\n      } = {}\n    ) => {\n      let queryError: Error | null = null\n      let validationError: Error | null = null\n\n      setState(curState => ({\n        ...curState,\n        loading: setLoading ? true : curState.loading,\n      }))\n\n      try {\n        const result = await action({...stableParams, ...extraParams})\n\n        if (result.ok) {\n          validationError = runValidator(result.data.data)\n\n          setState(curState => ({\n            ...curState,\n            data: result.data.data,\n            loading: false,\n            error: validationError ?? null,\n          }))\n        } else {\n          throw result.error\n        }\n      } catch (err) {\n        queryError = formatError({hook}, err)\n      }\n\n      const error = validationError || queryError\n\n      if (error && (setError || resetOnError)) {\n        setState(curState => ({\n          data: resetOnError ? null : curState.data,\n          loading: false,\n          error,\n        }))\n      }\n\n      if (error && throwOnError) {\n        throw error\n      }\n    },\n    [action, stableParams, hook, runValidator]\n  )\n\n  const refetch = useCallback(async () => {\n    await fetch({fetchPolicy: 'network-only'} as Partial<P>, {\n      setLoading: false,\n      resetOnError: false,\n      throwOnError: true,\n    })\n  }, [fetch])\n\n  useEffect(() => {\n    if (skip) return\n\n    fetch(\n      {},\n      {\n        throwOnError: false,\n      }\n    )\n  }, [fetch, skip])\n\n  return {\n    data: state.data,\n    loading: state.loading,\n    error: state.error,\n    refetch,\n  }\n}\n"],"names":["useShopActionsDataFetching","action","params","options","state","setState","useState","skip","validator","hook","runValidator","useCallback","dataToValidate","err","MiniError","stableParams","useMemo","fetch","extraParams","setLoading","setError","resetOnError","throwOnError","queryError","validationError","curState","result","formatError","error","refetch","useEffect"],"mappings":";;AAWO,MAAMA,IAA6B,CAMxCC,GACAC,GACAC,MAKqC;AACrC,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAIvB;AAAA,IACD,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,EAAA,CACR,GAEKC,IAAOJ,GAAS,SAAS,IACzB,EAAC,WAAAK,GAAW,MAAAC,EAAA,IAAQN,GACpBO,IAAeC;AAAA,IACnB,CAACC,MAAsB;AACjB,UAAA;AACF,eAAAJ,IAAYI,CAAc,GACnB;AAAA,eACAC,GAAK;AACR,eAAAA,aAAe,QAAcA,IAE1B,IAAIC,EAAU;AAAA,UACnB,MAAAL;AAAA,UACA,SAAS;AAAA,QAAA,CACV;AAAA,MAAA;AAAA,IAEL;AAAA,IACA,CAACD,GAAWC,CAAI;AAAA,EAClB,GAKMM,IAAeC,EAAQ,MAAMd,GAAQ,CAAC,KAAK,UAAUA,CAAM,CAAC,CAAC,GAQ7De,IAAQN;AAAA,IACZ,OACEO,GACA;AAAA,MACE,YAAAC,IAAa;AAAA,MACb,UAAAC,IAAW;AAAA,MACX,cAAAC,IAAe;AAAA,MACf,cAAAC,IAAe;AAAA,IACjB,IAKI,OACD;AACH,UAAIC,IAA2B,MAC3BC,IAAgC;AAEpC,MAAAnB,EAAS,CAAaoB,OAAA;AAAA,QACpB,GAAGA;AAAA,QACH,SAASN,IAAa,KAAOM,EAAS;AAAA,MAAA,EACtC;AAEE,UAAA;AACI,cAAAC,IAAS,MAAMzB,EAAO,EAAC,GAAGc,GAAc,GAAGG,GAAY;AAE7D,YAAIQ,EAAO;AACS,UAAAF,IAAAd,EAAagB,EAAO,KAAK,IAAI,GAE/CrB,EAAS,CAAaoB,OAAA;AAAA,YACpB,GAAGA;AAAA,YACH,MAAMC,EAAO,KAAK;AAAA,YAClB,SAAS;AAAA,YACT,OAAOF,KAAmB;AAAA,UAAA,EAC1B;AAAA;AAEF,gBAAME,EAAO;AAAA,eAERb,GAAK;AACZ,QAAAU,IAAaI,EAAY,EAAC,MAAAlB,EAAI,GAAGI,CAAG;AAAA,MAAA;AAGtC,YAAMe,IAAQJ,KAAmBD;AAUjC,UARIK,MAAUR,KAAYC,MACxBhB,EAAS,CAAaoB,OAAA;AAAA,QACpB,MAAMJ,IAAe,OAAOI,EAAS;AAAA,QACrC,SAAS;AAAA,QACT,OAAAG;AAAA,MAAA,EACA,GAGAA,KAASN;AACL,cAAAM;AAAA,IAEV;AAAA,IACA,CAAC3B,GAAQc,GAAcN,GAAMC,CAAY;AAAA,EAC3C,GAEMmB,IAAUlB,EAAY,YAAY;AACtC,UAAMM,EAAM,EAAC,aAAa,kBAA+B;AAAA,MACvD,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,cAAc;AAAA,IAAA,CACf;AAAA,EAAA,GACA,CAACA,CAAK,CAAC;AAEV,SAAAa,EAAU,MAAM;AACd,IAAIvB,KAEJU;AAAA,MACE,CAAC;AAAA,MACD;AAAA,QACE,cAAc;AAAA,MAAA;AAAA,IAElB;AAAA,EAAA,GACC,CAACA,GAAOV,CAAI,CAAC,GAET;AAAA,IACL,MAAMH,EAAM;AAAA,IACZ,SAASA,EAAM;AAAA,IACf,OAAOA,EAAM;AAAA,IACb,SAAAyB;AAAA,EACF;AACF;"}

package/dist/internal/useShopActionsPaginatedDataFetching.js

@@ -1,96 +0,0 @@
-import { useState as A, useCallback as l, useMemo as O, useEffect as D } from "react";
-import { MiniError as M, formatError as b } from "../utils/errors.js";
-const V = (g, c, h) => {
-  const [r, f] = A({
-    data: null,
-    pageInfo: { hasNextPage: !1, endCursor: null },
-    loading: !1,
-    error: null
-  }), p = h?.skip === !0, { validator: y, hook: t } = h, w = l(
-    (d) => {
-      try {
-        return y?.(d), null;
-      } catch (o) {
-        return o instanceof Error ? o : new M({
-          hook: t,
-          message: "Validation failed"
-        });
-      }
-    },
-    [y, t]
-  ), I = O(() => c, [JSON.stringify(c)]), e = l(
-    async (d, {
-      setLoading: o = !0,
-      setError: N = !0,
-      resetOnError: i = !0,
-      throwOnError: k = !0,
-      appendData: C = !1
-    } = {}) => {
-      let E = null, u = null;
-      f((a) => ({
-        ...a,
-        loading: o ? !0 : a.loading
-      }));
-      try {
-        const a = await g({ ...I, ...d });
-        if (a.ok)
-          u = w(a.data.data), f((s) => {
-            let P = a.data.data;
-            return C && s.data && Array.isArray(s.data) && Array.isArray(a.data.data) && (P = [...s.data, ...a.data.data]), {
-              ...s,
-              data: P,
-              pageInfo: a.data.pageInfo,
-              loading: !1,
-              error: u ?? null
-            };
-          });
-        else
-          throw a.error;
-      } catch (a) {
-        console.log("caught 1", a), E = b({ hook: t }, a);
-      }
-      const n = u || E;
-      if (n && (N || i) && f((a) => ({
-        data: i ? null : a.data,
-        pageInfo: i ? { hasNextPage: !1, endCursor: null } : a.pageInfo,
-        loading: !1,
-        error: n
-      })), n && k)
-        throw n;
-    },
-    [g, I, t, w]
-  ), m = l(async () => {
-    await e({ fetchPolicy: "network-only" }, {
-      setLoading: !1,
-      resetOnError: !1,
-      throwOnError: !0
-    });
-  }, [e]), x = l(async () => {
-    !r.pageInfo.hasNextPage || !r.pageInfo.endCursor || await e({ after: r.pageInfo.endCursor }, {
-      setLoading: !1,
-      setError: !1,
-      resetOnError: !1,
-      throwOnError: !0,
-      appendData: !0
-    });
-  }, [r.pageInfo.hasNextPage, r.pageInfo.endCursor, e]);
-  return D(() => {
-    p || e(
-      {},
-      {
-        throwOnError: !1
-      }
-    );
-  }, [e, p]), {
-    data: r.data,
-    loading: r.loading,
-    error: r.error,
-    hasNextPage: r.pageInfo.hasNextPage,
-    refetch: m,
-    fetchMore: x
-  };
-};
-export {
-  V as useShopActionsPaginatedDataFetching
-};
-//# sourceMappingURL=useShopActionsPaginatedDataFetching.js.map

package/dist/internal/useShopActionsPaginatedDataFetching.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useShopActionsPaginatedDataFetching.js","sources":["../../src/internal/useShopActionsPaginatedDataFetching.ts"],"sourcesContent":["import {useCallback, useEffect, useMemo, useState} from 'react'\n\nimport {ShopAction, PaginationInfo} from '@shopify/shop-minis-platform/actions'\n\nimport {DataHookFetchPolicy, PaginatedDataHookReturnsBase} from '../types'\nimport {formatError, MiniError} from '../utils/errors'\n\nexport interface ShopActionsDataFetchingResult<S>\n  extends PaginatedDataHookReturnsBase {\n  data: S | null\n}\n\nexport const useShopActionsPaginatedDataFetching = <\n  S = unknown,\n  P extends {after?: string; fetchPolicy?: DataHookFetchPolicy} = {\n    after?: undefined\n    fetchPolicy?: DataHookFetchPolicy\n  },\n>(\n  action: ShopAction<P, {data: S; pageInfo: PaginationInfo}>,\n  params: P,\n  options: {\n    skip?: boolean\n    hook?: string\n    validator?: (data: S) => void\n  }\n): ShopActionsDataFetchingResult<S> => {\n  const [state, setState] = useState<{\n    data: S | null\n    pageInfo: PaginationInfo\n    loading: boolean\n    error: Error | null\n  }>({\n    data: null,\n    pageInfo: {hasNextPage: false, endCursor: null},\n    loading: false,\n    error: null,\n  })\n\n  const skip = options?.skip === true\n  const {validator, hook} = options\n  const runValidator = useCallback(\n    (dataToValidate: S): Error | null => {\n      try {\n        validator?.(dataToValidate)\n        return null\n      } catch (err) {\n        if (err instanceof Error) return err\n\n        return new MiniError({\n          hook,\n          message: 'Validation failed',\n        })\n      }\n    },\n    [validator, hook]\n  )\n\n  // Params object is recreated on every render, so we need to memoize it.\n  // We don't know what's inside the params object, but we can stringify it.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const stableParams = useMemo(() => params, [JSON.stringify(params)])\n\n  // There's a lot of complexity here because each type of fetch has different side effects if we are trying to\n  // stay close to how Apollo client works. eg:\n  // - Initial fetch: set loading, set error, set data, reset on error (don't throw)\n  // - change params fetch: set loading, set error, set data, reset on error (don't throw)\n  // - refetch fetch: don't set loading, set error, update data, leave data as is was on error (also throw)\n  // - fetchMore fetch: don't set loading, don't set error, update data, leave data as is was on error (also throw)\n  const fetch = useCallback(\n    async (\n      extraParams?: Partial<P>,\n      {\n        setLoading = true,\n        setError = true,\n        resetOnError = true,\n        throwOnError = true,\n        appendData = false,\n      }: {\n        setLoading?: boolean\n        setError?: boolean\n        resetOnError?: boolean\n        throwOnError?: boolean\n        appendData?: boolean\n      } = {}\n    ) => {\n      let queryError: Error | null = null\n      let validationError: Error | null = null\n\n      setState(curState => ({\n        ...curState,\n        loading: setLoading ? true : curState.loading,\n      }))\n\n      try {\n        const result = await action({...stableParams, ...extraParams})\n\n        if (result.ok) {\n          validationError = runValidator(result.data.data)\n\n          setState(curState => {\n            let newData = result.data.data\n\n            if (\n              appendData &&\n              curState.data &&\n              Array.isArray(curState.data) &&\n              Array.isArray(result.data.data)\n            ) {\n              newData = [...curState.data, ...result.data.data] as S\n            }\n\n            return {\n              ...curState,\n              data: newData,\n              pageInfo: result.data.pageInfo,\n              loading: false,\n              error: validationError ?? null,\n            }\n          })\n        } else {\n          throw result.error\n        }\n      } catch (err) {\n        console.log('caught 1', err)\n        queryError = formatError({hook}, err)\n      }\n\n      const error = validationError || queryError\n\n      if (error && (setError || resetOnError)) {\n        setState(curState => ({\n          data: resetOnError ? null : curState.data,\n          pageInfo: resetOnError\n            ? {hasNextPage: false, endCursor: null}\n            : curState.pageInfo,\n          loading: false,\n          error,\n        }))\n      }\n\n      if (error && throwOnError) {\n        throw error\n      }\n    },\n    [action, stableParams, hook, runValidator]\n  )\n\n  const refetch = useCallback(async () => {\n    await fetch({fetchPolicy: 'network-only'} as Partial<P>, {\n      setLoading: false,\n      resetOnError: false,\n      throwOnError: true,\n    })\n  }, [fetch])\n\n  const fetchMore = useCallback(async () => {\n    if (!state.pageInfo.hasNextPage || !state.pageInfo.endCursor) return\n\n    await fetch({after: state.pageInfo.endCursor} as Partial<P>, {\n      setLoading: false,\n      setError: false,\n      resetOnError: false,\n      throwOnError: true,\n      appendData: true,\n    })\n  }, [state.pageInfo.hasNextPage, state.pageInfo.endCursor, fetch])\n\n  useEffect(() => {\n    if (skip) return\n\n    fetch(\n      {},\n      {\n        throwOnError: false,\n      }\n    )\n  }, [fetch, skip])\n\n  return {\n    data: state.data,\n    loading: state.loading,\n    error: state.error,\n    hasNextPage: state.pageInfo.hasNextPage,\n    refetch,\n    fetchMore,\n  }\n}\n"],"names":["useShopActionsPaginatedDataFetching","action","params","options","state","setState","useState","skip","validator","hook","runValidator","useCallback","dataToValidate","err","MiniError","stableParams","useMemo","fetch","extraParams","setLoading","setError","resetOnError","throwOnError","appendData","queryError","validationError","curState","result","newData","formatError","error","refetch","fetchMore","useEffect"],"mappings":"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"}