@shopify/shop-minis-react 0.3.4 → 0.4.1

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

@@ -0,0 +1,357 @@
+import React from 'react'
+
+import {renderHook, waitFor, act} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
+
+import {MinisQueryProvider} from './MinisQueryProvider'
+import {useShopActionInfiniteQuery} from './useShopActionInfiniteQuery'
+
+describe('useShopActionInfiniteQuery', () => {
+  const wrapper = ({children}: {children: React.ReactNode}) => (
+    <MinisQueryProvider>{children}</MinisQueryProvider>
+  )
+
+  describe('Data Fetching', () => {
+    it('fetches and returns flattened array data', async () => {
+      const mockAction = vi.fn().mockResolvedValue({
+        ok: true,
+        data: {
+          data: [{id: '1'}, {id: '2'}],
+          pageInfo: {hasNextPage: false, endCursor: null},
+        },
+      })
+
+      const {result} = renderHook(
+        () => useShopActionInfiniteQuery(['test-array'], mockAction, {}),
+        {wrapper}
+      )
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false)
+      })
+
+      expect(result.current.data).toEqual([{id: '1'}, {id: '2'}])
+      expect(result.current.hasNextPage).toBe(false)
+      expect(mockAction).toHaveBeenCalledWith({})
+    })
+
+    it('handles non-array data by returning it directly', async () => {
+      const mockAction = vi.fn().mockResolvedValue({
+        ok: true,
+        data: {
+          data: {items: [{id: '1'}]},
+          pageInfo: {hasNextPage: false, endCursor: null},
+        },
+      })
+
+      const {result} = renderHook(
+        () => useShopActionInfiniteQuery(['test-nonarray'], mockAction, {}),
+        {wrapper}
+      )
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false)
+      })
+
+      // Non-array data is returned as-is from the first page
+      expect(result.current.data).toEqual({items: [{id: '1'}]})
+    })
+
+    it('returns null when data is null', async () => {
+      const mockAction = vi.fn().mockResolvedValue({
+        ok: true,
+        data: {
+          data: null,
+          pageInfo: {hasNextPage: false, endCursor: null},
+        },
+      })
+
+      const {result} = renderHook(
+        () => useShopActionInfiniteQuery(['test-null-data'], mockAction, {}),
+        {wrapper}
+      )
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false)
+      })
+
+      expect(result.current.data).toBeNull()
+    })
+  })
+
+  describe('Pagination Logic', () => {
+    it('appends data when fetching more pages', async () => {
+      const page1 = [{id: '1'}]
+      const page2 = [{id: '2'}]
+
+      const mockAction = vi
+        .fn()
+        .mockResolvedValueOnce({
+          ok: true,
+          data: {
+            data: page1,
+            pageInfo: {hasNextPage: true, endCursor: 'cursor1'},
+          },
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          data: {
+            data: page2,
+            pageInfo: {hasNextPage: false, endCursor: null},
+          },
+        })
+
+      const {result} = renderHook(
+        () => useShopActionInfiniteQuery(['test-pagination'], mockAction, {}),
+        {wrapper}
+      )
+
+      await waitFor(() => {
+        expect(result.current.data).toEqual(page1)
+        expect(result.current.hasNextPage).toBe(true)
+      })
+
+      // Fetch more
+      await act(async () => {
+        await result.current.fetchMore()
+      })
+
+      // Data should be flattened and appended
+      await waitFor(() => {
+        expect(result.current.data).toEqual([...page1, ...page2])
+      })
+
+      expect(result.current.hasNextPage).toBe(false)
+      expect(mockAction).toHaveBeenCalledTimes(2)
+    })
+
+    it('passes cursor to subsequent pages', async () => {
+      const mockAction = vi
+        .fn()
+        .mockResolvedValueOnce({
+          ok: true,
+          data: {
+            data: [{id: '1'}],
+            pageInfo: {hasNextPage: true, endCursor: 'cursor1'},
+          },
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          data: {
+            data: [{id: '2'}],
+            pageInfo: {hasNextPage: false, endCursor: null},
+          },
+        })
+
+      const {result} = renderHook(
+        () => useShopActionInfiniteQuery(['test-cursor'], mockAction, {}),
+        {wrapper}
+      )
+
+      await waitFor(() => {
+        expect(result.current.data).toEqual([{id: '1'}])
+        expect(result.current.hasNextPage).toBe(true)
+      })
+
+      await act(async () => {
+        await result.current.fetchMore()
+      })
+
+      // Second call should include the cursor
+      expect(mockAction).toHaveBeenNthCalledWith(2, {after: 'cursor1'})
+    })
+
+    it('preserves other params when fetching more', async () => {
+      const mockAction = vi
+        .fn()
+        .mockResolvedValueOnce({
+          ok: true,
+          data: {
+            data: [{id: '1'}],
+            pageInfo: {hasNextPage: true, endCursor: 'cursor1'},
+          },
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          data: {
+            data: [{id: '2'}],
+            pageInfo: {hasNextPage: false, endCursor: null},
+          },
+        })
+
+      const {result} = renderHook(
+        () =>
+          useShopActionInfiniteQuery(['test-params'], mockAction, {
+            query: 'shoes',
+            fetchPolicy: 'cache-first',
+          }),
+        {wrapper}
+      )
+
+      await waitFor(() => {
+        expect(result.current.data).toEqual([{id: '1'}])
+        expect(result.current.hasNextPage).toBe(true)
+      })
+
+      await act(async () => {
+        await result.current.fetchMore()
+      })
+
+      // Should preserve original params and add cursor
+      expect(mockAction).toHaveBeenNthCalledWith(2, {
+        query: 'shoes',
+        fetchPolicy: 'cache-first',
+        after: 'cursor1',
+      })
+    })
+  })
+
+  describe('Error Handling', () => {
+    it('handles action errors', async () => {
+      const mockAction = vi.fn().mockRejectedValue(new Error('API Error'))
+
+      const {result} = renderHook(
+        () => useShopActionInfiniteQuery(['test-api-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(
+        () =>
+          useShopActionInfiniteQuery(
+            ['test-skip-inf'],
+            mockAction,
+            {},
+            {skip: true}
+          ),
+        {wrapper}
+      )
+
+      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: [{id: 'noskip'}],
+          pageInfo: {hasNextPage: false, endCursor: null},
+        },
+      })
+
+      const {result} = renderHook(
+        () =>
+          useShopActionInfiniteQuery(
+            ['test-noskip-fetch'],
+            mockAction,
+            {},
+            {skip: false}
+          ),
+        {wrapper}
+      )
+
+      await waitFor(() => {
+        expect(result.current.data).toEqual([{id: 'noskip'}])
+      })
+
+      expect(mockAction).toHaveBeenCalled()
+    })
+  })
+
+  describe('API Contract', () => {
+    it('returns expected shape', async () => {
+      const mockAction = vi.fn().mockResolvedValue({
+        ok: true,
+        data: {
+          data: [{id: 'contract'}],
+          pageInfo: {hasNextPage: false, endCursor: null},
+        },
+      })
+
+      const {result} = renderHook(
+        () => useShopActionInfiniteQuery(['test-contract-inf'], 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('hasNextPage')
+      expect(result.current).toHaveProperty('fetchMore')
+      expect(result.current).toHaveProperty('refetch')
+
+      // Verify types
+      expect(typeof result.current.loading).toBe('boolean')
+      expect(typeof result.current.hasNextPage).toBe('boolean')
+      expect(typeof result.current.fetchMore).toBe('function')
+      expect(typeof result.current.refetch).toBe('function')
+    })
+  })
+
+  describe('hasNextPage Logic', () => {
+    it('sets hasNextPage based on pageInfo', async () => {
+      const mockAction = vi.fn().mockResolvedValue({
+        ok: true,
+        data: {
+          data: [{id: '1'}],
+          pageInfo: {hasNextPage: true, endCursor: 'cursor1'},
+        },
+      })
+
+      const {result} = renderHook(
+        () => useShopActionInfiniteQuery(['test-hasnext'], mockAction, {}),
+        {wrapper}
+      )
+
+      await waitFor(() => {
+        expect(result.current.data).toEqual([{id: '1'}])
+        expect(result.current.hasNextPage).toBe(true)
+      })
+    })
+
+    it('returns false when no more pages', async () => {
+      const mockAction = vi.fn().mockResolvedValue({
+        ok: true,
+        data: {
+          data: [{id: '1'}],
+          pageInfo: {hasNextPage: false, endCursor: null},
+        },
+      })
+
+      const {result} = renderHook(
+        () => useShopActionInfiniteQuery(['test-nonext'], mockAction, {}),
+        {wrapper}
+      )
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false)
+      })
+
+      expect(result.current.hasNextPage).toBe(false)
+    })
+  })
+})

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'})
+      })
+    })
+  })
+})