update readme

README.md

@@ -57,7 +57,9 @@ Use the client like so:
 ```html
 <script setup lang="ts">
 const client = useClient()
+
 const data = await client.query('hello')
+
 console.log(data) // => 👈 world
 </script>
 ```
@@ -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
+<script setup lang="ts">
+const client = useClient()
+
+const bilbo = await client.query('getUser', 'id_bilbo');
+// => { id: 'id_bilbo', name: 'Bilbo' };
+
+const frodo = await client.mutation('createUser', { name: 'Frodo' });
+// => { id: 'id_frodo', name: 'Frodo' };
+</script>
+```
+
+### `useClientQuery`
+
+`client.query` wrapped in [`useAsyncData`](https://v3.nuxtjs.org/guide/features/data-fetching/#useasyncdata).
+
+```html
+<script setup lang="ts">
+const { data, pending, refresh, error } = await useClientQuery('getUser', 'id_bilbo');
+
+console.log(data.value) // => { id: 'id_frodo', name: 'Frodo' };
+</script>
+```
+
+### `useLazyClientQuery`
+
+`client.query` wrapped in [`useLazyAsyncData`](https://v3.nuxtjs.org/guide/features/data-fetching/#uselazyasyncdata).
+
+```html
+<script setup lang="ts">
+const { data, pending, refresh, error } = await useLazyClientQuery('getUser', 'id_bilbo');
+
+console.log(data.value) // => { id: 'id_frodo', name: 'Frodo' };
+</script>
+```
 

src/module.ts

@@ -44,14 +44,14 @@ export default defineNuxtModule<ModuleOptions>({
       })
 
       const {
-        useTrpcQuery,
+        useClientQuery,
-        useLazyTrpcQuery,
+        useLazyClientQuery,
         useClient
       } = createTRPCComposables<typeof router>(client)
 
       export {
-        useTrpcQuery,
+        useClientQuery,
-        useLazyTrpcQuery,
+        useLazyClientQuery,
         useClient
       }
     `)

src/runtime/client.ts

@@ -12,7 +12,7 @@ export function createTRPCComposables<
 >(
   client: Client
 ): {
-  useTrpcQuery: <
+  useClientQuery: <
     TRouteKey extends TQuery,
     ProcedureInput = inferProcedureInput<Router['_def']['queries'][TRouteKey]>,
     ProcedureOutput = inferProcedureOutput<Router['_def']['queries'][TRouteKey]>,
@@ -26,7 +26,7 @@ export function createTRPCComposables<
     >,
     true | Error
   >
-  useLazyTrpcQuery: <
+  useLazyClientQuery: <
     TRouteKey extends TQuery,
     ProcedureInput = inferProcedureInput<Router['_def']['queries'][TRouteKey]>,
     ProcedureOutput = inferProcedureOutput<Router['_def']['queries'][TRouteKey]>,
@@ -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,
+    useClientQuery,
-    useLazyTrpcQuery,
+    useLazyClientQuery,
     useClient,
   }
 }