Merge pull request #2212 from reduxjs/pr/refetch-promise

Author: markerikson

packages/toolkit/src/query/core/buildInitiate.ts

@@ -56,7 +56,7 @@ export type QueryActionCreatorResult<
   abort(): void
   unwrap(): Promise<ResultTypeFrom<D>>
   unsubscribe(): void
-  refetch(): void
+  refetch(): QueryActionCreatorResult<D>
   updateSubscriptionOptions(options: SubscriptionOptions): void
   queryCacheKey: string
 }
@@ -311,11 +311,10 @@ Features like automatic cache collection, automatic refetching etc. will not be
 
               return result.data
             },
-            refetch() {
+            refetch: () =>
               dispatch(
                 queryAction(arg, { subscribe: false, forceRefetch: true })
-              )
-            },
+              ),
             unsubscribe() {
               if (subscribe)
                 dispatch(

packages/toolkit/src/query/react/buildHooks.ts

@@ -771,7 +771,13 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
           /**
            * A method to manually refetch data for the query
            */
-          refetch: () => void promiseRef.current?.refetch(),
+          refetch: () => {
+            if (!promiseRef.current)
+              throw new Error(
+                'Cannot refetch a query that has not been started yet.'
+              )
+            return promiseRef.current?.refetch()
+          },
         }),
         []
       )

packages/toolkit/src/query/tests/buildHooks.test.tsx

@@ -65,7 +65,7 @@ const api = createApi({
         },
       }),
     }),
-    getIncrementedAmount: build.query<any, void>({
+    getIncrementedAmount: build.query<{ amount: number }, void>({
       query: () => ({
         url: '',
         body: {
@@ -199,7 +199,7 @@ describe('hooks tests', () => {
         expect(screen.getByTestId('isLoading').textContent).toBe('false')
       )
       // We call a refetch, should still be `false`
-      act(() => refetch())
+      act(() => void refetch())
       await waitFor(() =>
         expect(screen.getByTestId('isFetching').textContent).toBe('true')
       )
@@ -255,7 +255,7 @@ describe('hooks tests', () => {
       expect(getRenderCount()).toBe(5)
 
       // We call a refetch, should set `isFetching` to true, then false when complete/errored
-      act(() => refetchMe())
+      act(() => void refetchMe())
       await waitFor(() => {
         expect(screen.getByTestId('isLoading').textContent).toBe('false')
         expect(screen.getByTestId('isFetching').textContent).toBe('true')
@@ -607,6 +607,28 @@ describe('hooks tests', () => {
         })
       })
     })
+
+    test('useQuery refetch method returns a promise that resolves with the result', async () => {
+      const { result } = renderHook(
+        () => api.endpoints.getIncrementedAmount.useQuery(),
+        {
+          wrapper: storeRef.wrapper,
+        }
+      )
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true))
+      const originalAmount = result.current.data!.amount
+
+      const { refetch } = result.current
+
+      let resPromise: ReturnType<typeof refetch> = null as any
+      await act(async () => {
+        resPromise = refetch()
+      })
+      expect(resPromise).toBeInstanceOf(Promise)
+      const res = await resPromise
+      expect(res.data!.amount).toBeGreaterThan(originalAmount)
+    })
   })
 
   describe('useLazyQuery', () => {

packages/toolkit/src/query/tests/errorHandling.test.tsx

@@ -147,7 +147,7 @@ describe('query error handling', () => {
       )
     )
 
-    act(result.current.refetch)
+    act(() => void result.current.refetch())
 
     await hookWaitFor(() => expect(result.current.isFetching).toBeFalsy())
     expect(result.current).toEqual(
@@ -193,7 +193,7 @@ describe('query error handling', () => {
       })
     )
 
-    act(result.current.refetch)
+    act(() => void result.current.refetch())
 
     await hookWaitFor(() => expect(result.current.isFetching).toBeFalsy())
     expect(result.current).toEqual(

packages/toolkit/src/query/tests/unionTypes.test.ts

@@ -346,7 +346,7 @@ describe.skip('TS only tests', () => {
     }
   })
 
-  test('queryHookResult (without selector) union', () => {
+  test('queryHookResult (without selector) union', async () => {
     const useQueryStateResult = api.endpoints.test.useQueryState()
     const useQueryResult = api.endpoints.test.useQuery()
     const useQueryStateWithSelectFromResult = api.endpoints.test.useQueryState(
@@ -356,12 +356,15 @@ describe.skip('TS only tests', () => {
       }
     )
 
-    const { refetch: _omit, ...useQueryResultWithoutMethods } = useQueryResult
+    const { refetch, ...useQueryResultWithoutMethods } = useQueryResult
     expectExactType(useQueryStateResult)(useQueryResultWithoutMethods)
     expectExactType(useQueryStateWithSelectFromResult)(
       // @ts-expect-error
       useQueryResultWithoutMethods
     )
+    expectType<ReturnType<ReturnType<typeof api.endpoints.test.select>>>(
+      await refetch()
+    )
   })
 
   test('useQueryState (with selectFromResult)', () => {
@@ -394,8 +397,8 @@ describe.skip('TS only tests', () => {
     })(result)
   })
 
-  test('useQuery (with selectFromResult)', () => {
-    const result = api.endpoints.test.useQuery(undefined, {
+  test('useQuery (with selectFromResult)', async () => {
+    const { refetch, ...result } = api.endpoints.test.useQuery(undefined, {
       selectFromResult({
         data,
         isLoading,
@@ -421,8 +424,11 @@ describe.skip('TS only tests', () => {
       isFetching: true,
       isSuccess: false,
       isError: false,
-      refetch: () => {},
     })(result)
+
+    expectType<ReturnType<ReturnType<typeof api.endpoints.test.select>>>(
+      await refetch()
+    )
   })
 
   test('useMutation union', () => {