release: 0.3.1

Author: imp-dance

README.md

@@ -200,8 +200,8 @@ const Component = () => {
 Infers the type of the data the loader returns. Use:
 
 ```typescript
-const { useLoader } = createLoader(...);
-type LoaderData = InferLoaderData<typeof useLoader>;
+const loader = createLoader(...);
+type LoaderData = InferLoaderData<typeof loader>;
 ```
 
 Typescript should infer the loader data type automatically inside `withLoader`, but if you need the type elsewhere then this could be useful.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryfylke-react/rtk-query-loader",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Lets you create loaders that contain multiple RTK queries.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",

src/types.ts

@@ -63,14 +63,13 @@ export type ComponentWithLoaderData<
   R extends unknown
 > = (props: P, loaderData: R) => ReactElement;
 
-type InferQueryResult<T> = T extends UseQueryResult<infer X>
+export type InferLoaderData<T> = T extends Loader<
+  any | never,
+  infer X
+>
   ? X
   : never;
 
-export type InferLoaderData<T> = T extends UseLoader<any, any>
-  ? InferQueryResult<ReturnType<T>>
-  : never;
-
 export type Component<P extends Record<string, unknown>> = (
   props: P
 ) => ReactElement;

testing-app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "testing-app",
+  "name": "rtk-query-loader-testing-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -17,10 +17,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "test": "react-scripts test"
   },
   "eslintConfig": {
     "extends": [

testing-app/src/mocks.ts

@@ -1,6 +1,6 @@
 import { rest } from "msw";
 
-const RESPONSE_DELAY = 600;
+const RESPONSE_DELAY = 100;
 
 export const handlers = [
   rest.get("/pokemons", (req, res, c) => {

testing-app/src/testComponents.tsx

@@ -35,6 +35,9 @@ const simpleLoader = createLoader({
   onLoading: () => <div>Loading</div>,
 });
 
+// Test type inferrence with no transform
+//type SimpleLoaderResponse = InferLoaderData<typeof simpleLoader>;
+
 export const SimpleLoadedComponent = withLoader(
   (props, loaderData) => (
     <RenderPokemonData
@@ -141,3 +144,20 @@ export const TestAggregateComponent = () => {
 
   return <div>Loading</div>;
 };
+
+const transformLoader = createLoader({
+  queries: () => [useGetPokemonByNameQuery("charizard")],
+  transform: (queries) => ({
+    pokemon: queries[0].data,
+  }),
+});
+
+// test type inferrence of transformed
+// type TransformedType = InferLoaderData<typeof transformLoader>;
+
+export const TestTransformed = withLoader(
+  (props, loaderData) => {
+    return <div>{loaderData.pokemon.name}</div>;
+  },
+  transformLoader
+);

testing-app/src/tests.test.tsx

@@ -7,6 +7,7 @@ import {
   LoadPokemon,
   SimpleLoadedComponent,
   TestAggregateComponent,
+  TestTransformed,
 } from "./testComponents";
 import { render, screen, waitFor } from "./utils";
 
@@ -65,6 +66,13 @@ describe("withLoader", () => {
     );
   });
 
+  test("Can transform the output of the loader", async () => {
+    render(<TestTransformed />);
+    await waitFor(() =>
+      expect(screen.getByText("charizard")).toBeVisible()
+    );
+  });
+
   describe(".extend()", () => {
     test("Can extend onLoading", async () => {
       render(<ExtendedLoaderComponent />);