Using MutationCache with Context Providers

Provide an example of integrating MutationCache with React context providers to facilitate global state management and updates across different components.
import React, { createContext, useContext, useState, useEffect } from 'react';
import { MutationCache, QueryClient, QueryClientProvider } from 'react-query';
Imports the necessary React and React Query functions and classes.
const mutationCache = new MutationCache();
Creates a new instance of MutationCache.
const queryClient = new QueryClient({ mutationCache });
Initializes QueryClient with the MutationCache for global access.
const MutationCacheContext = createContext();
Creates a React context to provide MutationCache access across components.
export const MutationCacheProvider = ({ children }) => (
  <MutationCacheContext.Provider value={mutationCache}>
Defines a provider component to pass the MutationCache down the component tree.
export const useMutationCache = () => useContext(MutationCacheContext);
Defines a custom hook for accessing the MutationCache from components.
const App = () => (
  <QueryClientProvider client={queryClient}>
      {/* Child components that use mutation cache */}
Wraps the application with QueryClientProvider and MutationCacheProvider to make the mutation cache available throughout the app.