@falcondev-oss/trpc-vue-query 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 falconDev IT GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,147 @@
+# tRPC Vue Query
+
+<a href="https://npmjs.org/package/@falcondev-oss/trpc-vue-query" title="View this project on NPM"><img src="https://img.shields.io/npm/v/@falcondev-oss/trpc-vue-query.svg" alt="NPM version" /></a>
+
+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
+```
+
+## Usage with Vue
+
+### 1. Create client & composable
+
+```ts
+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 = useQueryClient()
+    const trpc = createTRPCVueQueryClient<AppRouter>({
+      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<typeof createTRPCVueQueryClient<AppRouter>>
+}
+```
+
+### 2. Use it in your components
+
+```vue
+<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
+
+```vue
+<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
+
+```vue
+<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](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<AppRouter>({
+    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 `nuxt-trpc`! We just adapted his work to work with Vue Query.

package/dist/index.cjs

@@ -0,0 +1,91 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  createTRPCVueQueryClient: () => createTRPCVueQueryClient
+});
+module.exports = __toCommonJS(src_exports);
+var import_vue_query = require("@tanstack/vue-query");
+var import_client = require("@trpc/client");
+var import_shared = require("@trpc/server/shared");
+var import_core = require("@vueuse/core");
+var import_vue = require("vue");
+function getQueryKey(path, input) {
+  return input === void 0 ? path : [...path, input];
+}
+function maybeToRefs(obj) {
+  return (0, import_vue.isReactive)(obj) ? (0, import_core.toRefs)(obj) : (0, import_core.toRefs)((0, import_core.toRef)(obj));
+}
+function createVueQueryProxyDecoration(name, client, queryClient) {
+  return (0, import_shared.createRecursiveProxy)((opts) => {
+    const args = opts.args;
+    const path = [name, ...opts.path];
+    const lastProperty = path.pop();
+    const joinedPath = path.join(".");
+    const [firstParam, secondParam] = args;
+    if (lastProperty === "_def") {
+      return { path };
+    }
+    if (lastProperty === "useQuery") {
+      const { trpc, ...queryOptions } = secondParam || {};
+      return (0, import_vue_query.useQuery)({
+        queryKey: (0, import_vue.computed)(() => getQueryKey(path, (0, import_core.toValue)(firstParam))),
+        queryFn: ({ queryKey, signal }) => client[joinedPath].query(queryKey.at(-1), {
+          signal,
+          ...trpc
+        }),
+        ...maybeToRefs(queryOptions)
+      });
+    }
+    if (lastProperty === "invalidate") {
+      return queryClient.invalidateQueries({
+        queryKey: getQueryKey(path, (0, import_core.toValue)(firstParam))
+      });
+    }
+    if (lastProperty === "setQueryData") {
+      return queryClient.setQueryData(getQueryKey(path, (0, import_core.toValue)(secondParam)), firstParam);
+    }
+    if (lastProperty === "key") {
+      return getQueryKey(path, (0, import_core.toValue)(firstParam));
+    }
+    if (lastProperty === "useMutation") {
+      const { trpc, ...mutationOptions } = firstParam || {};
+      return (0, import_vue_query.useMutation)({
+        mutationFn: (payload) => client[joinedPath].mutate(payload, {
+          ...trpc
+        }),
+        ...maybeToRefs(mutationOptions)
+      });
+    }
+    return client[joinedPath][lastProperty](...args);
+  });
+}
+function createTRPCVueQueryClient(opts) {
+  const client = (0, import_client.createTRPCProxyClient)(opts.trpc);
+  const decoratedClient = (0, import_shared.createFlatProxy)((key) => {
+    return createVueQueryProxyDecoration(key, client, opts.queryClient);
+  });
+  return decoratedClient;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createTRPCVueQueryClient
+});

package/dist/index.d.cts

@@ -0,0 +1,49 @@
+import { QueryKey, UseQueryOptions, UseQueryReturnType, QueryClient, UseMutationOptions, UseMutationReturnType } from '@tanstack/vue-query';
+import { TRPCClientErrorLike, TRPCRequestOptions, CreateTRPCClientOptions } from '@trpc/client';
+import { ProcedureRouterRecord, AnyRouter, AnyProcedure, AnyQueryProcedure, inferProcedureInput, AnyMutationProcedure, AnySubscriptionProcedure, ProcedureArgs, inferProcedureOutput } from '@trpc/server';
+import { inferObservableValue, Unsubscribable } from '@trpc/server/observable';
+import { inferTransformedProcedureOutput } from '@trpc/server/shared';
+import { MaybeRefOrGetter, UnwrapRef } from 'vue';
+
+type TRPCSubscriptionObserver<TValue, TError> = {
+    onStarted: () => void;
+    onData: (value: TValue) => void;
+    onError: (err: TError) => void;
+    onStopped: () => void;
+    onComplete: () => void;
+};
+type Resolver<TProcedure extends AnyProcedure> = (...args: ProcedureArgs<TProcedure['_def']>) => Promise<inferTransformedProcedureOutput<TProcedure>>;
+type SubscriptionResolver<TProcedure extends AnyProcedure, TRouter extends AnyRouter> = (...args: [
+    input: ProcedureArgs<TProcedure['_def']>[0],
+    opts: ProcedureArgs<TProcedure['_def']>[1] & Partial<TRPCSubscriptionObserver<inferObservableValue<inferProcedureOutput<TProcedure>>, TRPCClientErrorLike<TRouter>>>
+]) => Unsubscribable;
+type DecorateProcedure<TProcedure extends AnyProcedure, TRouter extends AnyRouter> = TProcedure extends AnyQueryProcedure ? {
+    useQuery: <ResT = inferTransformedProcedureOutput<TProcedure>, DataE = TRPCClientErrorLike<TProcedure>, DataT = ResT, KeyT extends QueryKey = QueryKey>(input: MaybeRefOrGetter<inferProcedureInput<TProcedure>>, opts?: MaybeRefOrGetter<Omit<UnwrapRef<UseQueryOptions<ResT, DataT>>, 'queryKey'> & {
+        trpc?: TRPCRequestOptions;
+        queryKey?: KeyT;
+    }>) => UseQueryReturnType<DataT, DataE>;
+    query: Resolver<TProcedure>;
+    invalidate: (input?: MaybeRefOrGetter<inferProcedureInput<TProcedure>>) => Promise<void>;
+    setQueryData: (updater: inferTransformedProcedureOutput<TProcedure>, input?: MaybeRefOrGetter<inferProcedureInput<TProcedure>>) => ReturnType<QueryClient['setQueryData']>;
+    key: (input?: MaybeRefOrGetter<inferProcedureInput<TProcedure>>) => QueryKey;
+} : TProcedure extends AnyMutationProcedure ? {
+    mutate: Resolver<TProcedure>;
+    useMutation: <ResT = inferTransformedProcedureOutput<TProcedure>, DataE = TRPCClientErrorLike<TProcedure>, DataT = ResT, VariablesT = inferProcedureInput<TProcedure>, ContextT = unknown>(opts?: MaybeRefOrGetter<UseMutationOptions<DataT, DataE, VariablesT, ContextT> & {
+        trpc?: TRPCRequestOptions;
+    }>) => UseMutationReturnType<DataT, DataE, VariablesT, ContextT>;
+} : TProcedure extends AnySubscriptionProcedure ? {
+    subscribe: SubscriptionResolver<TProcedure, TRouter>;
+} : never;
+/**
+ * @internal
+ */
+type DecoratedProcedureRecord<TProcedures extends ProcedureRouterRecord, TRouter extends AnyRouter> = {
+    [TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter ? DecoratedProcedureRecord<TProcedures[TKey]['_def']['record'], TRouter> : TProcedures[TKey] extends AnyProcedure ? DecorateProcedure<TProcedures[TKey], TRouter> : never;
+};
+
+declare function createTRPCVueQueryClient<TRouter extends AnyRouter>(opts: {
+    queryClient: QueryClient;
+    trpc: CreateTRPCClientOptions<TRouter>;
+}): DecoratedProcedureRecord<TRouter["_def"]["record"], TRouter>;
+
+export { createTRPCVueQueryClient };

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+import { QueryKey, UseQueryOptions, UseQueryReturnType, QueryClient, UseMutationOptions, UseMutationReturnType } from '@tanstack/vue-query';
+import { TRPCClientErrorLike, TRPCRequestOptions, CreateTRPCClientOptions } from '@trpc/client';
+import { ProcedureRouterRecord, AnyRouter, AnyProcedure, AnyQueryProcedure, inferProcedureInput, AnyMutationProcedure, AnySubscriptionProcedure, ProcedureArgs, inferProcedureOutput } from '@trpc/server';
+import { inferObservableValue, Unsubscribable } from '@trpc/server/observable';
+import { inferTransformedProcedureOutput } from '@trpc/server/shared';
+import { MaybeRefOrGetter, UnwrapRef } from 'vue';
+
+type TRPCSubscriptionObserver<TValue, TError> = {
+    onStarted: () => void;
+    onData: (value: TValue) => void;
+    onError: (err: TError) => void;
+    onStopped: () => void;
+    onComplete: () => void;
+};
+type Resolver<TProcedure extends AnyProcedure> = (...args: ProcedureArgs<TProcedure['_def']>) => Promise<inferTransformedProcedureOutput<TProcedure>>;
+type SubscriptionResolver<TProcedure extends AnyProcedure, TRouter extends AnyRouter> = (...args: [
+    input: ProcedureArgs<TProcedure['_def']>[0],
+    opts: ProcedureArgs<TProcedure['_def']>[1] & Partial<TRPCSubscriptionObserver<inferObservableValue<inferProcedureOutput<TProcedure>>, TRPCClientErrorLike<TRouter>>>
+]) => Unsubscribable;
+type DecorateProcedure<TProcedure extends AnyProcedure, TRouter extends AnyRouter> = TProcedure extends AnyQueryProcedure ? {
+    useQuery: <ResT = inferTransformedProcedureOutput<TProcedure>, DataE = TRPCClientErrorLike<TProcedure>, DataT = ResT, KeyT extends QueryKey = QueryKey>(input: MaybeRefOrGetter<inferProcedureInput<TProcedure>>, opts?: MaybeRefOrGetter<Omit<UnwrapRef<UseQueryOptions<ResT, DataT>>, 'queryKey'> & {
+        trpc?: TRPCRequestOptions;
+        queryKey?: KeyT;
+    }>) => UseQueryReturnType<DataT, DataE>;
+    query: Resolver<TProcedure>;
+    invalidate: (input?: MaybeRefOrGetter<inferProcedureInput<TProcedure>>) => Promise<void>;
+    setQueryData: (updater: inferTransformedProcedureOutput<TProcedure>, input?: MaybeRefOrGetter<inferProcedureInput<TProcedure>>) => ReturnType<QueryClient['setQueryData']>;
+    key: (input?: MaybeRefOrGetter<inferProcedureInput<TProcedure>>) => QueryKey;
+} : TProcedure extends AnyMutationProcedure ? {
+    mutate: Resolver<TProcedure>;
+    useMutation: <ResT = inferTransformedProcedureOutput<TProcedure>, DataE = TRPCClientErrorLike<TProcedure>, DataT = ResT, VariablesT = inferProcedureInput<TProcedure>, ContextT = unknown>(opts?: MaybeRefOrGetter<UseMutationOptions<DataT, DataE, VariablesT, ContextT> & {
+        trpc?: TRPCRequestOptions;
+    }>) => UseMutationReturnType<DataT, DataE, VariablesT, ContextT>;
+} : TProcedure extends AnySubscriptionProcedure ? {
+    subscribe: SubscriptionResolver<TProcedure, TRouter>;
+} : never;
+/**
+ * @internal
+ */
+type DecoratedProcedureRecord<TProcedures extends ProcedureRouterRecord, TRouter extends AnyRouter> = {
+    [TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter ? DecoratedProcedureRecord<TProcedures[TKey]['_def']['record'], TRouter> : TProcedures[TKey] extends AnyProcedure ? DecorateProcedure<TProcedures[TKey], TRouter> : never;
+};
+
+declare function createTRPCVueQueryClient<TRouter extends AnyRouter>(opts: {
+    queryClient: QueryClient;
+    trpc: CreateTRPCClientOptions<TRouter>;
+}): DecoratedProcedureRecord<TRouter["_def"]["record"], TRouter>;
+
+export { createTRPCVueQueryClient };

package/dist/index.mjs

@@ -0,0 +1,68 @@
+// src/index.ts
+import { useMutation, useQuery } from "@tanstack/vue-query";
+import {
+  createTRPCProxyClient
+} from "@trpc/client";
+import { createFlatProxy, createRecursiveProxy } from "@trpc/server/shared";
+import { toRef, toRefs, toValue } from "@vueuse/core";
+import { computed, isReactive } from "vue";
+function getQueryKey(path, input) {
+  return input === void 0 ? path : [...path, input];
+}
+function maybeToRefs(obj) {
+  return isReactive(obj) ? toRefs(obj) : toRefs(toRef(obj));
+}
+function createVueQueryProxyDecoration(name, client, queryClient) {
+  return createRecursiveProxy((opts) => {
+    const args = opts.args;
+    const path = [name, ...opts.path];
+    const lastProperty = path.pop();
+    const joinedPath = path.join(".");
+    const [firstParam, secondParam] = args;
+    if (lastProperty === "_def") {
+      return { path };
+    }
+    if (lastProperty === "useQuery") {
+      const { trpc, ...queryOptions } = secondParam || {};
+      return useQuery({
+        queryKey: computed(() => getQueryKey(path, toValue(firstParam))),
+        queryFn: ({ queryKey, signal }) => client[joinedPath].query(queryKey.at(-1), {
+          signal,
+          ...trpc
+        }),
+        ...maybeToRefs(queryOptions)
+      });
+    }
+    if (lastProperty === "invalidate") {
+      return queryClient.invalidateQueries({
+        queryKey: getQueryKey(path, toValue(firstParam))
+      });
+    }
+    if (lastProperty === "setQueryData") {
+      return queryClient.setQueryData(getQueryKey(path, toValue(secondParam)), firstParam);
+    }
+    if (lastProperty === "key") {
+      return getQueryKey(path, toValue(firstParam));
+    }
+    if (lastProperty === "useMutation") {
+      const { trpc, ...mutationOptions } = firstParam || {};
+      return useMutation({
+        mutationFn: (payload) => client[joinedPath].mutate(payload, {
+          ...trpc
+        }),
+        ...maybeToRefs(mutationOptions)
+      });
+    }
+    return client[joinedPath][lastProperty](...args);
+  });
+}
+function createTRPCVueQueryClient(opts) {
+  const client = createTRPCProxyClient(opts.trpc);
+  const decoratedClient = createFlatProxy((key) => {
+    return createVueQueryProxyDecoration(key, client, opts.queryClient);
+  });
+  return decoratedClient;
+}
+export {
+  createTRPCVueQueryClient
+};

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@falcondev-oss/trpc-vue-query",
+  "type": "module",
+  "version": "0.4.0",
+  "packageManager": "pnpm@8.15.3",
+  "description": "A tRPC wrapper around '@tanstack/vue-query'",
+  "license": "MIT",
+  "repository": "github:falcondev-oss/trpc-vue-query",
+  "bugs": {
+    "url": "https://github.com/falcondev-oss/trpc-vue-query/issues"
+  },
+  "keywords": [
+    "trpc",
+    "vue-query",
+    "trpc-client",
+    "tanstack-query",
+    "typescript"
+  ],
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tanstack/vue-query": "^5.22.2",
+    "@trpc/client": "^10.45.1",
+    "@trpc/server": "^10.45.1",
+    "vue": "^3.4.19"
+  },
+  "dependencies": {
+    "@vueuse/core": "^10.9.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.0.3",
+    "@eslint/eslintrc": "^3.0.2",
+    "@louishaftmann/commitlint-config": "^3.0.1",
+    "@louishaftmann/eslint-config": "^3.0.1",
+    "@louishaftmann/lintstaged-config": "^3.0.1",
+    "@louishaftmann/prettier-config": "^3.0.1",
+    "@tanstack/vue-query": "^5.25.0",
+    "@trpc/client": "^10.45.1",
+    "@trpc/server": "^10.45.1",
+    "@types/eslint": "^8.56.5",
+    "@types/eslint__eslintrc": "^2.1.1",
+    "@vitest/ui": "^1.3.1",
+    "eslint": "^8.57.0",
+    "happy-dom": "^13.7.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "start-server-and-test": "^2.0.3",
+    "tsup": "^8.0.2",
+    "tsx": "^4.7.1",
+    "typescript": "^5.4.2",
+    "vitest": "^1.3.1",
+    "vue": "^3.4.21",
+    "vue-demi": "^0.14.7"
+  },
+  "changelogithub": {
+    "extends": "gh:falcondev-it/configs/changelogithub"
+  },
+  "scripts": {
+    "build": "tsup",
+    "lint": "eslint --cache . && prettier --check --cache .",
+    "lint:ci": "eslint --cache --cache-strategy content . && prettier --check --cache --cache-strategy content .",
+    "lint:fix": "eslint --fix --cache . && prettier --write --cache .",
+    "type-check": "tsc -p tsconfig.json --noEmit",
+    "test": "start-server-and-test test:server http-get://localhost:3000/ping vitest",
+    "test:server": "tsx ./test/trpc/index.ts"
+  }
+}