diff --git a/src/core/hydration.ts b/src/core/hydration.ts index 52b45fbd8c9..5f8c4256c38 100644 --- a/src/core/hydration.ts +++ b/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 } interface DehydratedMutation { diff --git a/src/core/utils.ts b/src/core/utils.ts index 952455598a4..14773db39ba 100644 --- a/src/core/utils.ts +++ b/src/core/utils.ts @@ -154,14 +154,17 @@ export function parseFilterArgs< : [arg1 || {}, arg2]) as [TFilters, TOptions] } -export function parseMutationFilterArgs( - 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( diff --git a/src/devtools/devtools.tsx b/src/devtools/devtools.tsx index 0251c1b00f1..53a2332b7fe 100644 --- a/src/devtools/devtools.tsx +++ b/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 } -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) => void - /** - * Use this to pass your React Query context. Otherwise, the default will be used. - */ - context?: React.Context } const isServer = typeof window === 'undefined' diff --git a/src/reactjs/QueryClientProvider.tsx b/src/reactjs/QueryClientProvider.tsx index be222bba8c5..d7857be3fc9 100644 --- a/src/reactjs/QueryClientProvider.tsx +++ b/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 -} = {}) => { +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 } export const QueryClientProvider: React.FC = ({ diff --git a/src/reactjs/tests/utils.tsx b/src/reactjs/tests/utils.tsx index 777886e49bc..7ee0d8fb98e 100644 --- a/src/reactjs/tests/utils.tsx +++ b/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 } = {} + options: ContextOptions = {} ) { const { rerender, ...result } = render( diff --git a/src/reactjs/types.ts b/src/reactjs/types.ts index 35f90b73948..efae722f154 100644 --- a/src/reactjs/types.ts +++ b/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 +} + 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 -} +> extends ContextOptions, + QueryObserverOptions {} 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 -} +> 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, - '_defaulted' | 'variables' - > { - context?: React.Context -} +> extends ContextOptions, + Omit< + MutationObserverOptions, + '_defaulted' | 'variables' + > {} export type UseMutateFunction< TData = unknown, diff --git a/src/reactjs/useIsFetching.ts b/src/reactjs/useIsFetching.ts index 577698eb525..8552881e129 100644 --- a/src/reactjs/useIsFetching.ts +++ b/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 -} +interface Options extends ContextOptions {} export function useIsFetching(filters?: QueryFilters, options?: Options): number export function useIsFetching( diff --git a/src/reactjs/useIsMutating.ts b/src/reactjs/useIsMutating.ts index 2f0e945c80e..013525ba2cf 100644 --- a/src/reactjs/useIsMutating.ts +++ b/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 -} +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)