A tRPC wrapper around '@tanstack/vue-query'
npm install @falcondev-oss/trpc-vue-queryA tRPC wrapper around @tanstack/vue-query. This package provides a set of hooks to use tRPC with Vue Query.
``bash`
pnpm add @falcondev-oss/trpc-vue-query
š
`ts
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
queryClient,
trpc: {
links: [
httpBatchLink({
url: '/api/trpc',
}),
],
},
})
app.provide('trpc', trpc)
},
})
`
`ts
import { createTRPCVueQueryClient } from '@falcondev-oss/trpc-vue-query'
import type { AppRouter } from '../your_server/trpc'
export function useTRPC() {
return inject('trpc') as ReturnType
}
`
`vue
{{ greeting }}
`
`vue
{{ greeting }}
`
`vue
`
Setup trpc-nuxt as described in their documentation. Then update the plugins/client.ts file:
`ts
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
queryClient,
trpc: {
links: [
httpBatchLink({
url: '/api/trpc',
}),
],
},
})
return {
provide: {
trpc,
},
}
})
`
`ts`
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.