Skip to content

Conversation

@stefanprobst
Copy link
Contributor

following up on #3035 this pr allows adding a onMutate callback to the global MutationCache. this enables e.g. managing toast notifications for mutations in one central place (see example below). note that it is not allowed to return a context value from the onMutate callback.

example:

import { MutationCache, QueryClient, QueryClientProvider } from "react-query";
import { Toaster, toast } from "react-hot-toast";
import { useState } from "react";

export default function App({ Component, pageProps }) {
  const [client] = useState(() => {
    return new QueryClient({
      mutationCache: new MutationCache({
        onMutate(variables, mutation) {
          toast.loading("Submitting...", { id: mutation.mutationId });
        },
        onSuccess(data, variables, context, mutation) {
          toast.success("Success", { id: mutation.mutationId });
        },
        onError(error, variables, context, mutation) {
          toast.error("Failed", { id: mutation.mutationId });
        },
      }),
    });
  });

  return (
    <QueryClientProvider client={client}>
      <Component {...pageProps} />
      <Toaster />
    </QueryClientProvider>
  );
}

@vercel
Copy link

vercel bot commented Nov 30, 2021

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tanstack/react-query/426N8pmL6BFYsr85iMMVjcAhyU7w
✅ Preview: https://react-query-git-fork-stefanprobst-feat-add-onmu-eabced-tanstack.vercel.app

@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 8182702:

Sandbox Source
tannerlinsley/react-query: basic Configuration
tannerlinsley/react-query Configuration

@codecov
Copy link

codecov bot commented Dec 1, 2021

Codecov Report

Merging #3038 (8182702) into master (dc2df10) will increase coverage by 0.00%.
The diff coverage is 100.00%.

Impacted file tree graph

@@           Coverage Diff           @@
##           master    #3038   +/-   ##
=======================================
  Coverage   96.45%   96.45%           
=======================================
  Files          45       45           
  Lines        2257     2259    +2     
  Branches      641      641           
=======================================
+ Hits         2177     2179    +2     
  Misses         77       77           
  Partials        3        3           
Impacted Files Coverage Δ
src/core/mutationCache.ts 100.00% <ø> (ø)
src/core/mutation.ts 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update dc2df10...8182702. Read the comment docs.

@TkDodo TkDodo merged commit aec640a into TanStack:master Dec 1, 2021
@tannerlinsley
Copy link
Collaborator

🎉 This PR is included in version 3.34.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@stefanprobst stefanprobst deleted the feat/add-onmutate-to-mutationcache branch December 1, 2021 07:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants