Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
28 changes: 26 additions & 2 deletions docs/reference/plugins/tanstack-query.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,10 @@ The generated hooks have the following signature convention.
- `args`: Prisma query args. E.g., `{ where: { published: true } }`.
- `options`: tanstack-query options.

The `data` field returned by the hooks call contains the Prisma query result.
The hook function returns a standard TanStack Query [`useQuery`](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery) result, plus an added `queryKey` field.

- The `data` field contains the Prisma query result.
- The `queryKey` field is the query key used to cache the query result. It can be used to manipulate the cache directly or [cancel the query](#query-cancellation).

- **Mutation Hooks**

Expand All @@ -64,7 +67,7 @@ The generated hooks have the following signature convention.
- `[Model]`: the name of the model. E.g., "Post".
- `options`: TanStack-Query options.

The `mutate` and `mutateAsync` functions returned with the hooks call take the corresponding Prisma mutation args as input. E.q., `{ data: { title: 'Post1' } }`.
The hook function returns a standard TanStack Query [`useMutation`](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation) result. The `mutate` and `mutateAsync` functions returned take the corresponding Prisma mutation args as input. E.q., `{ data: { title: 'Post1' } }`.

### Context Provider

Expand Down Expand Up @@ -679,6 +682,27 @@ will be:

You can use the generated `getQueryKey` function to compute it.

The query hooks also return the query key as part of the result object.

```ts
const { data, queryKey } = useFindUniqueUser({ where: { id: '1' } });
```

### Query Cancellation

You can use TanStack Query's [`queryClient.cancelQueries`](https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientcancelqueries) API to cancel a query. The easiest way to do this is to use the `queryKey` returned by the query hook.

```ts
const queryClient = useQueryClient();
const { queryKey } = useFindUniqueUser({ where: { id: '1' } });

function onCancel() {
queryClient.cancelQueries({ queryKey, exact: true });
}
```

When a cancellation occurs, the query state is reset and the ongoing `fetch` call to the CRUD API is aborted.

## FAQ

### Next.js error "createContext" is not a function
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,5 +59,5 @@
"engines": {
"node": ">=18.0"
},
"packageManager": "pnpm@8.15.8+sha512.d1a029e1a447ad90bc96cd58b0fad486d2993d531856396f7babf2d83eb1823bb83c5a3d0fc18f675b2d10321d49eb161fece36fe8134aa5823ecd215feed392"
"packageManager": "pnpm@9.4.0+sha256.b6fd0bfda555e7e584ad7e56b30c68b01d5a04f9ee93989f4b93ca8473c49c74"
}