Breaking News: Grepper is joining You.com. Read the official announcement!

Status of useMutation not shared across usages/components with custom hook (like useQuery does)

Sore Salamander answered on July 13, 2022 Popularity 1/10 Helpfulness 1/10

answer Status of useMutation not shared across usages/components with custom hook (like useQuery does)

Status of useMutation not shared across usages/components with custom hook (like useQuery does)

Comment

Just thought to provide code for another workaround for this issue, which doesn't require manually keeping state but still allows different components to share the same mutation object. As mentioned, just wrap a react context around the custom hook and the desired functionality will be achieved.
https://codesandbox.io/s/silent-frost-mjxlrf?file=/src/App.js

const CustomMutationProvider = ({ children }) => {
  const mutation = useMutation({
    mutationKey: "UpdateData",
    mutationFn: async () => {
      // Fake api call
      await new Promise((resolve, reject) => setTimeout(reject, 2000));
    }
  });
  return (
    <CustomMutationContext.Provider value={mutation}>
      {children}
    </CustomMutationContext.Provider>
  );
};
const CustomMutationContext = React.createContext();
const useCustomMutation = () => React.useContext(CustomMutationContext);
And use like so:

const queryClient = new QueryClient();
export default function App() {
  return (
    <div className="App">
      <QueryClientProvider client={queryClient}>
        <CustomMutationProvider>
          <ComponentA />
          <ComponentB />
        </CustomMutationProvider>
      </QueryClientProvider>
    </div>
  );
}
const ComponentA = () => {
  const { mutate, status } = useCustomMutation();
  return (
    <div>
      <h1>Component A </h1>
      Status: {status}
      <br />
      <button onClick={mutate}>Update</button>
    </div>
  );
};
const ComponentB = () => {
  const { mutate, status } = useCustomMutation();
  return (
    <div>
      <h1>Component B </h1>
      Status: {status}
      <br />
      <button onClick={mutate}>Update</button>
    </div>
  );
};

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: github.com

Tags: across hook shared status whatever

Link to this answer
Share Copy Link

Contributed on Jul 13 2022

Sore Salamander

0 Answers Avg Quality 2/10

Status of useMutation not shared across usages/components with custom hook (like useQuery does)

Contents

More Related Answers

Status of useMutation not shared across usages/components with custom hook (like useQuery does)

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.