fix: using deferred queries on extended loaders

ryfylke-react-as · Jan 18, 2023 · 4795722 · 4795722
1 parent df0e793
commit 4795722
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 0 deletions.
diff --git a/src/createLoader.ts b/src/createLoader.ts
@@ -72,6 +72,7 @@ export const createLoader = <
       Ab = A
     >({
       queries,
+      deferredQueries,
       transform,
       ...loaderArgs
     }: Partial<
@@ -86,6 +87,7 @@ export const createLoader = <
         const newUseLoader = createUseLoader({
           queries,
           transform,
+          deferredQueries,
         });
         extendedLoader.useLoader = newUseLoader;
       }

diff --git a/testing-app/src/tests.test.tsx b/testing-app/src/tests.test.tsx
@@ -347,5 +347,48 @@ describe("withLoader", () => {
       expect(screen.getByText(/charizard/i)).toBeVisible();
       expect(screen.getByText(/pikachu/i)).toBeVisible();
     });
+
+    test("Can extend deferred queries", async () => {
+      const Component = withLoader(
+        (props, { charizard, delay }) => {
+          return (
+            <>
+              <div>{charizard.name}</div>
+              <div>
+                {delay ? "loaded-deferred" : "loading-deferred"}
+              </div>
+            </>
+          );
+        },
+        createLoader({
+          queries: () =>
+            [useGetPokemonsQuery(undefined)] as const,
+          deferredQueries: () =>
+            [useGetPokemonByNameQuery("charizard")] as const,
+        }).extend({
+          queries: () =>
+            [useGetPokemonByNameQuery("charizard")] as const,
+          deferredQueries: () => {
+            const delayQ = useGetPokemonByNameQuery("delay");
+            return [delayQ] as const;
+          },
+          transform: (queries, deferred) => ({
+            charizard: queries[0].data,
+            delay: deferred[0].data,
+          }),
+          onLoading: () => <div>Loading</div>,
+          onError: () => <div>Error</div>,
+        })
+      );
+      render(<Component />);
+      expect(screen.getByText("Loading")).toBeVisible();
+      await waitFor(() =>
+        expect(screen.getByText("charizard")).toBeVisible()
+      );
+      expect(screen.getByText("loading-deferred")).toBeVisible();
+      await waitFor(() =>
+        expect(screen.getByText("loaded-deferred")).toBeVisible()
+      );
+    });
   });
 });