\n\n```\n\n### 4. Using the `useMutation` hook\n\n```vue\n\n\n\n
\n \n \n
\n\n```\n\n### 5. Reactive parameters\n\nInput parameters can be refs ā the query refetches when they change.\n\n```vue\n\n```\n\n## Helpers\n\n### `invalidate()`\n\nInvalidate and refetch a query.\n\n```vue\n\n```\n\n### `setQueryData()`\n\nUpdate the query data manually.\n\n```vue\n\n```\n\n### `key()`\n\nGet the query key. With the key you can access all the other TanStack Query features.\n\n```vue\n\n```\n\n## Operation context\n\nEvery request made through a vue-query composable (`useQuery`, `useQueries`, `useInfiniteQuery`, `useMutation`, `queryOptions`) is marked with the exported `vueQueryContext` symbol in the tRPC [operation context](https://trpc.io/docs/client/links#managing-context). Plain `query()` / `mutate()` calls are not.\n\nThe symbol is declaration-merged into tRPC's `OperationContext` interface, so `op.context[vueQueryContext]` is typed inside links.\n\nLinks can use this to skip handling that vue-query already does, e.g. error toasts coming from the query/mutation cache:\n\n```ts\nimport { vueQueryContext } from '@falcondev-oss/trpc-vue-query'\n\nconst errorToastLink: TRPCLink =\n () =>\n ({ op, next }) =>\n observable((observer) =>\n next(op).subscribe({\n next: (value) => observer.next(value),\n complete: () => observer.complete(),\n error(err) {\n // vue-query requests are toasted by the query/mutation cache instead\n if (!(vueQueryContext in op.context)) toast.error(err.message)\n observer.error(err)\n },\n }),\n )\n```\n\n## Usage with `trpc-nuxt`\n\nSetup `trpc-nuxt` as described in their [documentation](https://trpc-nuxt.vercel.app/get-started/usage/recommended). Then update the `plugins/client.ts` file:\n\n```ts\nimport { createTRPCVueQueryClient } from '@falcondev-oss/trpc-vue-query'\nimport { useQueryClient } from '@tanstack/vue-query'\nimport { httpBatchLink } from 'trpc-nuxt/client'\n\nimport type { AppRouter } from '~/server/trpc/routers'\n\nexport default defineNuxtPlugin(() => {\n const queryClient = useQueryClient()\n\n // ā¬ļø use `createTRPCVueQueryClient` instead of `createTRPCNuxtClient` ā¬ļø\n const trpc = createTRPCVueQueryClient({\n queryClient,\n trpc: {\n links: [\n httpBatchLink({\n url: '/api/trpc',\n }),\n ],\n },\n })\n\n return {\n provide: {\n trpc,\n },\n }\n})\n```\n\n```ts\nexport function useTRPC() {\n return useNuxtApp().$trpc\n}\n```\n\n## Acknowledgements\n\nHuge thanks to [Robert Soriano](https://github.com/wobsoriano) for creating `trpc-nuxt`! We just adapted his work to work with Vue Query.\n","readmeFilename":""}
![\"NPM](\"https://img.shields.io/npm/v/@falcondev-oss/trpc-vue-query.svg\")