title: React Query: clean way of writing multiple useMutation custom hooks?
body: <p>I've been using the <code>useMutation()</code> hook for crud tasks for my app, and I feel that I'm writing a lot of repeated code, initially my code was like this:</p>
  <pre><code>const [createList] = useCreateList(reset, err =&gt; setError(err.message));
  const [updateList] = useCreateList(reset, err =&gt; setError(err.message));
  const [deleteList] = useCreateList(reset, err =&gt; setError(err.message));
  </code></pre>
  <p>Where the reset function is this:</p>
  <pre class="lang-js prettyprint-override"><code>const reset = () =&gt; {
      setQsButtonStatus(null); 
      setSelectedList(null);
      setTitleValue(&quot;&quot;);
  }
  </code></pre>
  <p>The desired end code I would want is this:</p>
  <pre><code>const {createList, updateList, deleteList} = useListMutation(reset, err =&gt; setError(err.message))
  </code></pre>
  <p>I can make this work but to me the code for it looks very messy <strong>(again a lot of repeated code)</strong>:</p>
  <pre class="lang-js prettyprint-override"><code>import * as List from &quot;./list-api&quot;;
  
  const useListMutation = (onSettled, onError) =&gt; {
  
      const [createList] = useMutation(List.createList, {
          onMutate: (listTitle) =&gt; {
              queryCache.cancelQueries(&quot;lists&quot;);
              const current = queryCache.getQueryData(&quot;lists&quot;);
              queryCache.setQueryData(&quot;lists&quot;, prev =&gt; [...prev, {title: listTitle, id: uuidv4()}])
              return () =&gt; queryCache.setQueryData(&quot;lists&quot;, current);
          },
          onError: (err, variables, rollback) =&gt; {rollback(); onError(err)},
          onSettled: () =&gt; {
              queryCache.invalidateQueries(&quot;lists&quot;);
              onSettled();
          }
      })
  
      const [updateList] = useMutation(List.updateList, {
          onMutate: ({id, titleValue}) =&gt; {
              queryCache.cancelQueries(&quot;lists&quot;);
              const current = queryCache.getQueryData(&quot;lists&quot;);
              queryCache.setQueryData(&quot;lists&quot;, prev =&gt; [
                  ...prev.filter(list =&gt; list._id !== id),
                  {_id: id, title: titleValue}
              ])
              return () =&gt; queryCache.setQueryData(&quot;lists&quot;, current);
          },
          onError: (err, variables, rollback) =&gt; {rollback(); onError(err)},
          onSettled: () =&gt; {
              queryCache.invalidateQueries(&quot;lists&quot;);
              onSettled();
          }
      })
  
      const [deleteList] = useMutation(List.deleteList, {
          onMutate: (id) =&gt; {
              queryCache.cancelQueries(&quot;lists&quot;);
              const current = queryCache.getQueryData(&quot;lists&quot;);
              queryCache.setQueryData(&quot;lists&quot;, prev =&gt; [
                  ...prev.filter(list =&gt; list._id !== id),
              ])
              return () =&gt; queryCache.setQueryData(&quot;lists&quot;, current);
          },
          onError: (err, variables, rollback) =&gt; {rollback(); onError(err)},
          onSettled: () =&gt; {
              queryCache.invalidateQueries(&quot;lists&quot;);
              onSettled();
          }
      })
  
  
      return {createList, updateList, deleteList};
  
  }
  
  export default useListMutation; 
  </code></pre>
  <p>Is there a better way to do this?</p>