tRPC Vue 查询

TRPC的包装纸, 此套件提供了一组用Vue Query来使用tRPC的钩子.

安装

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

文档

👉 https://trpc-vue-query.falcondev.io/getting-started 互联网档案馆的存檔,存档日期2014-12-21 👈

使用 Vue

1. 创建客户端和可堆肥

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

2. 在组件中使用

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

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

3. 通过排水方案

<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. 使用 useMutation 钩子

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

5. 反应参数

输入参数可以是 refs——当它们改变时的查询 refetches.

<script lang="ts" setup>
const productId = ref(1)
const { data: product } = useTRPC().product.getById.useQuery(productId)
</script>

帮助者

invalidate()

无效并重排查询 .

<script lang="ts" setup>
const trpc = useTRPC()
const { mutate: addToCart } = trpc.cart.addProduct.useMutation({
  onSuccess: () => {
    // this will invalidate and refetch the `cart.get` query
    trpc.cart.get.invalidate()
  },
})
</script>

setQueryData()

手动更新查询数据.

<script lang="ts" setup>
const trpc = useTRPC()
const { mutate: addToCart } = trpc.cart.addProduct.useMutation({
  onSuccess: (newCart) => {
    // this will update the `cart.get` query data
    trpc.cart.get.setQueryData(newCart)
  },
})
</script>

key()

获取查询密钥 。 使用密钥,您可以访问所有其它的 TanStack 查询功能 .

<script lang="ts" setup>
const trpc = useTRPC()
const cartKey = trpc.cart.get.key()

const productKey = trpc.product.getById.key(1)

// eg. cancel queries by key:
const queryClient = useQueryClient()
await queryClient.cancelQueries({ queryKey: cartKey })
</script>

操作背景

每一次请求都是通过可调和的(useQuery, (中文(简体) ), useQueries, (中文(简体) ), useInfiniteQuery, (中文(简体) ), useMutation, (中文(简体) ), queryOptions) 标记为导出 vueQueryContext tRPC 中的符号 操作环境常规 query() 编号 : mutate() 电话不是.

该符号被宣布为tRPC的 OperationContext 接口,所以 op.context[vueQueryContext] 在链接中输入.

链接可以使用它来跳过 vue-query 已经做的处理, 例如, 查询/ 移动缓存中出错的托盘 :

import { vueQueryContext } from '@falcondev-oss/trpc-vue-query'

const errorToastLink: TRPCLink<AppRouter> =
  () =>
  ({ op, next }) =>
    observable((observer) =>
      next(op).subscribe({
        next: (value) => observer.next(value),
        complete: () => observer.complete(),
        error(err) {
          // vue-query requests are toasted by the query/mutation cache instead
          if (!(vueQueryContext in op.context)) toast.error(err.message)
          observer.error(err)
        },
      }),
    )

用法为 trpc-nuxt

设置 trpc-nuxt 说明 文档。然后更新 plugins/client.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<AppRouter>({
    queryClient,
    trpc: {
      links: [
        httpBatchLink({
          url: '/api/trpc',
        }),
      ],
    },
  })

  return {
    provide: {
      trpc,
    },
  }
})

export function useTRPC() {
  return useNuxtApp().$trpc
}

鸣谢

谢谢 罗伯特·索里亚诺 用于创建 trpc-nuxt我们刚刚调整了他的工作 与Vue Query合作.