Skip to content

Commit 8ea29e2

Browse files
aj-mayjxom
aj-may
and
jxom
authored
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 <[email protected]>
1 parent 2b5a9e5 commit 8ea29e2

23 files changed

+137
-21
lines changed

‎.changeset/khaki-peaches-reflect.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'wagmi': patch
3+
---
4+
5+
Isolate wagmi's React Query `queryClient` instance.

‎packages/react/src/context.tsx

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { QueryClientProvider } from '@tanstack/react-query'
1+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
22
import { Provider, WebSocketProvider } from '@wagmi/core'
33
import * as React from 'react'
44

@@ -8,6 +8,10 @@ export const Context = React.createContext<
88
Client<Provider, WebSocketProvider> | undefined
99
>(undefined)
1010

11+
export const queryClientContext = React.createContext<QueryClient | undefined>(
12+
undefined,
13+
)
14+
1115
export type WagmiConfigProps<
1216
TProvider extends Provider = Provider,
1317
TWebSocketProvider extends WebSocketProvider = WebSocketProvider,
@@ -24,7 +28,10 @@ export function WagmiConfig<
2428
}: React.PropsWithChildren<WagmiConfigProps<TProvider, TWebSocketProvider>>) {
2529
return (
2630
<Context.Provider value={client as unknown as Client}>
27-
<QueryClientProvider client={client.queryClient}>
31+
<QueryClientProvider
32+
client={client.queryClient}
33+
context={queryClientContext}
34+
>
2835
{children}
2936
</QueryClientProvider>
3037
</Context.Provider>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { useMutation } from '@tanstack/react-query'
21
import { ConnectArgs, ConnectResult, connect } from '@wagmi/core'
32
import * as React from 'react'
43

54
import { useClient } from '../../context'
65
import { MutationConfig } from '../../types'
6+
import { useMutation } from '../utils'
77

88
export type UseConnectArgs = Partial<ConnectArgs>
99

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { useMutation } from '@tanstack/react-query'
21
import { disconnect } from '@wagmi/core'
32

3+
import { useMutation } from '../utils'
4+
45
export type UseDisconnectConfig = {
56
/** Function to invoke when an error is thrown while connecting. */
67
onError?: (error: Error, context: unknown) => void | Promise<unknown>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { useMutation } from '@tanstack/react-query'
21
import { SignMessageArgs, SignMessageResult, signMessage } from '@wagmi/core'
32
import * as React from 'react'
43

54
import { MutationConfig } from '../../types'
5+
import { useMutation } from '../utils'
66

77
export type UseSignMessageArgs = Partial<SignMessageArgs>
88

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useMutation } from '@tanstack/react-query'
21
import {
32
SignTypedDataArgs,
43
SignTypedDataResult,
@@ -7,6 +6,7 @@ import {
76
import * as React from 'react'
87

98
import { MutationConfig } from '../../types'
9+
import { useMutation } from '../utils'
1010

1111
export type UseSignTypedDataArgs = Partial<SignTypedDataArgs>
1212

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useQueryClient } from '@tanstack/react-query'
21
import {
32
FetchSignerArgs,
43
FetchSignerResult,
@@ -9,7 +8,7 @@ import {
98
import * as React from 'react'
109

1110
import { QueryConfig, QueryFunctionArgs } from '../../types'
12-
import { useChainId, useQuery } from '../utils'
11+
import { useChainId, useQuery, useQueryClient } from '../utils'
1312

1413
export type UseSignerConfig = Omit<
1514
QueryConfig<FetchSignerResult, Error>,

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useMutation } from '@tanstack/react-query'
21
import {
32
SwitchNetworkArgs,
43
SwitchNetworkResult,
@@ -8,7 +7,7 @@ import * as React from 'react'
87

98
import { useClient } from '../../context'
109
import { MutationConfig } from '../../types'
11-
import { useForceUpdate } from '../utils'
10+
import { useForceUpdate, useMutation } from '../utils'
1211

1312
export type UseSwitchNetworkArgs = Partial<SwitchNetworkArgs>
1413

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useMutation } from '@tanstack/react-query'
21
import {
32
WriteContractArgs,
43
WriteContractPreparedArgs,
@@ -8,6 +7,7 @@ import {
87
import * as React from 'react'
98

109
import { MutationConfig } from '../../types'
10+
import { useMutation } from '../utils'
1111

1212
export type UseContractWriteArgs = Omit<WriteContractArgs, 'request' | 'type'> &
1313
(

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useMutation } from '@tanstack/react-query'
21
import {
32
DeprecatedWriteContractConfig,
43
DeprecatedWriteContractResult,
@@ -7,6 +6,7 @@ import {
76
import * as React from 'react'
87

98
import { MutationConfig } from '../../types'
9+
import { useMutation } from '../utils'
1010

1111
export type UseDeprecatedContractWriteArgs = DeprecatedWriteContractConfig
1212
export type UseDeprecatedContractWriteMutationArgs = Pick<

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

+8-1
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,11 @@ export {
3737
useWaitForTransaction,
3838
} from './transactions'
3939

40-
export { useChainId, useBaseQuery, useQuery, useInfiniteQuery } from './utils'
40+
export {
41+
useChainId,
42+
useBaseQuery,
43+
useQuery,
44+
useInfiniteQuery,
45+
useMutation,
46+
useQueryClient,
47+
} from './utils'

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useQueryClient } from '@tanstack/react-query'
21
import {
32
FetchBlockNumberArgs,
43
FetchBlockNumberResult,
@@ -9,7 +8,7 @@ import * as React from 'react'
98

109
import { QueryConfig, QueryFunctionArgs } from '../../types'
1110
import { useProvider, useWebSocketProvider } from '../providers'
12-
import { useChainId, useQuery } from '../utils'
11+
import { useChainId, useQuery, useQueryClient } from '../utils'
1312

1413
type UseBlockNumberArgs = Partial<FetchBlockNumberArgs> & {
1514
/** Function fires when a new block is created */

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useMutation } from '@tanstack/react-query'
21
import {
32
DeprecatedSendTransactionArgs,
43
DeprecatedSendTransactionResult,
@@ -7,6 +6,7 @@ import {
76
import * as React from 'react'
87

98
import { MutationConfig } from '../../types'
9+
import { useMutation } from '../utils'
1010

1111
export type UseDeprecatedSendTransactionArgs =
1212
Partial<DeprecatedSendTransactionArgs>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useMutation } from '@tanstack/react-query'
21
import {
32
SendTransactionArgs,
43
SendTransactionPreparedRequest,
@@ -9,6 +8,7 @@ import {
98
import * as React from 'react'
109

1110
import { MutationConfig } from '../../types'
11+
import { useMutation } from '../utils'
1212

1313
export type UseSendTransactionArgs = Omit<
1414
SendTransactionArgs,

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

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
export { useBaseQuery, useQuery, useInfiniteQuery } from './query'
1+
export {
2+
useBaseQuery,
3+
useQuery,
4+
useInfiniteQuery,
5+
useMutation,
6+
useQueryClient,
7+
} from './query'
28
export { useChainId } from './useChainId'
39
export { useForceUpdate } from './useForceUpdate'
410
export { useInvalidateOnBlock } from './useInvalidateOnBlock'

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

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
export { useBaseQuery } from './useBaseQuery'
22
export { useInfiniteQuery } from './useInfiniteQuery'
3+
export { useMutation } from './useMutation'
34
export { useQuery } from './useQuery'
5+
export { useQueryClient } from './useQueryClient'

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
UseInfiniteQueryOptions,
88
} from '@tanstack/react-query'
99

10+
import { queryClientContext as context } from '../../../context'
1011
import { useBaseQuery } from './useBaseQuery'
1112
import { parseQueryArgs, trackResult } from './utils'
1213

@@ -129,7 +130,7 @@ export function useInfiniteQuery<
129130
): UseInfiniteQueryResult<TData, TError> {
130131
const parsedOptions = parseQueryArgs(arg1, arg2, arg3)
131132
const baseQuery = useBaseQuery(
132-
parsedOptions,
133+
{ context, ...parsedOptions },
133134
InfiniteQueryObserver as typeof QueryObserver,
134135
)
135136

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

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import {
2+
MutationFunction,
3+
MutationKey,
4+
UseMutationOptions,
5+
UseMutationResult,
6+
parseMutationArgs,
7+
useMutation as useMutation_,
8+
} from '@tanstack/react-query'
9+
10+
import { queryClientContext as context } from '../../../context'
11+
12+
export function useMutation<
13+
TData = unknown,
14+
TError = unknown,
15+
TVariables = void,
16+
TContext = unknown,
17+
>(
18+
options: UseMutationOptions<TData, TError, TVariables, TContext>,
19+
): UseMutationResult<TData, TError, TVariables, TContext>
20+
21+
export function useMutation<
22+
TData = unknown,
23+
TError = unknown,
24+
TVariables = void,
25+
TContext = unknown,
26+
>(
27+
mutationFn: MutationFunction<TData, TVariables>,
28+
options?: Omit<
29+
UseMutationOptions<TData, TError, TVariables, TContext>,
30+
'mutationFn'
31+
>,
32+
): UseMutationResult<TData, TError, TVariables, TContext>
33+
34+
export function useMutation<
35+
TData = unknown,
36+
TError = unknown,
37+
TVariables = void,
38+
TContext = unknown,
39+
>(
40+
mutationKey: MutationKey,
41+
options?: Omit<
42+
UseMutationOptions<TData, TError, TVariables, TContext>,
43+
'mutationKey'
44+
>,
45+
): UseMutationResult<TData, TError, TVariables, TContext>
46+
47+
export function useMutation<
48+
TData = unknown,
49+
TError = unknown,
50+
TVariables = void,
51+
TContext = unknown,
52+
>(
53+
mutationKey: MutationKey,
54+
mutationFn?: MutationFunction<TData, TVariables>,
55+
options?: Omit<
56+
UseMutationOptions<TData, TError, TVariables, TContext>,
57+
'mutationKey' | 'mutationFn'
58+
>,
59+
): UseMutationResult<TData, TError, TVariables, TContext>
60+
61+
export function useMutation<
62+
TData = unknown,
63+
TError = unknown,
64+
TVariables = void,
65+
TContext = unknown,
66+
>(
67+
arg1:
68+
| MutationKey
69+
| MutationFunction<TData, TVariables>
70+
| UseMutationOptions<TData, TError, TVariables, TContext>,
71+
arg2?:
72+
| MutationFunction<TData, TVariables>
73+
| UseMutationOptions<TData, TError, TVariables, TContext>,
74+
arg3?: UseMutationOptions<TData, TError, TVariables, TContext>,
75+
): UseMutationResult<TData, TError, TVariables, TContext> {
76+
const options = parseMutationArgs(arg1, arg2, arg3)
77+
return useMutation_({ context, ...options })
78+
}

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import {
66
UseQueryOptions,
77
} from '@tanstack/react-query'
88

9+
import { queryClientContext as context } from '../../../context'
10+
911
import { useBaseQuery } from './useBaseQuery'
1012
import { parseQueryArgs, trackResult } from './utils'
1113

@@ -113,7 +115,7 @@ export function useQuery<
113115
arg3?: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
114116
): UseQueryResult<TData, TError> {
115117
const parsedOptions = parseQueryArgs(arg1, arg2, arg3)
116-
const baseQuery = useBaseQuery(parsedOptions, QueryObserver)
118+
const baseQuery = useBaseQuery({ context, ...parsedOptions }, QueryObserver)
117119

118120
const result = {
119121
data: baseQuery.data,

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { useQueryClient as useQueryClient_ } from '@tanstack/react-query'
2+
3+
import { queryClientContext as context } from '../../../context'
4+
5+
export const useQueryClient = () => useQueryClient_({ context })

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { QueryKey, useQueryClient } from '@tanstack/react-query'
1+
import { QueryKey } from '@tanstack/react-query'
22

33
import { useBlockNumber } from '../network-status'
4+
import { useQueryClient } from './query'
45

56
export function useInvalidateOnBlock({
67
chainId,

‎packages/react/src/index.test.ts

+2
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,11 @@ it('should expose correct exports', () => {
2929
"useEnsResolver",
3030
"useFeeData",
3131
"useInfiniteQuery",
32+
"useMutation",
3233
"useNetwork",
3334
"useProvider",
3435
"useQuery",
36+
"useQueryClient",
3537
"useSendTransaction",
3638
"usePrepareContractWrite",
3739
"usePrepareSendTransaction",

‎packages/react/src/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,11 @@ export {
2525
useEnsResolver,
2626
useFeeData,
2727
useInfiniteQuery,
28+
useMutation,
2829
useNetwork,
2930
useProvider,
3031
useQuery,
32+
useQueryClient,
3133
useSendTransaction,
3234
usePrepareContractWrite,
3335
usePrepareSendTransaction,

0 commit comments

Comments
 (0)