tRPC Vue Query

A tRPC wrapper around @tanstack/vue-query. This package provides a set of hooks to use tRPC with Vue Query.

Installation

``bash
pnpm add @falcondev-oss/trpc-vue-query
`

Documentation

👉 👈

Usage with Vue

$3

`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>
}
`

$3

`vue



`

$3

`vue



`

$3

`vue



`

Usage with trpc-nuxt

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
}
`

Acknowledgements

Huge thanks to Robert Soriano for creating trpc-nuxt`! We just adapted his work to work with Vue Query.