Package Exports
Readme
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 🚀
Before:
const currentUserQuery = queryOptions({
queryKey: ["user", "current"],
queryFn: () => trpc.user.current.query(),
});
const { data } = useQuery(currentUserQuery);
const { mutateAsync } = useMutation({
mutationFn: (input: UnwrapRef<typeof form>) => trpc.user.signUp.mutate(input),
onSuccess: async () => {
await useQueryClient().invalidateQueries({
queryKey: currentUserQuery.queryKey,
});
await navigateTo("/onboarding");
},
});After:
const { data } = useClient().user.current.useQuery();
const { mutateAsync } = useClient().user.signUp.useMutation({
onSuccess: async () => {
await useClient().user.current.invalidate();
await navigateTo("/onboarding");
},
});Install
pnpm i @colonel-sandvich/trpc-vue-query
Setup (Vue)
1. Plug in the plugin
// main.ts
import { TrpcVueQueryPlugin } from "@colonel-sandvich/trpc-vue-query";
import { VueQueryPlugin } from "@tanstack/vue-query";
import { httpBatchLink } from "@trpc/client";
import { createApp } from "vue";
import App from "./src/App.vue";
import { trpc } from "your-path-to-trpc-client";
// ^ See https://trpc.io/docs/client/vanilla/setup#3-initialize-the-trpc-client
export const app = createApp(App);
app
.use(VueQueryPlugin) // Make sure {@tanstack/vue-query}'s plugin goes first
.use(TrpcVueQueryPlugin, {
trpcClient: trpc,
})
.mount("#app");2. Make a composable
// src/composables/useClient.ts
import { TrpcVueClient, clientKey } from "@colonel-sandvich/trpc-vue-query";
import { inject } from "vue";
import type { AppRouter } from "your-path-to-trpc-app-router-type";
export function useClient() {
return inject(clientKey) as TrpcVueClient<AppRouter>;
}Setup (Nuxt)
0. Setup @tanstack/vue-query for Nuxt if you haven't already
// src/plugins/01.vueQueryPlugin.ts
// Important that this plugin comes before the `02.clientPlugin` since that has this plugin as a dependency
export default defineNuxtPlugin((nuxt) => {
nuxt.vueApp.use(VueQueryPlugin);
// Below is for SSR. Remove if you don't need this
// Provided from TanStack Query docs: https://tanstack.com/query/v5/docs/vue/guides/ssr
const vueQueryState = useState<DehydratedState | null>("vue-query");
if (process.server) {
nuxt.hooks.hook("app:rendered", () => {
vueQueryState.value = dehydrate(queryClient);
});
}
if (process.client) {
nuxt.hooks.hook("app:created", () => {
hydrate(queryClient, vueQueryState.value);
});
}
});1. Make a plugin
// src/plugins/02.clientPlugin.ts
export default defineNuxtPlugin(() => {
const trpc = createTRPCProxyClient<AppRouter>({
links: [
httpBatchLink({
url: "/api/trpc",
headers: useRequestHeaders(),
fetch: customFetchWrapper(), // Crucial for SSR
}),
],
});
const client = createTrpcVueClient(trpc, useQueryClient());
return {
provide: {
client,
},
};
});2. Make a composable
// src/composables/useClient.ts
export const useClient = () => {
return useNuxtApp().$client;
};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.