A tRPC wrapper around @tanstack/vue-query. This package provides a set of hooks to use tRPC with Vue Query.
pnpm add @falcondev-oss/trpc-vue-query👉 https://trpc-vue-query.falcondev.io/getting-started 👈
import { createTRPCVueQueryClient } from '@falcondev-oss/trpc-vue-query' import { VueQueryPlugin, useQueryClient } from '@tanstack/vue-query' import type { AppRouter } from '../your_server/trpc' app.use(VueQueryPlugin) app.use({ install(app) { const queryClient = app.runWithContext(useQueryClient) const trpc = createTRPCVueQueryClient<AppRouter>({ queryClient, trpc: { links: [ httpBatchLink({ url: '/api/trpc', }), ], }, }) app.provide('trpc', trpc) }, })import { createTRPCVueQueryClient } from '@falcondev-oss/trpc-vue-query' import type { AppRouter } from '../your_server/trpc' export function useTRPC() { return inject('trpc') as ReturnType<typeof createTRPCVueQueryClient<AppRouter>> }<script lang="ts" setup> const { data: greeting } = useTRPC().hello.useQuery({ name: 'World' }) </script> <template> <div> <h1>{{ greeting }}</h1> </div> </template><script lang="ts" setup> const { data: greeting } = useTRPC().hello.useQuery( { name: 'World' }, { refetchOnMount: false, refetchOnReconnect: false, refetchOnWindowFocus: false, staleTime: 1000 * 60 * 5, }, ) </script> <template> <div> <h1>{{ greeting }}</h1> </div> </template><script lang="ts" setup> const name = ref('') const { mutate: updateGreeting } = useTRPC().hello.update.useMutation({ onSuccess: () => { console.log('Greeting updated') }, }) </script> <template> <div> <input v-model="name" type="text" /> <button @click="() => updateGreeting({ name })">Update greeting</button> </div> </template>Setup trpc-nuxt as described in their documentation. Then update the plugins/client.ts file:
import { createTRPCVueQueryClient } from '@falcondev-oss/trpc-vue-query' import { useQueryClient } from '@tanstack/vue-query' import { httpBatchLink } from 'trpc-nuxt/client' import type { AppRouter } from '~/server/trpc/routers' export default defineNuxtPlugin(() => { const queryClient = useQueryClient() // ⬇️ use `createTRPCVueQueryClient` instead of `createTRPCNuxtClient` ⬇️ const trpc = createTRPCVueQueryClient<AppRouter>({ queryClient, trpc: { links: [ httpBatchLink({ url: '/api/trpc', }), ], }, }) return { provide: { trpc, }, } })export function useTRPC() { return useNuxtApp().$trpc }Huge thanks to Robert Soriano for creating trpc-nuxt! We just adapted his work to work with Vue Query.
![@github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=64&v=4){kind=small}