From a59ea18c125cae6db65c12068b61f5c8e0bb817c Mon Sep 17 00:00:00 2001
From: Rebecca Richards <rrichards@earnestresearch.com>
Date: Thu, 26 Oct 2023 23:18:07 +0100
Subject: [PATCH] feat: add useClientSideAsyncQuery composable

---
 .../1.getting-started/3.composables.md        | 22 +++++++++++++++++++
 src/module.ts                                 |  1 +
 src/runtime/composables.ts                    |  9 ++++++++
 3 files changed, 32 insertions(+)

diff --git a/docs/content/1.getting-started/3.composables.md b/docs/content/1.getting-started/3.composables.md
index 9817f086..0eb20202 100644
--- a/docs/content/1.getting-started/3.composables.md
+++ b/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.
diff --git a/src/module.ts b/src/module.ts
index 51eb1f12..eb948c88 100644
--- a/src/module.ts
+++ b/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
diff --git a/src/runtime/composables.ts b/src/runtime/composables.ts
index 4d782794..b1f556c7 100644
--- a/src/runtime/composables.ts
+++ b/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>