diff --git a/README.md b/README.md index e6f9c8f..6cbd662 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,9 @@ Use the client like so: ```html ``` @@ -66,5 +68,43 @@ console.log(data) // => 👈 world Composables are auto-imported. -###`useTrpcQuery(path, input)` +### `useClient()` + +A typesafe client with the `createTRPCClient` method from `@trpc/client`. + +```html + +``` + +### `useClientQuery` + +`client.query` wrapped in [`useAsyncData`](https://v3.nuxtjs.org/guide/features/data-fetching/#useasyncdata). + +```html + +``` + +### `useLazyClientQuery` + +`client.query` wrapped in [`useLazyAsyncData`](https://v3.nuxtjs.org/guide/features/data-fetching/#uselazyasyncdata). + +```html + +``` diff --git a/src/module.ts b/src/module.ts index 0e078b1..122d8c1 100644 --- a/src/module.ts +++ b/src/module.ts @@ -44,14 +44,14 @@ export default defineNuxtModule({ }) const { - useTrpcQuery, - useLazyTrpcQuery, + useClientQuery, + useLazyClientQuery, useClient } = createTRPCComposables(client) export { - useTrpcQuery, - useLazyTrpcQuery, + useClientQuery, + useLazyClientQuery, useClient } `) diff --git a/src/runtime/client.ts b/src/runtime/client.ts index 9f1b192..d372934 100644 --- a/src/runtime/client.ts +++ b/src/runtime/client.ts @@ -12,7 +12,7 @@ export function createTRPCComposables< >( client: Client ): { - useTrpcQuery: < + useClientQuery: < TRouteKey extends TQuery, ProcedureInput = inferProcedureInput, ProcedureOutput = inferProcedureOutput, @@ -26,7 +26,7 @@ export function createTRPCComposables< >, true | Error > - useLazyTrpcQuery: < + useLazyClientQuery: < TRouteKey extends TQuery, ProcedureInput = inferProcedureInput, ProcedureOutput = inferProcedureOutput, @@ -44,19 +44,19 @@ export function createTRPCComposables< } export function createTRPCComposables(client) { - const useTrpcQuery = (...args) => { + const useClientQuery = (...args) => { return useAsyncData(`trpc-${objectHash(args[0] + (args[1] ? JSON.stringify(args[1]) : ''))}`, () => client.query(...args)) } - const useLazyTrpcQuery = (...args) => { + const useLazyClientQuery = (...args) => { return useLazyAsyncData(`trpc-${objectHash(args[0] + (args[1] ? JSON.stringify(args[1]) : ''))}`, () => client.query(...args)) } const useClient = () => client return { - useTrpcQuery, - useLazyTrpcQuery, + useClientQuery, + useLazyClientQuery, useClient, } }