diff --git a/docs/reference/plugins/tanstack-query.mdx b/docs/reference/plugins/tanstack-query.mdx index ced7caf7..d443b79b 100644 --- a/docs/reference/plugins/tanstack-query.mdx +++ b/docs/reference/plugins/tanstack-query.mdx @@ -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** @@ -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 @@ -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 diff --git a/package.json b/package.json index 458bdab9..e42c8a06 100644 --- a/package.json +++ b/package.json @@ -59,5 +59,5 @@ "engines": { "node": ">=18.0" }, - "packageManager": "pnpm@8.15.8+sha512.d1a029e1a447ad90bc96cd58b0fad486d2993d531856396f7babf2d83eb1823bb83c5a3d0fc18f675b2d10321d49eb161fece36fe8134aa5823ecd215feed392" + "packageManager": "pnpm@9.4.0+sha256.b6fd0bfda555e7e584ad7e56b30c68b01d5a04f9ee93989f4b93ca8473c49c74" }