fix: useeffect that handle enable change (#440)

Author: DorianMaliszewski

packages/use-dataloader/src/__tests__/dataloader.test.ts

@@ -189,21 +189,22 @@ describe('Dataloader class', () => {
     const instance = new DataLoader({
       key: 'test',
       method,
-      pollingInterval: PROMISE_TIMEOUT,
+      pollingInterval: PROMISE_TIMEOUT * 2,
     })
     await instance.load()
     expect(method).toBeCalledTimes(1)
-    await new Promise(resolve => setTimeout(resolve, PROMISE_TIMEOUT * 2))
+    await new Promise(resolve => setTimeout(resolve, PROMISE_TIMEOUT * 3))
     expect(method).toBeCalledTimes(2)
-    await new Promise(resolve => setTimeout(resolve, PROMISE_TIMEOUT * 2))
+    await new Promise(resolve => setTimeout(resolve, PROMISE_TIMEOUT * 3))
     expect(method).toBeCalledTimes(3)
     await instance.load()
     await instance.load()
-    await instance.load()
+    await new Promise(resolve => setTimeout(resolve))
     expect(method).toBeCalledTimes(4)
     await instance.load()
     await instance.load()
     await instance.load(true)
+    await new Promise(resolve => setTimeout(resolve))
     expect(method).toBeCalledTimes(6)
     instance.destroy()
   })

packages/use-dataloader/src/__tests__/useDataLoader.test.tsx

@@ -62,6 +62,46 @@ describe('useDataLoader', () => {
     expect(result.current.data).toBe(true)
   })
 
+  test('should render correctly without requets enabled then enable it', async () => {
+    const method = jest.fn(
+      () =>
+        new Promise(resolve => {
+          setTimeout(() => resolve(true), PROMISE_TIMEOUT)
+        }),
+    )
+    let enabled = false
+    const { rerender, result, waitForNextUpdate } = renderHook<
+      UseDataLoaderHookProps,
+      UseDataLoaderResult
+    >(
+      props =>
+        useDataLoader(props.key, props.method, {
+          enabled,
+        }),
+      {
+        initialProps: {
+          ...initialProps,
+          key: 'test-not-enabled-then-reload',
+          method,
+        },
+        wrapper,
+      },
+    )
+    expect(result.current.data).toBe(undefined)
+    expect(result.current.isLoading).toBe(false)
+    expect(method).toBeCalledTimes(0)
+    enabled = true
+    rerender()
+    expect(method).toBeCalledTimes(1)
+    expect(result.current.data).toBe(undefined)
+    expect(result.current.isLoading).toBe(true)
+    await waitForNextUpdate()
+    expect(result.current.isLoading).toBe(false)
+    expect(result.current.isSuccess).toBe(true)
+    expect(result.current.previousData).toBe(undefined)
+    expect(result.current.data).toBe(true)
+  })
+
   test('should render correctly without valid key', () => {
     const { result } = renderHook<UseDataLoaderHookProps, UseDataLoaderResult>(
       props => useDataLoader(props.key, props.method),

packages/use-dataloader/src/useDataLoader.ts

@@ -104,6 +104,12 @@ const useDataLoader = <T>(
     [isSuccess, isLoading, enabled, pollingInterval],
   )
 
+  useEffect(() => {
+    if (enabled && isIdle) {
+      request.launch?.()
+    }
+  }, [request, enabled, isIdle])
+
   useEffect(() => {
     isFetchingRef.current = isLoading || isPolling
   }, [isLoading, isPolling])