add predefined updater functions

Author: KurtGokhan

README.md

@@ -32,9 +32,6 @@ It uses the builder pattern, the best pattern that works with complex Typescript
 ## TODO
 
 - Strong typed customizable tags
-- Middlewares on builder
-- Tags and updates as middlewares - withUpdates, withTags
-- Predefined update functions - clear, merge, replace, insert-by-id, delete-by-id, update-by-id, upsert-by-id
 
 ## Examples
 

examples/vite/src/App.tsx

@@ -42,32 +42,39 @@ const editPostMutation = baseMutation
   .withPath('/posts/:id')
   .withVars({ method: 'put' })
   .withBody<Partial<PostData>>()
-  .withUpdates<PostData>({ type: 'posts' as any, id: 'LIST' }, (ctx) => ({
-    type: 'posts' as any,
-    id: ctx.vars.params.id,
-    optimistic: true,
-    updater(ctx, target) {
-      return { ...target!, ...ctx.vars.body };
+  .withUpdates<PostData | PostData[]>(
+    {
+      type: 'posts' as any,
+      id: 'LIST',
+      optimistic: true,
+      updater: 'update-body-by-id',
     },
-  }))
+    (ctx) => ({
+      type: 'posts' as any,
+      id: ctx.vars.params.id,
+      optimistic: true,
+      updater: 'merge-body',
+    }),
+  )
   .withMiddleware(async (ctx, next) => {
     const res = await next({
       ...ctx,
-      vars: { ...ctx.vars, body: { ...ctx.vars.body, body: `${ctx.vars.body.body} \n Last updated ${new Date()}` } },
+      vars: {
+        ...ctx.vars,
+        body: { ...ctx.vars.body, body: `${ctx.vars.body.body} \n Last updated ${new Date().toISOString()}` },
+      },
     });
     return res;
   });
 
 const deletePostMutation = baseMutation
   .withVars({ method: 'delete' })
   .withPath('/posts/:id')
-  .withUpdates({
+  .withUpdates<PostData[]>({
     type: 'posts' as any,
     id: 'LIST',
     optimistic: true,
-    updater(ctx, target) {
-      return (target as PostData[]).filter((post) => post.id !== (ctx.vars as any).params.id);
-    },
+    updater: 'delete-params-by-id',
   });
 
 function App() {
@@ -170,7 +177,11 @@ function PostPage({ postId, onBack }: { postId: number; onBack: () => void }) {
             onClick={() => {
               editPost.mutateAsync({
                 params: { id: postId },
-                body: { title: titleRef.current!.value, body: bodyRef.current!.value },
+                body: {
+                  id: postId,
+                  title: titleRef.current!.value,
+                  body: bodyRef.current!.value,
+                },
               });
 
               setShowEdit(false);

src/tags/types.ts

@@ -1,5 +1,5 @@
 import type { QueryClient } from '@tanstack/react-query';
-import { StringLiteral } from '../types/utils';
+import { KeysOfValue, StringLiteral } from '../types/utils';
 import type { QueryTagType } from './tag-types';
 
 /**
@@ -29,11 +29,31 @@ export type QueryTagOption<
   TTag extends QueryTagObject = QueryTagObject,
 > = '*' | QueryTag<TTag> | readonly QueryTag<TTag>[] | QueryTagCallback<TVars, TData, TErr, TTag>;
 
-export type QueryUpdater<TVars = unknown, TData = unknown, TErr = unknown, TTarget = unknown> = (
+export type QueryUpdaterFn<TVars = unknown, TData = unknown, TErr = unknown, TTarget = unknown> = (
   ctx: QueryTagContext<TVars, TData, TErr>,
   target: TTarget,
 ) => TTarget;
 
+export type QueryUpdater<TVars = unknown, TData = unknown, TErr = unknown, TTarget = unknown> =
+  | QueryUpdaterFn<TVars, TData, TErr, TTarget>
+  | PredefinedUpdater<TVars, TData, TErr, TTarget>;
+
+export type PredefinedUpdater<TVars = unknown, TData = unknown, TErr = unknown, TTarget = unknown> =
+  | `clear-${UpdaterSelector<TVars>}`
+  | `merge-${UpdaterSelector<TVars>}`
+  | `replace-${UpdaterSelector<TVars>}`
+  | `${'create' | 'update' | 'upsert' | 'delete' | 'switch'}-${UpdaterSelector<TVars>}-by-${KeyOfTarget<TTarget>}`;
+
+type UpdaterSelector<TVars> = 'data' | 'vars' | (KeysOfValue<TVars, Record<string, any>> & string);
+type KeyOfTarget<TTarget> = string & KeyOfItem<TTarget>;
+type KeyOfItem<TTarget> = TTarget extends readonly (infer TItem)[]
+  ? keyof TItem
+  : TTarget extends Record<string, infer TItem>
+    ? TItem extends Record<string, any>
+      ? keyof TItem
+      : never
+    : never;
+
 export type QueryUpdateTagObject<
   TVars = unknown,
   TData = unknown,

src/tags/updateTags.ts

@@ -3,6 +3,7 @@ import { useStableCallback } from '../hooks/useStableCallback';
 import type { WithOptional } from '../types/utils';
 import { queryMatchesTag } from './operateOnTags';
 import type { QueryTagContext, QueryUpdateTag } from './types';
+import { getUpdater } from './updaters';
 
 export type UpdateTagsUndoer = { hash: string; data: unknown };
 
@@ -34,6 +35,8 @@ export function updateTags({
 
     const updater = typeof tag === 'object' && tag.updater;
     if (!updater) continue;
+    const updaterFn = getUpdater(updater, tag);
+    if (!updaterFn) continue;
 
     /**
      * If the tag has an invalidate property, we will set the fetchStatus to 'fetching' to indicate that the query is being updated.
@@ -46,7 +49,7 @@ export function updateTags({
       setDataToExistingQuery(
         queryClient,
         q.queryHash,
-        updater(ctx, q.state.data),
+        updaterFn(ctx, q.state.data),
         willInvalidate ? { isInvalidated: true } : undefined,
         { updated: optimistic ? 'optimistic' : 'pessimistic' },
       );

src/tags/updaters.ts

@@ -0,0 +1,122 @@
+import { QueryTagObject, QueryUpdater, QueryUpdaterFn } from './types';
+
+export function getUpdater<TVars = unknown, TData = unknown, TErr = unknown, TTarget = unknown>(
+  updater: QueryUpdater<TVars, TData, TErr, TTarget>,
+  tag: QueryTagObject,
+): QueryUpdaterFn<TVars, TData, TErr, TTarget> | undefined {
+  if (typeof updater === 'function') return updater;
+
+  const [_, updaterType, updaterKey, __, byKey] = updater.match(/^(\w+)-(\w+)(-by-(\w+))?$/) || [];
+
+  const getFromCtx = (ctx: any) => {
+    if (updaterKey === 'data') return ctx.data;
+    if (updaterKey === 'vars') return ctx.vars;
+    if (updaterKey === 'body') return ctx.vars?.body;
+    if (updaterKey === 'params') return ctx.vars?.params;
+    if (updaterKey === 'search') return ctx.vars?.search;
+    return undefined;
+  };
+
+  if (updaterType === 'clear') {
+    return (ctx, target) => undefined as unknown as TTarget;
+  }
+
+  if (updaterType === 'merge') {
+    return (ctx, target) => ({ ...target, ...getFromCtx(ctx) });
+  }
+
+  if (updaterType === 'replace') {
+    return (ctx, target) => getFromCtx(ctx) as TTarget;
+  }
+
+  if (updaterType === 'create') {
+    return (ctx, target): any => {
+      if (!target) return target;
+
+      const data = getFromCtx(ctx);
+      const dataKey = data[byKey];
+      if (!dataKey) return target;
+
+      if (Array.isArray(target)) {
+        const foundIndex = target.findIndex((item) => item[byKey] === dataKey);
+        if (foundIndex < 0) return [...target, data];
+        return target;
+      }
+
+      if ((target as any)[byKey]) return target;
+      return { ...target, [dataKey]: data };
+    };
+  }
+
+  if (updaterType === 'update') {
+    return (ctx, target): any => {
+      if (!target) return target;
+
+      const data = getFromCtx(ctx);
+      const dataKey = data[byKey];
+      if (!dataKey) return target;
+
+      if (Array.isArray(target)) {
+        const foundIndex = target.findIndex((item) => item[byKey] === dataKey);
+        if (foundIndex < 0) return target;
+        return target.map((item, index) => (index === foundIndex ? data : item));
+      }
+      if ((target as any)[byKey]) return { ...target, [dataKey]: data };
+      return target;
+    };
+  }
+
+  if (updaterType === 'upsert') {
+    return (ctx, target): any => {
+      if (!target) return target;
+
+      const data = getFromCtx(ctx);
+      const dataKey = data[byKey];
+      if (!dataKey) return target;
+
+      if (Array.isArray(target)) {
+        const foundIndex = target.findIndex((item) => item[byKey] === dataKey);
+        if (foundIndex < 0) return [...target, data];
+        return target.map((item, index) => (index === foundIndex ? data : item));
+      }
+      return { ...target, [dataKey]: data };
+    };
+  }
+
+  if (updaterType === 'delete') {
+    return (ctx, target): any => {
+      if (!target || typeof target !== 'object') return target;
+
+      const data = getFromCtx(ctx);
+      const dataKey = data[byKey];
+      if (!dataKey) return target;
+
+      if (Array.isArray(target)) {
+        return target.filter((item) => item[byKey] !== dataKey);
+      }
+      if (!(byKey in target)) return target;
+      const { [String(dataKey)]: _, ...rest } = target as any;
+      return rest;
+    };
+  }
+
+  if (updaterType === 'switch') {
+    return (ctx, target): any => {
+      if (!target) return target;
+
+      const data = getFromCtx(ctx);
+      const dataKey = data[byKey];
+      if (!dataKey) return target;
+
+      if (Array.isArray(target)) {
+        const foundIndex = target.findIndex((item) => item[byKey] === dataKey);
+        if (foundIndex < 0) return target;
+        return target.map((item, index) => (index === foundIndex ? data : item));
+      }
+      if ((target as any)[byKey]) return { ...target, [dataKey]: data };
+      return target;
+    };
+  }
+
+  return undefined;
+}

src/types/utils.ts

@@ -10,3 +10,8 @@ export type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>
 export type WithRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
 
 export type FunctionType = (...args: any[]) => any;
+
+/** Extracts the keys of a type that have a value of a specific type. */
+export type KeysOfValue<T, TCondition> = {
+  [K in keyof T]: T[K] extends TCondition ? K : never;
+}[keyof T];