Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
6559d84
docs: add query client docs completion design
radist2s May 21, 2026
436dbbc
docs: add query client docs completion plan
radist2s May 21, 2026
9241833
docs: complete getQueryState reference
radist2s May 21, 2026
8a8e3b4
docs: complete getInfiniteQueryState reference
radist2s May 21, 2026
22fb086
docs: complete setInfiniteQueryData reference
radist2s May 21, 2026
2704f39
docs: complete resetQueries reference
radist2s May 21, 2026
2bcc156
docs: add queryable write docs contract design
radist2s May 21, 2026
a8de39b
docs: add queryable write docs contract plan
radist2s May 21, 2026
fbf4fb4
docs: clarify query key example in plan
radist2s May 21, 2026
3819dbb
docs: clarify queryable write hook parameters
radist2s May 21, 2026
7f402e4
docs: show body in multi-query hooks
radist2s May 21, 2026
75b0aca
docs: clarify body in query fetching methods
radist2s May 21, 2026
464a468
docs: clarify body in query cache identity
radist2s May 21, 2026
c5b4a0d
docs: correct query key docs wording
radist2s May 21, 2026
b101225
docs: correct query key docs wording
radist2s May 21, 2026
dddc8cd
docs: clarify body in query filters
radist2s May 21, 2026
672f6e7
docs: polish queryable write operation wording
radist2s May 21, 2026
5410284
docs: address queryable write docs review
radist2s May 21, 2026
594355b
docs: address queryable write docs review
radist2s May 21, 2026
28bdca4
docs: clarify conditional query parameters
radist2s May 21, 2026
efc0e2f
Revert "docs: add query client docs completion design"
radist2s May 24, 2026
a3eb27e
docs: update spelling expect file with corrected terms
radist2s May 24, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .github/actions/spelling/expect.txt
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ radist
reate
redocly
refetched
Refetches
refetches
remarkjs
remarkrc
reqid
Expand All @@ -102,6 +102,7 @@ TMeta
TMutation
TOperation
TPage
TParameters
TParams
TQuery
TRequest
Expand Down
10 changes: 6 additions & 4 deletions website/docs/hooks/useInfiniteQuery.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,15 @@ const query = api.<service>.<operation>.useInfiniteQuery(

### Arguments

1. `parameters: { path, query, header } | QueryKey | undefined`
1. `parameters: { path, query, header, body } | InfiniteQueryKey | undefined`
- **Required only if OpenAPI specification defines required parameters**
- If the operation has no required parameters according to OpenAPI, you can omit this argument
- `parameters` will be used to generate the `QueryKey`
- Instead of an object with `{path, query, header}`, you can pass a `QueryKey` as an array
- `parameters` will be used to generate the _Infinite Query Key_
- For operations generated with `--queryable-write-operations`, query parameters may also include `body`
- In that mode, `body` is part of the infinite query key and cache identity
- Mutation calls keep `body` as a separate top-level argument
- Instead of an object with `{ path, query, header, body }`, you can pass a typed `InfiniteQueryKey` from `getInfiniteQueryKey(...)`
which is also strictly-typed ✨
- If operation does not require parameters, you must pass an empty object `{}` for strictness

2. `infiniteQueryOptions?: UseInfiniteQueryOptions`
- **Optional**, represents the options of the [_useInfiniteQuery(...) 🌴_](https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery) Hook
Expand Down
3 changes: 2 additions & 1 deletion website/docs/hooks/useIsFetching.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ const queriesNumber = api.<service>.<operation>.useIsFetching(
1. `filters?: QueryFiltersByParameters | QueryFiltersByQueryKey`
- **Optional**, represents the [_Query Filters 🌴_](https://tanstack.com/query/latest/docs/framework/react/guides/filters#query-filters)
to be used. If not provided, _all_ normal and _Infinite_ queries will be used to filter.
- `filters.parameters: { path, query, header }` will be used for filtering queries by parameters
- `filters.parameters: { path, query, header, body }` filters queries by operation parameters.
- For operations generated with `--queryable-write-operations`, `body` can be included in `filters.parameters` and participates in query cache identity.
- `filters.infinite: boolean` will be used to filter infinite or normal queries
- `filters.queryKey: QueryKey` will be used for filtering queries by _QueryKey_ instead of parameters
- `filters.queryKey` and `filters.parameters` are mutually exclusive
Expand Down
123 changes: 75 additions & 48 deletions website/docs/hooks/useQueries.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
sidebar_label: useQueries()
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# useQueries(...)

The Hook enables you to concurrently execute multiple asynchronous data fetching operations.
Expand All @@ -20,7 +23,8 @@ const queries = api.<service>.<operation>.useQueries(
- **Required**, represents the options for queries, see [_useQueries(...) 🌴_](https://tanstack.com/query/latest/docs/framework/react/reference/useQueries) documentation
- `options.queries: QueryOptions[]`
- **Required** array of _Queries_ to be executed
- `parameters: { path, query, header }` will be used for the request
- `parameters: { path, query, header, body }` will be used for the request
- For operations generated with `--queryable-write-operations`, `body` is part of the query key and cache identity
- `queryKey: QueryKey` will be used for the request instead of the `parameters`
- `queryKey` and `parameters` are mutually exclusive
- `options.combine?: (result: UseQueriesResults) => TCombinedResult`
Expand All @@ -37,54 +41,77 @@ during code generation.

### Example

```tsx
import { createAPIClient } from './api'; // generated by OpenAPI Qraft

import { requestFn } from '@openapi-qraft/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

const api = createAPIClient({
requestFn,
queryClient,
baseUrl: 'https://api.sandbox.monite.com/v1',
});

const useEntityQueries = () => {
/**
* Initiates two concurrent GET requests:
* ###
* GET /entities/3e3e-3e3e-3e3e
* x-monite-version: 2023-09-01
* ###
* GET /entities/5c5c-5c5c-5c5c
* x-monite-version: 2023-09-01
**/
return api.entities.getEntities.useQueries({
queries: [
{
parameters: {
header: {
'x-monite-version': '2023-09-01',
<Tabs>
<TabItem value="get-queries" label="GET queries" default>
```tsx
import { createAPIClient } from './api'; // generated by OpenAPI Qraft

import { requestFn } from '@openapi-qraft/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

const api = createAPIClient({
requestFn,
queryClient,
baseUrl: 'https://api.sandbox.monite.com/v1',
});

const useEntityQueries = () => {
return api.entities.getEntities.useQueries({
queries: [
{
parameters: {
header: { 'x-monite-version': '2023-09-01' },
path: { entity_id: '3e3e-3e3e-3e3e' },
},
},
path: {
entity_id: '3e3e-3e3e-3e3e',
{
parameters: {
header: { 'x-monite-version': '2023-09-01' },
path: { entity_id: '5c5c-5c5c-5c5c' },
},
},
},
],
combine: (results) => results.map((result) => result.data),
});
};
```
</TabItem>
<TabItem value="queryable-write" label={<span>With <code>body</code></span>}>
```tsx
const firstSearch = {
header: { 'x-monite-version': '1' },
path: { approval_policy_id: '2' },
body: {
name: 'New Name',
description: 'New Description',
},
{
parameters: {
header: {
'x-monite-version': '2023-09-01',
},
path: {
entity_id: '5c5c-5c5c-5c5c',
},
},
};

const secondSearchParameters = {
...firstSearch,
body: {
name: 'Another Name',
description: 'Another Description',
},
],
combine: (results) => results.map((result) => result.data),
});
}
```
};

const secondSearchQueryKey =
api.approvalPolicies.patchApprovalPoliciesId.getQueryKey(
secondSearchParameters
);

const results = api.approvalPolicies.patchApprovalPoliciesId.useQueries({
queries: [
{ parameters: firstSearch },
{ queryKey: secondSearchQueryKey },
],
});

// Never pass `secondSearchParameters` as `queryKey` directly.
// `getQueryKey(...)` builds the tuple shape TanStack Query expects.
// `firstSearch.body` and `secondSearchParameters.body` produce different cache entries.
```
</TabItem>
</Tabs>
6 changes: 4 additions & 2 deletions website/docs/hooks/useQuery.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,13 @@ const query = api.<service>.<operation>.useQuery(

### Arguments

1. `parameters: { path, query, header, body? } | QueryKey | void`
1. `parameters: { path, query, header, body } | QueryKey | void`
- **Required only if OpenAPI specification defines required parameters**
- If the operation has no required parameters according to OpenAPI, you can omit this argument
- `parameters` will be used to generate the `QueryKey`
- For write operations (when using `--queryable-write-operations`), you can include a `body` parameter
- For operations generated with `--queryable-write-operations`, query parameters may also include `body`
- In that mode, `body` is part of the query key and cache identity for query hooks and query-client methods
- Mutation calls keep `body` as a separate top-level argument
- Instead of an object with `{ path, query, header, body }`, you can pass a `QueryKey` as an array
which is also strictly-typed

Expand Down
10 changes: 6 additions & 4 deletions website/docs/hooks/useSuspenseInfiniteQuery.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,15 @@ const query = api.<service>.<operation>.useSuspenseInfiniteQuery(

### Arguments

1. `parameters: { path, query, header } | QueryKey | undefined`
1. `parameters: { path, query, header, body } | InfiniteQueryKey | undefined`
- **Required only if OpenAPI specification defines required parameters**
- If the operation has no required parameters according to OpenAPI, you can omit this argument
- `parameters` will be used to generate the `QueryKey`
- Instead of an object with `{path, query, header}`, you can pass a `QueryKey` as an array
- `parameters` will be used to generate the _Infinite Query Key_
- For operations generated with `--queryable-write-operations`, query parameters may also include `body`
- In that mode, `body` is part of the infinite query key and cache identity
- Mutation calls keep `body` as a separate top-level argument
- Instead of an object with `{ path, query, header, body }`, you can pass a typed `InfiniteQueryKey` from `getInfiniteQueryKey(...)`
which is also strictly-typed ✨
- If operation does not require parameters, you must pass an empty object `{}` for strictness

2. `suspenseInfiniteQueryOptions?: UseSuspenseInfiniteQueryOptions`
- **Optional**, represents the options of the
Expand Down
30 changes: 29 additions & 1 deletion website/docs/hooks/useSuspenseQueries.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ const result = api.<service>.<operation>.useSuspenseQueries(
- **Required**, represents the options for queries, see [_useSuspenseQueries(...) 🌴_](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQueries) documentation
- `options.queries: QueryOptions[]`
- **Required** array of _Queries_ to be executed
- `parameters: { path, query, header }` will be used for the request
- `parameters: { path, query, header, body }` will be used for the request
- For operations generated with `--queryable-write-operations`, `body` is part of the query key and cache identity
- `queryKey: QueryKey` will be used for the request instead of the `parameters`
- `queryKey` and `parameters` are mutually exclusive
- `options.combine?: (result: UseQueriesResults) => TCombinedResult`
Expand Down Expand Up @@ -109,3 +110,30 @@ export default function() {
)
}
```

### Queryable Write Operations

For operations generated with `--queryable-write-operations`, `useSuspenseQueries` accepts the same `parameters.body`
shape as `useQueries`. Each distinct body is part of the query key and creates a distinct cache entry.

```tsx
const queryKey =
api.approvalPolicies.patchApprovalPoliciesId.getQueryKey({
header: { 'x-monite-version': '1' },
path: { approval_policy_id: '2' },
body: { name: 'Another Name' },
});

const results = api.approvalPolicies.patchApprovalPoliciesId.useSuspenseQueries({
queries: [
{
parameters: {
header: { 'x-monite-version': '1' },
path: { approval_policy_id: '2' },
body: { name: 'New Name' },
},
},
{ queryKey },
],
});
```
8 changes: 5 additions & 3 deletions website/docs/hooks/useSuspenseQuery.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,15 @@ const result = api.<service>.<operation>.useSuspenseQuery(

### Arguments

1. `parameters: { path, query, header } | QueryKey | void`
1. `parameters: { path, query, header, body } | QueryKey | void`
- **Required only if OpenAPI specification defines required parameters**
- If the operation has no required parameters according to OpenAPI, you can omit this argument
- `parameters` will be used to generate the `QueryKey`
- Instead of an object with `{path, query, header}`, you can pass a `QueryKey` as an array
- For operations generated with `--queryable-write-operations`, query parameters may also include `body`
- In that mode, `body` is part of the query key and cache identity for query hooks and query-client methods
- Mutation calls keep `body` as a separate top-level argument
- Instead of an object with `{ path, query, header, body }`, you can pass a `QueryKey` as an array
which is also strictly-typed ✨
- If operation does not require parameters, you must pass an empty object `{}` for strictness

2. `queryOptions?: UseQueryOptions`
- **Optional**, represents the options of the [_useSuspenseQuery(...) 🌴_](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQuery) Hook
Expand Down
6 changes: 4 additions & 2 deletions website/docs/query-client/cancelQueries.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ guide for more information.
1. `filters: QueryFiltersByParameters | QueryFiltersByQueryKey`
- **Required**, represents the [_Query Filters 🌴_](https://tanstack.com/query/latest/docs/framework/react/guides/filters#query-filters)
to be used, strictly-typed ✨
- `filters.parameters: { path, query, header }` will be used for filtering queries by parameters
- `filters.parameters: { path, query, header, body }` filters queries by operation parameters.
- For operations generated with `--queryable-write-operations`, `body` can be included in `filters.parameters` and participates in query cache identity.
- `filters.infinite?: boolean` will be used to filter infinite or normal queries, **Required** if `predicate` is provided
- `filters.queryKey?: QueryKey` will be used for filtering queries by _QueryKey_ instead of ~~`parameters`~~
- `filters.queryKey` and `filters.parameters` are mutually exclusive
Expand All @@ -45,7 +46,8 @@ guide for more information.
1. `filters: QueryFiltersByParameters | QueryFiltersByQueryKey`
- **Required**, represents the [_Query Filters 🌴_](https://tanstack.com/query/latest/docs/framework/react/guides/filters#query-filters)
to be used, strictly-typed ✨
- `filters.parameters: { path, query, header }` will be used for filtering queries by parameters
- `filters.parameters: { path, query, header, body }` filters queries by operation parameters.
- For operations generated with `--queryable-write-operations`, `body` can be included in `filters.parameters` and participates in query cache identity.
- `filters.infinite?: boolean` will be used to filter infinite or normal queries, **Required** if `predicate` is provided
- `filters.queryKey?: QueryKey` will be used for filtering queries by _QueryKey_ instead of ~~`parameters`~~
- `filters.queryKey` and `filters.parameters` are mutually exclusive
Expand Down
7 changes: 5 additions & 2 deletions website/docs/query-client/ensureInfiniteQueryData.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,12 @@ const result = api.<service>.<operation>.ensureInfiniteQueryData({
```

### Arguments
1. - `parameters: { path, query, header } | QueryKey | void`
1. - `parameters: { path, query, header, body } | InfiniteQueryKey | void`
- OpenAPI request parameters for the query, strictly-typed ✨
- `parameters` will be used to generate the `QueryKey`
- `parameters` will be used to generate the _Infinite Query Key_
- For operations generated with `--queryable-write-operations`, query parameters may also include `body`
- In that mode, `body` is part of the infinite query key and cache identity
- Mutation calls keep `body` as a separate top-level argument
- `fetchInfiniteQueryOptions?: FetchInfiniteQueryOptions`
- `requestFn?: RequestFn`
- **Optional**, a function that will be used to execute the request
Expand Down
5 changes: 4 additions & 1 deletion website/docs/query-client/ensureQueryData.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,12 @@ const result = api.<service>.<operation>.ensureQueryData({

### Arguments

1. - `parameters: { path, query, header } | QueryKey | void`
1. - `parameters: { path, query, header, body } | QueryKey | void`
- **Required**, OpenAPI request parameters for the query, strictly-typed ✨
- `parameters` will be used to generate the `QueryKey`
- For operations generated with `--queryable-write-operations`, query parameters may also include `body`
- In that mode, `body` is part of the query key and cache identity for query-client methods
- Mutation calls keep `body` as a separate top-level argument
- `requestFn?: RequestFn`
- **Optional**, a function that will be used to execute the request
- `revalidateIfStale?: boolean`
Expand Down
7 changes: 5 additions & 2 deletions website/docs/query-client/fetchInfiniteQuery.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,12 @@ const result = api.<service>.<operation>.fetchInfiniteQuery(

### Arguments

1. - `parameters: { path, query, header } | QueryKey | void`
1. - `parameters: { path, query, header, body } | InfiniteQueryKey | void`
- OpenAPI request parameters for the query, strictly-typed ✨
- `parameters` will be used to generate the `QueryKey`
- `parameters` will be used to generate the _Infinite Query Key_
- For operations generated with `--queryable-write-operations`, query parameters may also include `body`
- In that mode, `body` is part of the infinite query key and cache identity
- Mutation calls keep `body` as a separate top-level argument
- `fetchInfiniteQueryOptions?: FetchInfiniteQueryOptions`
- `requestFn?: RequestFn`
- **Optional**, a function that will be used to execute the request
Expand Down
19 changes: 18 additions & 1 deletion website/docs/query-client/fetchQuery.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,12 @@ const result = api.<service>.<operation>.fetchQuery(

### Arguments

1. - `parameters: { path, query, header } | QueryKey | void`
1. - `parameters: { path, query, header, body } | QueryKey | void`
- **Required**, OpenAPI request parameters for the query, strictly-typed ✨
- `parameters` will be used to generate the `QueryKey`
- For operations generated with `--queryable-write-operations`, query parameters may also include `body`
- In that mode, `body` is part of the query key and cache identity for query-client methods
- Mutation calls keep `body` as a separate top-level argument
- `requestFn?: RequestFn`
- **Optional**, a function that will be used to execute the request
- `baseUrl?: string`
Expand Down Expand Up @@ -70,6 +73,20 @@ const result = api.<service>.<operation>.fetchQuery(
);
```
</TabItem>
<TabItem value="queryable-write" label={<span>With <code>body</code></span>}>
```ts
const policy = await api.approvalPolicies.patchApprovalPoliciesId.fetchQuery({
parameters: {
header: { 'x-monite-version': '1' },
path: { approval_policy_id: '2' },
body: {
name: 'New Name',
description: 'New Description',
},
},
});
```
</TabItem>
<TabItem value="with-query-fn" label={<span style={{verticalAlign: 'middle'}}>With <code>queryFn</code></span>}>
```ts
import { createAPIClient } from './api'; // generated by OpenAPI Qraft CLI
Expand Down
Loading
Loading