addressing comments on types

src/core/hydration.ts

@@ -1,3 +1,4 @@
+import type { ContextOptions } from '../reactjs/types'
 import type { QueryClient } from './queryClient'
 import type { Query, QueryState } from './query'
 import type {
@@ -17,12 +18,11 @@ export interface DehydrateOptions {
   shouldDehydrateQuery?: ShouldDehydrateQueryFunction
 }
 
-export interface HydrateOptions {
+export interface HydrateOptions extends ContextOptions {
   defaultOptions?: {
     queries?: QueryOptions
     mutations?: MutationOptions
   }
-  context?: React.Context<QueryClient | undefined>
 }
 
 interface DehydratedMutation {

src/core/utils.ts

@@ -154,14 +154,17 @@ export function parseFilterArgs<
     : [arg1 || {}, arg2]) as [TFilters, TOptions]
 }
 
-export function parseMutationFilterArgs<TOptions = unknown>(
-  arg1?: QueryKey | MutationFilters,
-  arg2?: MutationFilters | TOptions,
+export function parseMutationFilterArgs<
+  TFilters extends MutationFilters,
+  TOptions = unknown
+>(
+  arg1?: QueryKey | TFilters,
+  arg2?: TFilters | TOptions,
   arg3?: TOptions
-): [MutationFilters | undefined, TOptions | undefined] {
+): [TFilters, TOptions | undefined] {
   return (isQueryKey(arg1)
     ? [{ ...arg2, mutationKey: arg1 }, arg3]
-    : [arg1, arg2]) as [MutationFilters | undefined, TOptions | undefined]
+    : [arg1 || {}, arg2]) as [TFilters, TOptions]
 }
 
 export function matchQuery(

src/devtools/devtools.tsx

@@ -1,6 +1,11 @@
 import React from 'react'
 
-import { Query, QueryClient, useQueryClient, onlineManager } from 'react-query'
+import {
+  Query,
+  ContextOptions,
+  useQueryClient,
+  onlineManager,
+} from 'react-query'
 import { matchSorter } from 'match-sorter'
 import useLocalStorage from './useLocalStorage'
 import { useIsMounted, useSafeState } from './utils'
@@ -21,7 +26,7 @@ import Explorer from './Explorer'
 import Logo from './Logo'
 import { noop } from '../core/utils'
 
-interface DevtoolsOptions {
+interface DevtoolsOptions extends ContextOptions {
   /**
    * Set this true if you want the dev tools to default to being open
    */
@@ -58,13 +63,9 @@ interface DevtoolsOptions {
    * Defaults to 'aside'.
    */
   containerElement?: string | any
-  /**
-   * Use this to pass your React Query context. Otherwise, the default will be used.
-   */
-  context?: React.Context<QueryClient | undefined>
 }
 
-interface DevtoolsPanelOptions {
+interface DevtoolsPanelOptions extends ContextOptions {
   /**
    * The standard React style object used to style a component with inline styles
    */
@@ -85,10 +86,6 @@ interface DevtoolsPanelOptions {
    * Handles the opening and closing the devtools panel
    */
   handleDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
-  /**
-   * Use this to pass your React Query context. Otherwise, the default will be used.
-   */
-  context?: React.Context<QueryClient | undefined>
 }
 
 const isServer = typeof window === 'undefined'

src/reactjs/QueryClientProvider.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { QueryClient } from '../core'
+import { ContextOptions } from '../reactjs/types'
 
 declare global {
   interface Window {
@@ -36,11 +37,7 @@ function getQueryClientContext(
   return defaultContext
 }
 
-export const useQueryClient = ({
-  context,
-}: {
-  context?: React.Context<QueryClient | undefined>
-} = {}) => {
+export const useQueryClient = ({ context }: ContextOptions = {}) => {
   const queryClient = React.useContext(
     getQueryClientContext(context, React.useContext(QueryClientSharingContext))
   )
@@ -52,10 +49,9 @@ export const useQueryClient = ({
   return queryClient
 }
 
-export interface QueryClientProviderProps {
+export interface QueryClientProviderProps extends ContextOptions {
   client: QueryClient
   contextSharing?: boolean
-  context?: React.Context<QueryClient | undefined>
 }
 
 export const QueryClientProvider: React.FC<QueryClientProviderProps> = ({

src/reactjs/tests/utils.tsx

@@ -1,12 +1,17 @@
 import { act, render } from '@testing-library/react'
 import React from 'react'
 
-import { MutationOptions, QueryClient, QueryClientProvider } from '../..'
+import {
+  MutationOptions,
+  ContextOptions,
+  QueryClient,
+  QueryClientProvider,
+} from '../..'
 
 export function renderWithClient(
   client: QueryClient,
   ui: React.ReactElement,
-  options: { context?: React.Context<QueryClient | undefined> } = {}
+  options: ContextOptions = {}
 ) {
   const { rerender, ...result } = render(
     <QueryClientProvider client={client} context={options.context}>

src/reactjs/types.ts

@@ -10,21 +10,21 @@ import {
 } from '../core/types'
 import type { QueryClient } from '../core/queryClient'
 
+export interface ContextOptions {
+  /**
+   * Use this to pass your React Query context. Otherwise, the default will be used.
+   */
+  context?: React.Context<QueryClient | undefined>
+}
+
 export interface UseBaseQueryOptions<
   TQueryFnData = unknown,
   TError = unknown,
   TData = TQueryFnData,
   TQueryData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey
-> extends QueryObserverOptions<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryData,
-    TQueryKey
-  > {
-  context?: React.Context<QueryClient | undefined>
-}
+> extends ContextOptions,
+    QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey> {}
 
 export interface UseQueryOptions<
   TQueryFnData = unknown,
@@ -45,15 +45,14 @@ export interface UseInfiniteQueryOptions<
   TData = TQueryFnData,
   TQueryData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey
-> extends InfiniteQueryObserverOptions<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryData,
-    TQueryKey
-  > {
-  context?: React.Context<QueryClient | undefined>
-}
+> extends ContextOptions,
+    InfiniteQueryObserverOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData,
+      TQueryKey
+    > {}
 
 export type UseBaseQueryResult<
   TData = unknown,
@@ -75,12 +74,11 @@ export interface UseMutationOptions<
   TError = unknown,
   TVariables = void,
   TContext = unknown
-> extends Omit<
-    MutationObserverOptions<TData, TError, TVariables, TContext>,
-    '_defaulted' | 'variables'
-  > {
-  context?: React.Context<QueryClient | undefined>
-}
+> extends ContextOptions,
+    Omit<
+      MutationObserverOptions<TData, TError, TVariables, TContext>,
+      '_defaulted' | 'variables'
+    > {}
 
 export type UseMutateFunction<
   TData = unknown,

src/reactjs/useIsFetching.ts

@@ -2,13 +2,11 @@ import React from 'react'
 
 import { notifyManager } from '../core/notifyManager'
 import { QueryKey } from '../core/types'
-import { QueryClient } from '../core/queryClient'
+import { ContextOptions } from '../reactjs/types'
 import { parseFilterArgs, QueryFilters } from '../core/utils'
 import { useQueryClient } from './QueryClientProvider'
 
-interface Options {
-  context?: React.Context<QueryClient | undefined>
-}
+interface Options extends ContextOptions {}
 
 export function useIsFetching(filters?: QueryFilters, options?: Options): number
 export function useIsFetching(

src/reactjs/useIsMutating.ts

@@ -2,13 +2,11 @@ import React from 'react'
 
 import { notifyManager } from '../core/notifyManager'
 import { MutationKey } from '../core/types'
-import { QueryClient } from '../core/queryClient'
+import { ContextOptions } from '../reactjs/types'
 import { MutationFilters, parseMutationFilterArgs } from '../core/utils'
 import { useQueryClient } from './QueryClientProvider'
 
-interface Options {
-  context?: React.Context<QueryClient | undefined>
-}
+interface Options extends ContextOptions {}
 
 export function useIsMutating(
   filters?: MutationFilters,
@@ -27,7 +25,7 @@ export function useIsMutating(
   const mountedRef = React.useRef(false)
   const [filters, options = {}] = parseMutationFilterArgs(arg1, arg2, arg3)
 
-  const queryClient = useQueryClient({ context: (options as Options).context })
+  const queryClient = useQueryClient({ context: options.context })
 
   const [isMutating, setIsMutating] = React.useState(
     queryClient.isMutating(filters)