falcondev-oss / trpc-vue-query

Fully type-safe composables and helpers to make working with tRPC + Tanstack Query as intuitive as possible.

tRPC Vue Query

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

Installation

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

Documentation

👉 https://trpc-vue-query.falcondev.io/getting-started 👈

Usage with Vue

1. Create client & composable

import { createTRPCVueQueryClient } from '@falcondev-oss/trpc-vue-query'
import type { AppRouter } from '../your_server/trpc'
import { VueQueryPlugin, useQueryClient } from '@tanstack/vue-query'

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

2. Use it in your components

<script lang="ts" setup>
const { data: greeting } = useTRPC().hello.useQuery({ name: 'World' })
</script>

<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>

3. Passing vue-query options

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

4. Using the useMutation hook

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

Usage with trpc-nuxt

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
}

Acknowledgements

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

trpc-vue-query's Issues

Uncaught Error: vue-query hooks can only be used inside setup() function or functions that support injection context

When following the instructions in your README it fails with the error on the title

The solution I found was to wrap it inside app.runWithContext:

  install(app) {
      const queryClient = app.runWithContext(useQueryClient)

      const trpcVueQuery = createTRPCVueQueryClient<AppRouter>({
        queryClient,
        trpc: {
          links: [serverLink],
        },
      })
      app.provide("trpc", trpcVueQuery)
  },

`toRefs() expects a reactive object but received a plain one`

see title