simplify useMutationState

Author: KurtGokhan

examples/vite/src/App.tsx

@@ -66,7 +66,11 @@ function App() {
   const posts = postsQuery.useQuery({}, { enabled: !postId });
   const reset = resetMutation.useMutation();
 
-  const deleteMutations = deletePostMutation.useAllMutations();
+  const deleteErrors = deletePostMutation.useMutationState(
+    undefined,
+    { status: 'error' },
+    (x) => x.state.variables?.params.id,
+  );
 
   const [refresh] = useOperateOnTags({ tags: ['refreshable'], operation: 'refetch' });
 
@@ -107,9 +111,7 @@ function App() {
                   Delete
                 </button>
 
-                {deleteMutations.getMutation({ params: { id: post.id } })?.error && (
-                  <span style={{ color: 'red' }}>Error deleting post</span>
-                )}
+                {deleteErrors.includes(post.id) && <span style={{ color: 'red' }}>Error deleting post</span>}
 
                 <p>{post.body}</p>
               </div>

src/builder/MutationBuilder.ts

@@ -1,4 +1,5 @@
 import {
+  Mutation,
   MutationFilters,
   MutationFunction,
   MutationKey,
@@ -11,7 +12,6 @@ import {
   useMutationState,
   useQueryClient,
 } from '@tanstack/react-query';
-import { useStableCallback } from '../hooks/useStableCallback';
 import { mergeTagOptions } from '../tags/mergeTagOptions';
 import { QueryInvalidatesMetadata } from '../tags/types';
 import { QueryBuilder } from './QueryBuilder';
@@ -115,24 +115,12 @@ export class MutationBuilderFrozen<T extends BuilderTypeTemplate> {
     return useIsMutating(this.getMutationFilters(vars, filters), this.config.queryClient);
   };
 
-  useAllMutations: (filters?: MutationFilters<T['data'], T['error'], T['vars']>) => MutationStateHelper<T> = (
-    filters,
-  ) => {
-    const list = useMutationState({ filters: this.getMutationFilters(undefined, filters) }, this.config.queryClient);
-
-    const getMutation: MutationStateHelper<T>['getMutation'] = useStableCallback(
-      (vars, predicate?: (mutation: MutationState<T['data'], T['error'], T['vars']>) => boolean) =>
-        list.findLast((m) => areKeysEqual([m.variables], [vars]) && (!predicate || predicate(m))),
-    );
-
-    return { list, getMutation };
-  };
-
-  useMutationState: (
-    vars: T['vars'],
+  useMutationState: <TSelect = Mutation<T['data'], T['error'], T['vars']>>(
+    vars?: T['vars'],
     filters?: MutationFilters<T['data'], T['error'], T['vars']>,
-  ) => MutationState<T['data'], T['error'], T['vars']> | undefined = (vars, filters) => {
-    return useMutationState({ filters: this.getMutationFilters(vars, filters) }, this.config.queryClient)[0];
+    select?: (mt: Mutation<T['data'], T['error'], T['vars']>) => TSelect,
+  ) => TSelect[] = (vars, filters, select) => {
+    return useMutationState({ filters: this.getMutationFilters(vars, filters), select }, this.config.queryClient);
   };
 
   readonly getMutation = (