# QueryClientProvider

```ts
function QueryClientProvider(props: QueryClientProviderProps): VNode;
```

Defined in: [packages/preact-query/src/QueryClientProvider.tsx:69](https://github.com/TanStack/query/blob/main/packages/preact-query/src/QueryClientProvider.tsx#L69)

Use the `QueryClientProvider` component to connect and provide a `QueryClient` to your application. Also
calls `client.mount()`/`client.unmount()` as this component mounts/unmounts, which subscribes the client to
focus/online events (resuming any paused mutations and refetching as needed when the app regains focus or
comes back online).

## Parameters

### props

[`QueryClientProviderProps`](../type-aliases/QueryClientProviderProps.md)

The `client` to provide, and the `children` that get access to it.

<a id="props-properties"></a>

#### `props` properties

| Property | Type | Description |
| ------ | ------ | ------ |
| <a id="props-property-children"></a> `children?` | `ComponentChildren` | The components that get access to the provided `QueryClient`. |
| <a id="props-property-client"></a> `client` | [`QueryClient`](../classes/QueryClient.md) | **Required** The `QueryClient` instance to provide. |

## Returns

`VNode`

The provided `children`, wrapped so they can read the `QueryClient` via `useQueryClient`.

## Example

```tsx
import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'

const queryClient = new QueryClient()

function App() {
  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}
```