feat: isolate wagmi's React Query queryClient instance. (#963)

* feat: Isolate wagmi query context from react-query default context

* move context addition into custom query hooks

* alphabetize exports

* change imports to be from utils instead of utils/query

* export useMutation and useQueryClient hooks from react package

* add changeset

* tests: update snapshots

* refactor: rename imports

* chore: update changeset

Co-authored-by: moxey.eth <jakemoxey@gmail.com>

.changeset/khaki-peaches-reflect.md

@@ -0,0 +1,5 @@
+---
+'wagmi': patch
+---
+
+Isolate wagmi's React Query `queryClient` instance.

packages/react/src/context.tsx

@@ -1,4 +1,4 @@
-import { QueryClientProvider } from '@tanstack/react-query'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { Provider, WebSocketProvider } from '@wagmi/core'
 import * as React from 'react'
 
@@ -8,6 +8,10 @@ export const Context = React.createContext<
   Client<Provider, WebSocketProvider> | undefined
 >(undefined)
 
+export const queryClientContext = React.createContext<QueryClient | undefined>(
+  undefined,
+)
+
 export type WagmiConfigProps<
   TProvider extends Provider = Provider,
   TWebSocketProvider extends WebSocketProvider = WebSocketProvider,
@@ -24,7 +28,10 @@ export function WagmiConfig<
 }: React.PropsWithChildren<WagmiConfigProps<TProvider, TWebSocketProvider>>) {
   return (
     <Context.Provider value={client as unknown as Client}>
-      <QueryClientProvider client={client.queryClient}>
+      <QueryClientProvider
+        client={client.queryClient}
+        context={queryClientContext}
+      >
         {children}
       </QueryClientProvider>
     </Context.Provider>

packages/react/src/hooks/accounts/useConnect.ts

@@ -1,9 +1,9 @@
-import { useMutation } from '@tanstack/react-query'
 import { ConnectArgs, ConnectResult, connect } from '@wagmi/core'
 import * as React from 'react'
 
 import { useClient } from '../../context'
 import { MutationConfig } from '../../types'
+import { useMutation } from '../utils'
 
 export type UseConnectArgs = Partial<ConnectArgs>
 

packages/react/src/hooks/accounts/useDisconnect.ts

@@ -1,6 +1,7 @@
-import { useMutation } from '@tanstack/react-query'
 import { disconnect } from '@wagmi/core'
 
+import { useMutation } from '../utils'
+
 export type UseDisconnectConfig = {
   /** Function to invoke when an error is thrown while connecting. */
   onError?: (error: Error, context: unknown) => void | Promise<unknown>

packages/react/src/hooks/accounts/useSignMessage.ts

@@ -1,8 +1,8 @@
-import { useMutation } from '@tanstack/react-query'
 import { SignMessageArgs, SignMessageResult, signMessage } from '@wagmi/core'
 import * as React from 'react'
 
 import { MutationConfig } from '../../types'
+import { useMutation } from '../utils'
 
 export type UseSignMessageArgs = Partial<SignMessageArgs>
 

packages/react/src/hooks/accounts/useSignTypedData.ts

@@ -1,4 +1,3 @@
-import { useMutation } from '@tanstack/react-query'
 import {
   SignTypedDataArgs,
   SignTypedDataResult,
@@ -7,6 +6,7 @@ import {
 import * as React from 'react'
 
 import { MutationConfig } from '../../types'
+import { useMutation } from '../utils'
 
 export type UseSignTypedDataArgs = Partial<SignTypedDataArgs>
 

packages/react/src/hooks/accounts/useSigner.ts

@@ -1,4 +1,3 @@
-import { useQueryClient } from '@tanstack/react-query'
 import {
   FetchSignerArgs,
   FetchSignerResult,
@@ -9,7 +8,7 @@ import {
 import * as React from 'react'
 
 import { QueryConfig, QueryFunctionArgs } from '../../types'
-import { useChainId, useQuery } from '../utils'
+import { useChainId, useQuery, useQueryClient } from '../utils'
 
 export type UseSignerConfig = Omit<
   QueryConfig<FetchSignerResult, Error>,

packages/react/src/hooks/accounts/useSwitchNetwork.ts

@@ -1,4 +1,3 @@
-import { useMutation } from '@tanstack/react-query'
 import {
   SwitchNetworkArgs,
   SwitchNetworkResult,
@@ -8,7 +7,7 @@ import * as React from 'react'
 
 import { useClient } from '../../context'
 import { MutationConfig } from '../../types'
-import { useForceUpdate } from '../utils'
+import { useForceUpdate, useMutation } from '../utils'
 
 export type UseSwitchNetworkArgs = Partial<SwitchNetworkArgs>
 

packages/react/src/hooks/contracts/useContractWrite.ts

@@ -1,4 +1,3 @@
-import { useMutation } from '@tanstack/react-query'
 import {
   WriteContractArgs,
   WriteContractPreparedArgs,
@@ -8,6 +7,7 @@ import {
 import * as React from 'react'
 
 import { MutationConfig } from '../../types'
+import { useMutation } from '../utils'
 
 export type UseContractWriteArgs = Omit<WriteContractArgs, 'request' | 'type'> &
   (

packages/react/src/hooks/contracts/useDeprecatedContractWrite.ts

@@ -1,4 +1,3 @@
-import { useMutation } from '@tanstack/react-query'
 import {
   DeprecatedWriteContractConfig,
   DeprecatedWriteContractResult,
@@ -7,6 +6,7 @@ import {
 import * as React from 'react'
 
 import { MutationConfig } from '../../types'
+import { useMutation } from '../utils'
 
 export type UseDeprecatedContractWriteArgs = DeprecatedWriteContractConfig
 export type UseDeprecatedContractWriteMutationArgs = Pick<

packages/react/src/hooks/index.ts

@@ -37,4 +37,11 @@ export {
   useWaitForTransaction,
 } from './transactions'
 
-export { useChainId, useBaseQuery, useQuery, useInfiniteQuery } from './utils'
+export {
+  useChainId,
+  useBaseQuery,
+  useQuery,
+  useInfiniteQuery,
+  useMutation,
+  useQueryClient,
+} from './utils'

packages/react/src/hooks/network-status/useBlockNumber.ts

@@ -1,4 +1,3 @@
-import { useQueryClient } from '@tanstack/react-query'
 import {
   FetchBlockNumberArgs,
   FetchBlockNumberResult,
@@ -9,7 +8,7 @@ import * as React from 'react'
 
 import { QueryConfig, QueryFunctionArgs } from '../../types'
 import { useProvider, useWebSocketProvider } from '../providers'
-import { useChainId, useQuery } from '../utils'
+import { useChainId, useQuery, useQueryClient } from '../utils'
 
 type UseBlockNumberArgs = Partial<FetchBlockNumberArgs> & {
   /** Function fires when a new block is created */

packages/react/src/hooks/transactions/useDeprecatedSendTransaction.ts

@@ -1,4 +1,3 @@
-import { useMutation } from '@tanstack/react-query'
 import {
   DeprecatedSendTransactionArgs,
   DeprecatedSendTransactionResult,
@@ -7,6 +6,7 @@ import {
 import * as React from 'react'
 
 import { MutationConfig } from '../../types'
+import { useMutation } from '../utils'
 
 export type UseDeprecatedSendTransactionArgs =
   Partial<DeprecatedSendTransactionArgs>

packages/react/src/hooks/transactions/useSendTransaction.ts

@@ -1,4 +1,3 @@
-import { useMutation } from '@tanstack/react-query'
 import {
   SendTransactionArgs,
   SendTransactionPreparedRequest,
@@ -9,6 +8,7 @@ import {
 import * as React from 'react'
 
 import { MutationConfig } from '../../types'
+import { useMutation } from '../utils'
 
 export type UseSendTransactionArgs = Omit<
   SendTransactionArgs,

packages/react/src/hooks/utils/index.ts

@@ -1,4 +1,10 @@
-export { useBaseQuery, useQuery, useInfiniteQuery } from './query'
+export {
+  useBaseQuery,
+  useQuery,
+  useInfiniteQuery,
+  useMutation,
+  useQueryClient,
+} from './query'
 export { useChainId } from './useChainId'
 export { useForceUpdate } from './useForceUpdate'
 export { useInvalidateOnBlock } from './useInvalidateOnBlock'

packages/react/src/hooks/utils/query/index.ts

@@ -1,3 +1,5 @@
 export { useBaseQuery } from './useBaseQuery'
 export { useInfiniteQuery } from './useInfiniteQuery'
+export { useMutation } from './useMutation'
 export { useQuery } from './useQuery'
+export { useQueryClient } from './useQueryClient'

packages/react/src/hooks/utils/query/useInfiniteQuery.ts

@@ -7,6 +7,7 @@ import {
   UseInfiniteQueryOptions,
 } from '@tanstack/react-query'
 
+import { queryClientContext as context } from '../../../context'
 import { useBaseQuery } from './useBaseQuery'
 import { parseQueryArgs, trackResult } from './utils'
 
@@ -129,7 +130,7 @@ export function useInfiniteQuery<
 ): UseInfiniteQueryResult<TData, TError> {
   const parsedOptions = parseQueryArgs(arg1, arg2, arg3)
   const baseQuery = useBaseQuery(
-    parsedOptions,
+    { context, ...parsedOptions },
     InfiniteQueryObserver as typeof QueryObserver,
   )
 

packages/react/src/hooks/utils/query/useMutation.ts

@@ -0,0 +1,78 @@
+import {
+  MutationFunction,
+  MutationKey,
+  UseMutationOptions,
+  UseMutationResult,
+  parseMutationArgs,
+  useMutation as useMutation_,
+} from '@tanstack/react-query'
+
+import { queryClientContext as context } from '../../../context'
+
+export function useMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+>(
+  options: UseMutationOptions<TData, TError, TVariables, TContext>,
+): UseMutationResult<TData, TError, TVariables, TContext>
+
+export function useMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+>(
+  mutationFn: MutationFunction<TData, TVariables>,
+  options?: Omit<
+    UseMutationOptions<TData, TError, TVariables, TContext>,
+    'mutationFn'
+  >,
+): UseMutationResult<TData, TError, TVariables, TContext>
+
+export function useMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+>(
+  mutationKey: MutationKey,
+  options?: Omit<
+    UseMutationOptions<TData, TError, TVariables, TContext>,
+    'mutationKey'
+  >,
+): UseMutationResult<TData, TError, TVariables, TContext>
+
+export function useMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+>(
+  mutationKey: MutationKey,
+  mutationFn?: MutationFunction<TData, TVariables>,
+  options?: Omit<
+    UseMutationOptions<TData, TError, TVariables, TContext>,
+    'mutationKey' | 'mutationFn'
+  >,
+): UseMutationResult<TData, TError, TVariables, TContext>
+
+export function useMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+>(
+  arg1:
+    | MutationKey
+    | MutationFunction<TData, TVariables>
+    | UseMutationOptions<TData, TError, TVariables, TContext>,
+  arg2?:
+    | MutationFunction<TData, TVariables>
+    | UseMutationOptions<TData, TError, TVariables, TContext>,
+  arg3?: UseMutationOptions<TData, TError, TVariables, TContext>,
+): UseMutationResult<TData, TError, TVariables, TContext> {
+  const options = parseMutationArgs(arg1, arg2, arg3)
+  return useMutation_({ context, ...options })
+}

packages/react/src/hooks/utils/query/useQuery.ts

@@ -6,6 +6,8 @@ import {
   UseQueryOptions,
 } from '@tanstack/react-query'
 
+import { queryClientContext as context } from '../../../context'
+
 import { useBaseQuery } from './useBaseQuery'
 import { parseQueryArgs, trackResult } from './utils'
 
@@ -113,7 +115,7 @@ export function useQuery<
   arg3?: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
 ): UseQueryResult<TData, TError> {
   const parsedOptions = parseQueryArgs(arg1, arg2, arg3)
-  const baseQuery = useBaseQuery(parsedOptions, QueryObserver)
+  const baseQuery = useBaseQuery({ context, ...parsedOptions }, QueryObserver)
 
   const result = {
     data: baseQuery.data,

packages/react/src/hooks/utils/query/useQueryClient.ts

@@ -0,0 +1,5 @@
+import { useQueryClient as useQueryClient_ } from '@tanstack/react-query'
+
+import { queryClientContext as context } from '../../../context'
+
+export const useQueryClient = () => useQueryClient_({ context })

packages/react/src/hooks/utils/useInvalidateOnBlock.ts

@@ -1,6 +1,7 @@
-import { QueryKey, useQueryClient } from '@tanstack/react-query'
+import { QueryKey } from '@tanstack/react-query'
 
 import { useBlockNumber } from '../network-status'
+import { useQueryClient } from './query'
 
 export function useInvalidateOnBlock({
   chainId,

packages/react/src/index.test.ts

@@ -29,9 +29,11 @@ it('should expose correct exports', () => {
       "useEnsResolver",
       "useFeeData",
       "useInfiniteQuery",
+      "useMutation",
       "useNetwork",
       "useProvider",
       "useQuery",
+      "useQueryClient",
       "useSendTransaction",
       "usePrepareContractWrite",
       "usePrepareSendTransaction",

packages/react/src/index.ts

@@ -25,9 +25,11 @@ export {
   useEnsResolver,
   useFeeData,
   useInfiniteQuery,
+  useMutation,
   useNetwork,
   useProvider,
   useQuery,
+  useQueryClient,
   useSendTransaction,
   usePrepareContractWrite,
   usePrepareSendTransaction,