trpc-vue-query

A simple package to bridge the gap between TRPC and TanStack Query for Vue much like how TRPC has their own in-house React Query Integration

Why this package?

If you're using @tanstack/vue-query then you might know that working with query keys and query functions can sometimes become cumbersome. A lead maintainer of Tanstack Query, TkDodo, has said that "Separating QueryKey from QueryFunction was a mistake".

So this package tightly couples your keys and functions leading to brilliant DX :rocket:

Before:

1const currentUserQuery = queryOptions({
2  queryKey: ["user", "current"],
3  queryFn: () => trpc.user.current.query(),
4});
5
6const { data } = useQuery(currentUserQuery);
7
8const { mutateAsync } = useMutation({
9  mutationFn: (input: UnwrapRef<typeof form>) => trpc.user.signUp.mutate(input),
10  onSuccess: async () => {
11    await useQueryClient().invalidateQueries({
12      queryKey: currentUserQuery.queryKey,
13    });
14    await navigateTo("/onboarding");
15  },
16});

After:

1const { data } = useClient().user.current.useQuery();
2
3const { mutateAsync } = useClient().user.signUp.useMutation({
4  onSuccess: async () => {
5    await useClient().user.current.invalidate();
6    await navigateTo("/onboarding");
7  },
8});

Install

pnpm i @colonel-sandvich/trpc-vue-query

Setup (Vue)

1. Plug in the plugin

1// main.ts
2import { TrpcVueQueryPlugin } from "@colonel-sandvich/trpc-vue-query";
3import { VueQueryPlugin } from "@tanstack/vue-query";
4import { httpBatchLink } from "@trpc/client";
5import { createApp } from "vue";
6import App from "./src/App.vue";
7import { trpc } from "your-path-to-trpc-client";
8// ^ See https://trpc.io/docs/client/vanilla/setup#3-initialize-the-trpc-client
9
10export const app = createApp(App);
11
12app
13  .use(VueQueryPlugin) // Make sure {@tanstack/vue-query}'s plugin goes first
14  .use(TrpcVueQueryPlugin, {
15    trpcClient: trpc,
16  })
17  .mount("#app");

2. Make a composable

1// src/composables/useClient.ts
2import { TrpcVueClient, clientKey } from "@colonel-sandvich/trpc-vue-query";
3import { inject } from "vue";
4import type { AppRouter } from "your-path-to-trpc-app-router-type";
5
6export function useClient() {
7  return inject(clientKey) as TrpcVueClient<AppRouter>;
8}

Setup (Nuxt)

0. Setup @tanstack/vue-query for Nuxt if you haven't already

1// src/plugins/01.vueQueryPlugin.ts
2
3// Important that this plugin comes before the `02.clientPlugin` since that has this plugin as a dependency
4export default defineNuxtPlugin((nuxt) => {
5  nuxt.vueApp.use(VueQueryPlugin);
6
7  // Below is for SSR. Remove if you don't need this
8  // Provided from TanStack Query docs: https://tanstack.com/query/v5/docs/vue/guides/ssr
9  const vueQueryState = useState<DehydratedState | null>("vue-query");
10
11  if (process.server) {
12    nuxt.hooks.hook("app:rendered", () => {
13      vueQueryState.value = dehydrate(queryClient);
14    });
15  }
16
17  if (process.client) {
18    nuxt.hooks.hook("app:created", () => {
19      hydrate(queryClient, vueQueryState.value);
20    });
21  }
22});

1. Make a plugin

1// src/plugins/02.clientPlugin.ts
2
3export default defineNuxtPlugin(() => {
4  const trpc = createTRPCProxyClient<AppRouter>({
5    links: [
6      httpBatchLink({
7        url: "/api/trpc",
8        headers: useRequestHeaders(),
9        fetch: customFetchWrapper(), // Crucial for SSR
10      }),
11    ],
12  });
13
14  const client = createTrpcVueClient(trpc, useQueryClient());
15
16  return {
17    provide: {
18      client,
19    },
20  };
21});

2. Make a composable

1// src/composables/useClient.ts
2
3export const useClient = () => {
4  return useNuxtApp().$client;
5};

You're Done!

Go check out /examples to see some basic uses.

Quickstart for testing examples/vue-minimal

pnpm i Anywhere

cd examples/vue-minimal

pnpm dev

If ports 3000 (client) and 3001 (server) are available then you should up and running

Goals of the project

• Easier integration with Vue and Nuxt
• Feature parity with TRPC's React Query (or at least as much as is possible with Vue Query)
  • Subscriptions
• Documentation

Contributing

Please please please absolutely make an issue or PR for any bugs or feature requests, I highly encourage it.

Acknowledgments

Big thanks to Robert Soriano for his trpc-nuxt package that inspired this package.

Star History