feat: add useClientSideAsyncQuery composable

docs/content/1.getting-started/3.composables.md

@@ -34,6 +34,28 @@ if (data.value?.ships) {
 }
 ```
 
+## useClientSideAsyncQuery
+
+Similar to `useAsyncQuery` this is a convenience wrapper around Nuxt's [useAsyncData](https://v3.nuxtjs.org/api/composables/use-async-data/) that allows you to easily query the Apollo client. Unlike `useAsyncQuery`, the request will only be made from the browser and not the server.
+
+`useClientSideAsyncQuery` is primarily used for querying data when a page or component is initially loaded but you only want to make the request from the browser. For example, if the responses from your GraphQL server are slow but you do not want to block the initial page render.
+
+```ts
+const query = gql`
+query getShips($limit: Int!) {
+  ships(limit: $limit) {
+    id
+  }
+}`
+
+const { data } = await useClientSideAsyncQuery(query, { limit: 2 })
+
+if (data.value?.ships) {
+  // log response
+  console.log(data.value.ships)
+}
+```
+
 ## useLazyAsyncQuery
 
 The `useLazyAsyncQuery` composable provides a wrapper around [`useAsyncQuery`](#useasyncquery) that lazily loads the specified query.

src/module.ts

@@ -122,6 +122,7 @@ export default defineNuxtModule<NuxtApolloConfig<any>>({
       ...[
         'useApollo',
         'useAsyncQuery',
+        'useClientSideAsyncQuery',
         'useLazyAsyncQuery'
       ].map(n => ({ name: n, from: resolve('runtime/composables') })),
       ...(!options?.autoImports

src/runtime/composables.ts

@@ -25,6 +25,15 @@ export function useAsyncQuery <T> (...args: any) {
   return useAsyncData<T>(key, fn)
 }
 
+export function useClientSideAsyncQuery <T> (opts: TAsyncQuery<T>): AsyncData<T, Error>
+export function useClientSideAsyncQuery <T> (query: TQuery<T>, clientId?: string): AsyncData<T, Error>
+export function useClientSideAsyncQuery <T> (query: TQuery<T>, variables?: TVariables<T>, clientId?: string, context?: DefaultContext): AsyncData<T, Error>
+
+export function useClientSideAsyncQuery <T> (...args: any) {
+  const { key, fn } = prep(...args)
+  return useAsyncData<T>(key, fn, { server: false })
+}
+
 export function useLazyAsyncQuery <T> (opts: TAsyncQuery<T>): AsyncData<T, Error>
 export function useLazyAsyncQuery <T> (query: TQuery<T>, clientId?: string): AsyncData<T, Error>
 export function useLazyAsyncQuery <T> (query: TQuery<T>, variables?: TVariables<T>, clientId?: string, context?: DefaultContext): AsyncData<T, Error>