Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Addressing comments and merge conflicts from rebase
Browse files Browse the repository at this point in the history
Nick Galloway committed Mar 20, 2022
1 parent d451d4b commit 10b9034
Showing 13 changed files with 109 additions and 20 deletions.
2 changes: 1 addition & 1 deletion docs/src/pages/devtools.md
Original file line number Diff line number Diff line change
@@ -52,7 +52,7 @@ function App() {
- Defaults to `bottom-left`
- The position of the React Query logo to open and close the devtools panel
- `context?: React.Context<QueryClient | undefined>`
- Use this to use a custom React Query context. Otherwise, the default will be used.
- Use this to use a custom React Query context. Otherwise, `defaultContext` will be used.

## Embedded Mode

87 changes: 87 additions & 0 deletions docs/src/pages/guides/migrating-to-react-query-4.md
Original file line number Diff line number Diff line change
@@ -332,3 +332,90 @@ When using the [functional updater form of setQueryData](../reference/QueryClien
(previousTodo) => previousTodo ? { ...previousTodo, done: true } : undefined
)
```

### Custom Contexts for Multiple Providers

Custom contexts can now be specified to pair hooks with their matching `Provider`. This is critical when there may be multiple React Query `Provider` instances in the component tree and you need to ensure your hook uses the correct `Provider` instance.

An example:

1) Create a data package.

```tsx
// Our first data package: @my-scope/container-data

const context = React.createContext<QueryClient | undefined>();
const queryCache = new QueryCache()
const queryClient = new QueryClient({ queryCache, context })


export const useUser = () => {
return useQuery(USER_KEY, USER_FETCHER, {
context,
})
}

export const ContainerDataProvider: React.FC = ({ children }) => {
return (
<QueryClientProvider client={queryClient} context={context}>
{children}
</QueryClientProvider>
);
}

```

2) Create a second data package.

```tsx
// Our second data package: @my-scope/my-component-data

const context = React.createContext<QueryClient | undefined>();
const queryCache = new QueryCache()
const queryClient = new QueryClient({ queryCache, context })


export const useItems = () => {
return useQuery(ITEMS_KEY, ITEMS_FETCHER, {
context,
})
}

export const MyComponentDataProvider: React.FC = ({ children }) => {
return (
<QueryClientProvider client={queryClient} context={context}>
{children}
</QueryClientProvider>
);
}

```

3) Use these two data packages in your application.

```tsx
// Our application

import { ContainerDataProvider, useUser } from "@my-scope/container-data";
import { AppDataProvider } from "@my-scope/app-data";
import { MyComponentDataProvider, useItems } from "@my-scope/my-component-data";

<ContainerDataProvider> // <-- Provides container data (like "user") using its own React Query provider
...
<AppDataProvider> // <-- Provides app data using its own React Query provider (unused in this example)
...
<MyComponentDataProvider> // <-- Provides component data (like "items") using its own React Query provider
<MyComponent />
</MyComponentDataProvider>
...
</AppDataProvider>
...
</ContainerDataProvider>

// Example of hooks provided by the "DataProvider" components above:
const MyComponent = () => {
const user = useUser(); // <-- Uses the context specified in ContainerDataProvider.
const items = useItems(); // <-- Uses the context specified in MyComponentDataProvider
...
}
```
2 changes: 1 addition & 1 deletion docs/src/pages/reference/QueryClientProvider.md
Original file line number Diff line number Diff line change
@@ -24,4 +24,4 @@ function App() {
- defaults to `false`
- Set this to `true` to enable context sharing, which will share the first and at least one instance of the context across the window to ensure that if React Query is used across different bundles or microfrontends they will all use the same **instance** of context, regardless of module scoping.
- `context?: React.Context<QueryClient | undefined>`
- Use this to use a custom React Query context. Otherwise, the default will be used.
- Use this to use a custom React Query context. Otherwise, `defaultContext` will be used.
6 changes: 3 additions & 3 deletions docs/src/pages/reference/hydration.md
Original file line number Diff line number Diff line change
@@ -85,7 +85,7 @@ hydrate(queryClient, dehydratedState, options)
- `mutations: MutationOptions` The default mutation options to use for the hydrated mutations.
- `queries: QueryOptions` The default query options to use for the hydrated queries.
- `context?: React.Context<QueryClient | undefined>`
- Use this to use a custom React Query context. Otherwise, the default will be used.
- Use this to use a custom React Query context. Otherwise, `defaultContext` will be used.

### Limitations

@@ -111,7 +111,7 @@ useHydrate(dehydratedState, options)
- `defaultOptions: QueryOptions`
- The default query options to use for the hydrated queries.
- `context?: React.Context<QueryClient | undefined>`
- Use this to use a custom React Query context. Otherwise, the default will be used.
- Use this to use a custom React Query context. Otherwise, `defaultContext` will be used.

## `Hydrate`

@@ -134,4 +134,4 @@ function App() {
- `defaultOptions: QueryOptions`
- The default query options to use for the hydrated queries.
- `context?: React.Context<QueryClient | undefined>`
- Use this to use a custom React Query context. Otherwise, the default will be used.
- Use this to use a custom React Query context. Otherwise, `defaultContext` will be used.
2 changes: 1 addition & 1 deletion docs/src/pages/reference/useIsFetching.md
Original file line number Diff line number Diff line change
@@ -18,7 +18,7 @@ const isFetchingPosts = useIsFetching(['posts'])
- `queryKey?: QueryKey`: [Query Keys](../guides/query-keys)
- `filters?: QueryFilters`: [Query Filters](../guides/filters#query-filters)
- `context?: React.Context<QueryClient | undefined>`
- Use this to use a custom React Query context. Otherwise, the default will be used.
- Use this to use a custom React Query context. Otherwise, `defaultContext` will be used.

**Returns**

2 changes: 1 addition & 1 deletion docs/src/pages/reference/useIsMutating.md
Original file line number Diff line number Diff line change
@@ -18,7 +18,7 @@ const isMutatingPosts = useIsMutating(['posts'])
- `mutationKey?: string | unknown[]`
- `filters?: MutationFilters`: [Mutation Filters](../guides/filters#mutation-filters)
- `context?: React.Context<QueryClient | undefined>`
- Use this to use a custom React Query context. Otherwise, the default will be used.
- Use this to use a custom React Query context. Otherwise, `defaultContext` will be used.

**Returns**

2 changes: 1 addition & 1 deletion docs/src/pages/reference/useMutation.md
Original file line number Diff line number Diff line change
@@ -88,7 +88,7 @@ mutate(variables, {
- Optional
- If set, stores additional information on the mutation cache entry that can be used as needed. It will be accessible wherever the `mutation` is available (eg. `onError`, `onSuccess` functions of the `MutationCache`).
- `context?: React.Context<QueryClient | undefined>`
- Use this to use a custom React Query context. Otherwise, the default will be used.
- Use this to use a custom React Query context. Otherwise, `defaultContext` will be used.

**Returns**

2 changes: 1 addition & 1 deletion docs/src/pages/reference/useQueries.md
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ const results = useQueries({
The `useQueries` hook accepts an options object with a **queries** key whose value is an array with query option objects identical to the [`useQuery` hook](/reference/useQuery) (excluding the `context` option).

- `context?: React.Context<QueryClient | undefined>`
- Use this to use a custom React Query context. Otherwise, the default will be used.
- Use this to use a custom React Query context. Otherwise, `defaultContext` will be used.

**Returns**

2 changes: 1 addition & 1 deletion docs/src/pages/reference/useQuery.md
Original file line number Diff line number Diff line change
@@ -186,7 +186,7 @@ const result = useQuery({
- Optional
- If set, stores additional information on the query cache entry that can be used as needed. It will be accessible wherever the `query` is available, and is also part of the `QueryFunctionContext` provided to the `queryFn`.
- `context?: React.Context<QueryClient | undefined>`
- Use this to use a custom React Query context. Otherwise, the default will be used.
- Use this to use a custom React Query context. Otherwise, `defaultContext` will be used.

**Returns**

4 changes: 3 additions & 1 deletion src/reactjs/QueryClientProvider.tsx
Original file line number Diff line number Diff line change
@@ -9,7 +9,9 @@ declare global {
}
}

const defaultContext = React.createContext<QueryClient | undefined>(undefined)
export const defaultContext = React.createContext<QueryClient | undefined>(
undefined
)
const QueryClientSharingContext = React.createContext<boolean>(false)

// If we are given a context, we will use it.
6 changes: 5 additions & 1 deletion src/reactjs/index.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
// Side effects
import './setBatchUpdatesFn'

export { QueryClientProvider, useQueryClient } from './QueryClientProvider'
export {
defaultContext,
QueryClientProvider,
useQueryClient,
} from './QueryClientProvider'
export {
QueryErrorResetBoundary,
useQueryErrorResetBoundary,
10 changes: 3 additions & 7 deletions src/reactjs/tests/Hydrate.test.tsx
Original file line number Diff line number Diff line change
@@ -71,13 +71,9 @@ describe('React hydration', () => {

function Page() {
useHydrate(dehydratedState, { context })
const { data } = useQuery(
['string'],
() => dataQuery(['stringCached']),
{
context,
}
)
const { data } = useQuery(['string'], () => dataQuery(['string']), {
context,
})
return (
<div>
<h1>{data}</h1>
2 changes: 1 addition & 1 deletion src/reactjs/types.ts
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ import type { QueryClient } from '../core/queryClient'

export interface ContextOptions {
/**
* Use this to pass your React Query context. Otherwise, the default will be used.
* Use this to pass your React Query context. Otherwise, `defaultContext` will be used.
*/
context?: React.Context<QueryClient | undefined>
}

0 comments on commit 10b9034

Please sign in to comment.