Allow a shorthand of entityType for invalidates (#8)

msutkowski · web-flow · commit c65bc1518e77 · 2020-11-08T18:19:09.000+01:00
diff --git a/examples/svelte-counter/package.json b/examples/svelte-counter/package.json
@@ -26,7 +26,7 @@
         "typescript": "^3.9.3"
     },
     "dependencies": {
-        "@reduxjs/toolkit": "^1.4.0",
+        "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/56994225/@reduxjs/toolkit",
         "sirv-cli": "^1.0.0"
     }
 }
diff --git a/examples/svelte-counter/sandbox.config.json b/examples/svelte-counter/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+    "template": "node"
+}
diff --git a/examples/svelte-counter/src/App.svelte b/examples/svelte-counter/src/App.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { QueryStatus } from '../../../dist';
+    import { QueryStatus } from '@rtk-incubator/simple-query/dist';
     import { counterApi } from './services/counter';
     import { store } from './store';
+    import Counter from './Counter.svelte'
+
+    let counters = [] as number[];
 
     const { incrementCount, decrementCount } = counterApi.mutationActions;
 
@@ -44,4 +47,11 @@
     <button on:click={() => store.dispatch(incrementCount(1, { track: false }))}>Increase</button>
     <button on:click={() => store.dispatch(decrementCount(1, { track: false }))}>Decrease</button>
     <button on:click={getCount} disabled={loading}>Refetch count</button>
+
+    <hr />
+    <h3>Custom counters!</h3><button on:click={() => { counters = [...counters, counters.length + 1] }}>Add counter</button>
+
+    {#each counters as id}
+		<Counter {id} />
+	{/each}
 </main>
diff --git a/examples/svelte-counter/src/Counter.svelte b/examples/svelte-counter/src/Counter.svelte
@@ -0,0 +1,44 @@
+
+<script lang="ts">
+    export let id: number = null;
+    import { onMount } from 'svelte';
+    import { QueryStatus } from '@rtk-incubator/simple-query/dist';
+    import { counterApi } from './services/counter';
+    import { store } from './store';
+
+    const { incrementCountById, decrementCountById } = counterApi.mutationActions;
+
+    let incrementStatus, decrementStatus;
+    $: ({ data, status: getStatus, error } = counterApi.selectors.query.getCountById(id)($store));
+    $: ({ status: incrementStatus } = counterApi.selectors.query.getCountById(id)($store));
+    $: ({ status: decrementStatus } = counterApi.selectors.query.getCountById(id)($store));
+
+    $: loading = [incrementStatus, decrementStatus, getStatus].some(status => status === QueryStatus.pending);
+
+    onMount(() => {
+        store.dispatch(counterApi.queryActions.getCountById(id));
+    });
+</script>
+
+<style>
+    main {
+        padding: 0.5em;
+    }
+
+    .count {
+        color: #a74524;
+        text-transform: uppercase;
+        font-size: 2em;
+        font-weight: 100;
+        margin-right: 20px;
+    }
+
+</style>
+
+<main>
+    <span class="count">{data?.count || 0}</span>
+    <button on:click={() => store.dispatch(incrementCountById({ id, amount: 1 }, { track: false }))} disabled={loading}>Increase</button>
+    <button on:click={() => store.dispatch(decrementCountById({ id, amount: 1 }, { track: false }))} disabled={loading}>Decrease</button>
+    <small>(id: {id})</small>
+
+</main>
diff --git a/examples/svelte-counter/src/mocks/handlers.ts b/examples/svelte-counter/src/mocks/handlers.ts
@@ -3,6 +3,8 @@ import { rest } from 'msw';
 // high tech in-memory storage
 let count = 0;
 
+let counters = {};
+
 export const handlers = [
     rest.put<{ amount: number }>('/increment', (req, res, ctx) => {
         const { amount } = req.body;
@@ -19,4 +21,35 @@ export const handlers = [
     rest.get('/count', (req, res, ctx) => {
         return res(ctx.json({ count }));
     }),
+    rest.get('/:id', (req, res, ctx) => {
+        const { id } = req.params;
+
+        const count = counters[id] || (counters[id] = 0);
+
+        return res(ctx.json({ count }));
+    }),
+    rest.put<{ amount: number }>('/:id/increment', (req, res, ctx) => {
+        const { amount } = req.body;
+        const { id } = req.params;
+
+        if (typeof counters[id] === 'undefined') {
+            return res(ctx.json({ message: 'Counter not found' }), ctx.status(402));
+        }
+
+        const count = (counters[id] = counters[id] + amount);
+
+        return res(ctx.json({ count }));
+    }),
+    rest.put<{ amount: number }>('/:id/decrement', (req, res, ctx) => {
+        const { amount } = req.body;
+        const { id } = req.params;
+
+        if (typeof counters[id] === 'undefined') {
+            return res(ctx.json({ message: 'Counter not found' }), ctx.status(402));
+        }
+
+        const count = (counters[id] = counters[id] - amount);
+
+        return res(ctx.json({ count }));
+    }),
 ];
diff --git a/examples/svelte-counter/src/services/counter.ts b/examples/svelte-counter/src/services/counter.ts
@@ -10,24 +10,52 @@ export const counterApi = createApi({
     entityTypes: ['Counter'],
     endpoints: (build) => ({
         getCount: build.query<CountResponse, void>({
-            query: () => `count`,
-            provides: [{ type: 'Counter' }],
+            query: () => 'count',
+            provides: ['Counter'],
+        }),
+        getCountById: build.query<CountResponse, number>({
+            query: (id: number) => `${id}`,
+            provides: (_, id) => [{ type: 'Counter', id }],
         }),
         incrementCount: build.mutation<CountResponse, number>({
-            query: (amount) => ({
-                url: `increment`,
-                method: 'PUT',
-                body: JSON.stringify({ amount }),
-            }),
-            invalidates: [{ type: 'Counter' }],
+            query(amount) {
+                return {
+                    url: `increment`,
+                    method: 'PUT',
+                    body: JSON.stringify({ amount }),
+                };
+            },
+            invalidates: ['Counter'],
+        }),
+        incrementCountById: build.mutation<CountResponse, { id: number; amount: number }>({
+            query({ id, amount }) {
+                return {
+                    url: `${id}/increment`,
+                    method: 'PUT',
+                    body: JSON.stringify({ amount }),
+                };
+            },
+            invalidates: (_, { id }) => [{ type: 'Counter', id }],
         }),
         decrementCount: build.mutation<CountResponse, number>({
-            query: (amount) => ({
-                url: `decrement`,
-                method: 'PUT',
-                body: JSON.stringify({ amount }),
-            }),
-            invalidates: [{ type: 'Counter' }],
+            query(amount) {
+                return {
+                    url: `decrement`,
+                    method: 'PUT',
+                    body: JSON.stringify({ amount }),
+                };
+            },
+            invalidates: ['Counter'],
+        }),
+        decrementCountById: build.mutation<CountResponse, { id: number; amount: number }>({
+            query({ id, amount }) {
+                return {
+                    url: `${id}/decrement`,
+                    method: 'PUT',
+                    body: JSON.stringify({ amount }),
+                };
+            },
+            invalidates: (_, { id }) => [{ type: 'Counter', id }],
         }),
     }),
 });
diff --git a/src/buildMiddleware.ts b/src/buildMiddleware.ts
@@ -37,7 +37,7 @@ export function buildMiddleware<Definitions extends EndpointDefinitions, Reducer
       const invalidateEntities = calculateProvidedBy(
         endpointDefinitions[action.meta.arg.endpoint].invalidates,
         action.payload,
-        state.mutations[action.meta.arg.endpoint]?.[action.meta.requestId]?.arg
+        action.meta.arg.arg
       );
       const toInvalidate: { [endpoint: string]: Set<string> } = {};
       for (const entity of invalidateEntities) {
diff --git a/src/endpointDefinitions.ts b/src/endpointDefinitions.ts
@@ -16,7 +16,8 @@ export type GetResultDescriptionFn<EntityTypes extends string, ResultType, Query
   arg: QueryArg
 ) => ReadonlyArray<EntityDescription<EntityTypes>>;
 
-export type EntityDescription<EntityType> = { type: EntityType; id?: number | string };
+export type FullEntityDescription<EntityType> = { type: EntityType; id?: number | string };
+export type EntityDescription<EntityType> = EntityType | FullEntityDescription<EntityType>;
 export type ResultDescription<EntityTypes extends string, ResultType, QueryArg> =
   | ReadonlyArray<EntityDescription<EntityTypes>>
   | GetResultDescriptionFn<EntityTypes, ResultType, QueryArg>;
@@ -64,16 +65,20 @@ export function calculateProvidedBy<ResultType, QueryArg, D extends ResultDescri
   description: D | undefined,
   result: ResultType,
   queryArg: QueryArg
-): readonly EntityDescription<string>[] {
+): readonly FullEntityDescription<string>[] {
   if (isFunction(description)) {
-    return description(result, queryArg);
+    return description(result, queryArg).map(expandEntityDescription);
   }
   if (Array.isArray(description)) {
-    return description;
+    return description.map(expandEntityDescription);
   }
   return [];
 }
 
 function isFunction<T>(t: T): t is Extract<T, Function> {
   return typeof t === 'function';
 }
+
+function expandEntityDescription(description: EntityDescription<string>): FullEntityDescription<string> {
+  return typeof description === 'string' ? { type: description } : description;
+}

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`	`"typescript": "^3.9.3"`
`27`	`27`	`},`
`28`	`28`	`"dependencies": {`
`29`		`- "@reduxjs/toolkit": "^1.4.0",`
	`29`	`+ "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/56994225/@reduxjs/toolkit",`
`30`	`30`	`"sirv-cli": "^1.0.0"`
`31`	`31`	`}`
`32`	`32`	`}`