@shopify/shop-minis-react 0.3.4 → 0.4.0

package/src/internal/useShopActionsDataFetching.test.ts

@@ -1,465 +0,0 @@
-import {renderHook, act, waitFor} from '@testing-library/react'
-import {describe, expect, it, vi, beforeEach} from 'vitest'
-
-import {useShopActionsDataFetching} from './useShopActionsDataFetching'
-
-// Mock the error formatter
-vi.mock('../utils/errors', () => ({
-  formatError: vi.fn((_, error) => {
-    if (error instanceof Error) return error
-    return new Error(String(error))
-  }),
-  MiniError: class MiniError extends Error {
-    constructor({message}: {message: string; hook?: string}) {
-      super(message)
-      this.name = 'MiniError'
-    }
-  },
-}))
-
-describe('useShopActionsDataFetching', () => {
-  let mockAction: ReturnType<typeof vi.fn>
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockAction = vi.fn()
-  })
-
-  describe('Initial Fetch', () => {
-    it('fetches data on mount', async () => {
-      const mockData = {data: {id: '1', name: 'Test'}}
-      mockAction.mockResolvedValue({
-        ok: true,
-        data: mockData,
-      })
-
-      const {result} = renderHook(() =>
-        useShopActionsDataFetching(mockAction, {}, {})
-      )
-
-      // Initially loading
-      expect(result.current.loading).toBe(true)
-      expect(result.current.data).toBeNull()
-      expect(result.current.error).toBeNull()
-
-      // Wait for fetch to complete
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false)
-      })
-
-      expect(result.current.data).toEqual({id: '1', name: 'Test'})
-      expect(result.current.error).toBeNull()
-      expect(mockAction).toHaveBeenCalledWith({})
-    })
-
-    it('handles initial fetch error', async () => {
-      const errorMessage = 'Network error'
-      mockAction.mockResolvedValue({
-        ok: false,
-        error: new Error(errorMessage),
-      })
-
-      const {result} = renderHook(() =>
-        useShopActionsDataFetching(mockAction, {}, {})
-      )
-
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false)
-      })
-
-      expect(result.current.data).toBeNull()
-      expect(result.current.error).toBeInstanceOf(Error)
-      expect(result.current.error?.message).toBe(errorMessage)
-    })
-
-    it('skips initial fetch when skip is true', async () => {
-      mockAction.mockResolvedValue({
-        ok: true,
-        data: {data: 'test'},
-      })
-
-      const {result} = renderHook(() =>
-        useShopActionsDataFetching(mockAction, {}, {skip: true})
-      )
-
-      // Should not be loading when skipped
-      expect(result.current.loading).toBe(true) // Initially true regardless of skip
-      expect(result.current.data).toBeNull()
-
-      // Wait a bit to ensure no fetch happens
-      await new Promise(resolve => setTimeout(resolve, 50))
-
-      expect(mockAction).not.toHaveBeenCalled()
-      expect(result.current.data).toBeNull()
-    })
-  })
-
-  describe('Params Changes', () => {
-    it('refetches when params change', async () => {
-      const mockData1 = {data: {id: '1', value: 'first'}}
-      const mockData2 = {data: {id: '2', value: 'second'}}
-
-      mockAction
-        .mockResolvedValueOnce({ok: true, data: mockData1})
-        .mockResolvedValueOnce({ok: true, data: mockData2})
-
-      const {result, rerender} = renderHook(
-        ({params}) => useShopActionsDataFetching(mockAction, params, {}),
-        {initialProps: {params: {id: '1'}}}
-      )
-
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false)
-      })
-
-      expect(result.current.data).toEqual({id: '1', value: 'first'})
-      expect(mockAction).toHaveBeenCalledWith({id: '1'})
-
-      // Change params
-      rerender({params: {id: '2'}})
-
-      await waitFor(() => {
-        expect(result.current.data).toEqual({id: '2', value: 'second'})
-      })
-
-      expect(mockAction).toHaveBeenCalledWith({id: '2'})
-      expect(mockAction).toHaveBeenCalledTimes(2)
-    })
-
-    it('does not refetch when params are structurally equal', async () => {
-      const mockData = {data: {id: '1', name: 'Test'}}
-      mockAction.mockResolvedValue({ok: true, data: mockData})
-
-      const {result, rerender} = renderHook(
-        ({params}) => useShopActionsDataFetching(mockAction, params, {}),
-        {initialProps: {params: {id: '1', nested: {value: 'test'}}}}
-      )
-
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false)
-      })
-
-      expect(mockAction).toHaveBeenCalledTimes(1)
-
-      // Rerender with structurally equal params (new object reference)
-      rerender({params: {id: '1', nested: {value: 'test'}}})
-
-      // Wait a bit to ensure no additional fetch
-      await new Promise(resolve => setTimeout(resolve, 50))
-
-      expect(mockAction).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  describe('Refetch', () => {
-    it('refetches data without setting loading', async () => {
-      const mockData1 = {data: {id: '1', value: 'initial'}}
-      const mockData2 = {data: {id: '1', value: 'refetched'}}
-
-      mockAction
-        .mockResolvedValueOnce({ok: true, data: mockData1})
-        .mockResolvedValueOnce({ok: true, data: mockData2})
-
-      const {result} = renderHook(() =>
-        useShopActionsDataFetching(mockAction, {}, {})
-      )
-
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false)
-      })
-
-      expect(result.current.data).toEqual({id: '1', value: 'initial'})
-
-      // Track loading state during refetch
-      let loadingDuringRefetch = false
-
-      await act(async () => {
-        const refetchPromise = result.current.refetch()
-
-        // Check that loading is not set
-        loadingDuringRefetch = result.current.loading
-
-        await refetchPromise
-      })
-
-      expect(loadingDuringRefetch).toBe(false)
-      expect(result.current.data).toEqual({id: '1', value: 'refetched'})
-      expect(mockAction).toHaveBeenCalledTimes(2)
-      expect(mockAction).toHaveBeenLastCalledWith({fetchPolicy: 'network-only'})
-    })
-
-    it('throws error on refetch failure', async () => {
-      const mockData = {data: {id: '1', value: 'initial'}}
-      const refetchError = new Error('Refetch failed')
-
-      mockAction
-        .mockResolvedValueOnce({ok: true, data: mockData})
-        .mockResolvedValueOnce({ok: false, error: refetchError})
-
-      const {result} = renderHook(() =>
-        useShopActionsDataFetching(mockAction, {}, {})
-      )
-
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false)
-      })
-
-      expect(result.current.data).toEqual({id: '1', value: 'initial'})
-
-      await act(async () => {
-        await expect(result.current.refetch()).rejects.toThrow('Refetch failed')
-      })
-
-      // Data should remain unchanged on refetch error
-      expect(result.current.data).toEqual({id: '1', value: 'initial'})
-      expect(result.current.error).toBeInstanceOf(Error)
-    })
-
-    it('maintains data on refetch error', async () => {
-      const initialData = {data: {id: '1', value: 'initial'}}
-
-      mockAction
-        .mockResolvedValueOnce({ok: true, data: initialData})
-        .mockResolvedValueOnce({ok: false, error: new Error('Refetch error')})
-
-      const {result} = renderHook(() =>
-        useShopActionsDataFetching(mockAction, {}, {})
-      )
-
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false)
-      })
-
-      const originalData = result.current.data
-
-      await act(async () => {
-        try {
-          await result.current.refetch()
-        } catch {
-          // Expected error
-        }
-      })
-
-      // Data should not be reset on refetch error
-      expect(result.current.data).toBe(originalData)
-    })
-  })
-
-  describe('Validation', () => {
-    it('validates data and sets error on validation failure', async () => {
-      const mockData = {data: {id: '1', value: 'test'}}
-      mockAction.mockResolvedValue({ok: true, data: mockData})
-
-      const validator = vi.fn(data => {
-        if (data.value === 'test') {
-          throw new Error('Invalid value')
-        }
-      })
-
-      const {result} = renderHook(() =>
-        useShopActionsDataFetching(
-          mockAction,
-          {},
-          {validator, hook: 'testHook'}
-        )
-      )
-
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false)
-      })
-
-      // When validation fails and validation error is set, data is not returned
-      expect(result.current.data).toBeNull()
-      expect(result.current.error).toBeInstanceOf(Error)
-      expect(result.current.error?.message).toBe('Invalid value')
-      expect(validator).toHaveBeenCalledWith({id: '1', value: 'test'})
-    })
-
-    it('passes validation when no error is thrown', async () => {
-      const mockData = {data: {id: '1', value: 'valid'}}
-      mockAction.mockResolvedValue({ok: true, data: mockData})
-
-      const validator = vi.fn(data => {
-        // No error thrown - validation passes
-        expect(data).toBeDefined()
-      })
-
-      const {result} = renderHook(() =>
-        useShopActionsDataFetching(mockAction, {}, {validator})
-      )
-
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false)
-      })
-
-      expect(result.current.data).toEqual({id: '1', value: 'valid'})
-      expect(result.current.error).toBeNull()
-      expect(validator).toHaveBeenCalledWith({id: '1', value: 'valid'})
-    })
-
-    it('handles non-Error validation failures', async () => {
-      const mockData = {data: {id: '1', value: 'test'}}
-      mockAction.mockResolvedValue({ok: true, data: mockData})
-
-      const validator = vi.fn(() => {
-        // eslint-disable-next-line no-throw-literal
-        throw 'String error' // Non-Error thrown
-      })
-
-      const {result} = renderHook(() =>
-        useShopActionsDataFetching(
-          mockAction,
-          {},
-          {validator, hook: 'testHook'}
-        )
-      )
-
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false)
-      })
-
-      expect(result.current.error).toBeInstanceOf(Error)
-      expect(result.current.error?.message).toBe('Validation failed')
-    })
-  })
-
-  describe('Error Handling', () => {
-    it('formats errors properly', async () => {
-      const originalError = {
-        code: 'TEST_ERROR',
-        message: 'Test error message',
-      }
-
-      mockAction.mockResolvedValue({
-        ok: false,
-        error: originalError,
-      })
-
-      const {result} = renderHook(() =>
-        useShopActionsDataFetching(mockAction, {}, {hook: 'testHook'})
-      )
-
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false)
-      })
-
-      expect(result.current.error).toBeDefined()
-      expect(result.current.data).toBeNull()
-    })
-
-    it('resets error on successful fetch after error', async () => {
-      const errorResponse = {ok: false as const, error: new Error('Error')}
-      const successResponse = {ok: true as const, data: {data: 'success'}}
-
-      mockAction
-        .mockResolvedValueOnce(errorResponse)
-        .mockResolvedValueOnce(successResponse)
-
-      const {result, rerender} = renderHook(
-        ({params}) => useShopActionsDataFetching(mockAction, params, {}),
-        {initialProps: {params: {id: '1'}}}
-      )
-
-      await waitFor(() => {
-        expect(result.current.error).toBeDefined()
-      })
-
-      // Change params to trigger new fetch
-      rerender({params: {id: '2'}})
-
-      await waitFor(() => {
-        expect(result.current.error).toBeNull()
-      })
-
-      expect(result.current.data).toBe('success')
-    })
-  })
-
-  describe('Fetch Policy', () => {
-    it('includes fetchPolicy in action params', async () => {
-      mockAction.mockResolvedValue({
-        ok: true,
-        data: {data: 'test'},
-      })
-
-      renderHook(() =>
-        useShopActionsDataFetching(mockAction, {fetchPolicy: 'cache-first'}, {})
-      )
-
-      await waitFor(() => {
-        expect(mockAction).toHaveBeenCalledWith({fetchPolicy: 'cache-first'})
-      })
-    })
-
-    it('overrides fetchPolicy in refetch', async () => {
-      mockAction.mockResolvedValue({
-        ok: true,
-        data: {data: 'test'},
-      })
-
-      const {result} = renderHook(() =>
-        useShopActionsDataFetching(mockAction, {fetchPolicy: 'cache-first'}, {})
-      )
-
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false)
-      })
-
-      await act(async () => {
-        await result.current.refetch()
-      })
-
-      expect(mockAction).toHaveBeenLastCalledWith({
-        fetchPolicy: 'network-only',
-      })
-    })
-  })
-
-  describe('Hook Lifecycle', () => {
-    it('cleans up properly on unmount', async () => {
-      mockAction.mockResolvedValue({
-        ok: true,
-        data: {data: 'test'},
-      })
-
-      const {unmount} = renderHook(() =>
-        useShopActionsDataFetching(mockAction, {}, {})
-      )
-
-      await waitFor(() => {
-        expect(mockAction).toHaveBeenCalled()
-      })
-
-      unmount()
-
-      // Ensure no additional calls after unmount
-      expect(mockAction).toHaveBeenCalledTimes(1)
-    })
-
-    it('handles rapid mount/unmount cycles', async () => {
-      let resolveFetch: ((value: any) => void) | undefined
-
-      mockAction.mockImplementation(
-        () =>
-          new Promise(resolve => {
-            resolveFetch = resolve
-          })
-      )
-
-      const {unmount} = renderHook(() =>
-        useShopActionsDataFetching(mockAction, {}, {})
-      )
-
-      // Unmount before fetch completes
-      unmount()
-
-      // Complete the fetch after unmount
-      if (resolveFetch) {
-        resolveFetch({ok: true, data: {data: 'test'}})
-      }
-
-      // No errors should occur
-      expect(mockAction).toHaveBeenCalledTimes(1)
-    })
-  })
-})

package/src/internal/useShopActionsDataFetching.ts

@@ -1,150 +0,0 @@
-import {useCallback, useEffect, useMemo, useState} from 'react'
-
-import {ShopActionResult} from '@shopify/shop-minis-platform/actions'
-
-import {DataHookFetchPolicy, DataHookReturnsBase} from '../types'
-import {formatError, MiniError} from '../utils/errors'
-
-export interface ShopActionsDataFetchingResult<R> extends DataHookReturnsBase {
-  data: R | null
-}
-
-export const useShopActionsDataFetching = <
-  S = unknown,
-  P extends {fetchPolicy?: DataHookFetchPolicy} = {
-    fetchPolicy?: DataHookFetchPolicy
-  },
->(
-  action: (params: P) => Promise<ShopActionResult<{data: S}>>,
-  params: P,
-  options: {
-    skip?: boolean
-    hook?: string
-    validator?: (data: S) => void
-  }
-): ShopActionsDataFetchingResult<S> => {
-  const [state, setState] = useState<{
-    data: S | null
-    loading: boolean
-    error: Error | null
-  }>({
-    data: null,
-    loading: true,
-    error: null,
-  })
-
-  const skip = options?.skip === true
-  const {validator, hook} = options
-  const runValidator = useCallback(
-    (dataToValidate: S) => {
-      try {
-        validator?.(dataToValidate)
-        return null
-      } catch (err) {
-        if (err instanceof Error) return err
-
-        return new MiniError({
-          hook,
-          message: 'Validation failed',
-        })
-      }
-    },
-    [validator, hook]
-  )
-
-  // Params object is recreated on every render, so we need to memoize it.
-  // We don't know what's inside the params object, but we can stringify it.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const stableParams = useMemo(() => params, [JSON.stringify(params)])
-
-  // There's a lot of complexity here because each type of fetch has different side effects if we are trying to
-  // stay close to how Apollo client works. eg:
-  // - Initial fetch: set loading, set error, set data, reset on error (don't throw)
-  // - change params fetch: set loading, set error, set data, reset on error (don't throw)
-  // - refetch fetch: don't set loading, set error, update data, leave data as is was on error (also throw)
-  // - fetchMore fetch: don't set loading, don't set error, update data, leave data as is was on error (also throw)
-  const fetch = useCallback(
-    async (
-      extraParams?: Partial<P>,
-      {
-        setLoading = true,
-        setError = true,
-        resetOnError = true,
-        throwOnError = true,
-      }: {
-        setLoading?: boolean
-        setError?: boolean
-        resetOnError?: boolean
-        throwOnError?: boolean
-      } = {}
-    ) => {
-      let queryError: Error | null = null
-      let validationError: Error | null = null
-
-      setState(curState => ({
-        ...curState,
-        loading: setLoading ? true : curState.loading,
-      }))
-
-      try {
-        const result = await action({...stableParams, ...extraParams})
-
-        if (result.ok) {
-          validationError = runValidator(result.data.data)
-
-          setState(curState => ({
-            ...curState,
-            data: result.data.data,
-            loading: false,
-            error: validationError ?? null,
-          }))
-        } else {
-          throw result.error
-        }
-      } catch (err) {
-        queryError = formatError({hook}, err)
-      }
-
-      const error = validationError || queryError
-
-      if (error && (setError || resetOnError)) {
-        setState(curState => ({
-          data: resetOnError ? null : curState.data,
-          loading: false,
-          error,
-        }))
-      }
-
-      if (error && throwOnError) {
-        throw error
-      }
-    },
-    [action, stableParams, hook, runValidator]
-  )
-
-  const refetch = useCallback(async () => {
-    await fetch({fetchPolicy: 'network-only'} as Partial<P>, {
-      setLoading: false,
-      resetOnError: false,
-      throwOnError: true,
-    })
-  }, [fetch])
-
-  useEffect(() => {
-    if (skip) return
-
-    fetch(
-      {},
-      {
-        throwOnError: false,
-      }
-    )
-  }, [fetch, skip])
-
-  return {
-    data: state.data,
-    loading: state.loading,
-    error: state.error,
-    refetch,
-  }
-}