https://github.com/falcondev-oss/trpc-vue-query
Fully type-safe composables and helpers to make working with tRPC + Tanstack Query as intuitive as possible.
https://github.com/falcondev-oss/trpc-vue-query
nuxt tanstack-query trpc trpc-client typescript vue-query
Last synced: 13 days ago
JSON representation
Fully type-safe composables and helpers to make working with tRPC + Tanstack Query as intuitive as possible.
- Host: GitHub
- URL: https://github.com/falcondev-oss/trpc-vue-query
- Owner: falcondev-oss
- License: mit
- Created: 2024-02-24T16:13:13.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-05-13T11:35:35.000Z (about 1 month ago)
- Last Synced: 2025-05-13T12:12:01.528Z (about 1 month ago)
- Topics: nuxt, tanstack-query, trpc, trpc-client, typescript, vue-query
- Language: TypeScript
- Homepage: https://trpc-vue-query.falcondev.io
- Size: 709 KB
- Stars: 24
- Watchers: 3
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
### 1. Create client & composable
```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>
}
```
### 2. Use it in your components
```vue
const { data: greeting } = useTRPC().hello.useQuery({ name: 'World' })
{{ greeting }}
```
### 3. Passing vue-query options
```vue
const { data: greeting } = useTRPC().hello.useQuery(
{ name: 'World' },
{
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
staleTime: 1000 * 60 * 5,
},
)
{{ greeting }}
```
### 4. Using the `useMutation` hook
```vue
const name = ref('')
const { mutate: updateGreeting } = useTRPC().hello.update.useMutation({
onSuccess: () => {
console.log('Greeting updated')
},
})
updateGreeting({ name })">Update greeting
```
## Usage with `trpc-nuxt`
Setup `trpc-nuxt` as described in their [documentation](https://trpc-nuxt.vercel.app/get-started/usage/recommended). 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](https://github.com/wobsoriano) for creating `trpc-nuxt`! We just adapted his work to work with Vue Query.