feat(useStrapiGraphQL): support for imported graphql files

docs/pages/3.usage.md

@@ -388,17 +388,19 @@ All examples above are demonstrated with http calls in script setup. However, to
 
 ## `useStrapiGraphQL`
 
-This composable is an alias of `useStrapiClient` that sets the `url` to `/graphql` and `method` to `POST`. You can use this method to send an authenticated GraphQL query to your API.
+This composable is an alias of `useStrapiClient` that sets the `url` to `/graphql` and `method` to `POST`. You can use this method to send an authenticated GraphQL query to your API. See [Use Imported GraphQL](/advanced#use-imported-graphql) to use Option 2 below.
 
 - **Arguments:**
-  - query: `string`
+  - query: `string|DocumentNode`
+  - variables (optional): [`StrapiGraphqlVariables`](https://github.com/nuxt-community/strapi-module/blob/dev/src/runtime/types/index.d.ts#L555)
 - **Returns:** `Promise<T>`
 
 ```vue
 <script setup lang="ts">
 const route = useRoute()
 const graphql = useStrapiGraphQL()
 
+// Option 1: use inline query
 const restaurant = await graphql(`
   query {
     restaurant(id: ${route.params.id}) {
@@ -411,6 +413,9 @@ const restaurant = await graphql(`
     }
   }
 `)
+
+// Option 2: use imported query
+const restaurant = await graphql(query, { id: route.params.id })
 </script>
 ```
 

docs/pages/4.advanced.md

@@ -179,3 +179,42 @@ async function onSubmit () {
 ```
 
 > Note that you have to use the `client` because `create` and `update` methods sends the [body inside `data`](https://github.com/nuxt-community/strapi-module/blob/dev/src/runtime/composables/useStrapi4.ts#L64).
+
+## Use Imported GraphQL
+
+You can use an imported GraphQL query with the [useStrapiGraphQL composable](/usage#usestrapigraphql). To process imported GraphQL, you'll need to provide plugin for processing. An example setup with [@rollup/plugin-graphql](https://www.npmjs.com/package/@rollup/plugin-graphql) is shown below:
+
+```ts [nuxt.config.ts]
+import gql from "@rollup/plugin-graphql"
+
+export default defineNuxtConfig({
+	// ...
+	vite: {
+		plugins: [ gql() ]
+	}
+})
+```
+
+You can now import a query like so:
+
+> Arguments on an imported GraphQL file [must be defined on the query](https://graphql.org/graphql-js/passing-arguments/) to be passed from the client.
+
+```vue
+<script setup lang="ts">
+import query from "./query/example-query.gql"
+const route = useRoute()
+const graphql = useStrapiGraphQL()
+
+const restaurant = await graphql(query, { id: route.params.id })
+</script>
+```
+
+If importing a GraphQL query from TypeScript, you may encounter an error: "Cannot find module './query/example-query.gql' or its corresponding type declarations". You can resolve this error by creating a type declaration file within your project with the following contents:
+
+```ts [globals.d.ts]
+declare module '*.gql' {
+	import { DocumentNode } from 'graphql'
+	const Schema: DocumentNode
+	export = Schema
+}
+```

package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@nuxt/kit": "^3.0.0-rc.1",
     "defu": "^6.0.0",
+    "graphql": "^16.5.0",
     "pathe": "^0.2.0",
     "qs": "^6.10.3"
   },

src/runtime/composables/useStrapiGraphQL.ts

@@ -1,14 +1,21 @@
 import { useRuntimeConfig } from '#app'
+import { print } from 'graphql'
+import type { DocumentNode } from 'graphql'
+import type { StrapiGraphqlVariables } from '../types'
 import { useStrapiClient } from './useStrapiClient'
 
 export const useStrapiGraphQL = () => {
   const client = useStrapiClient()
   const config = useRuntimeConfig()
 
-  return <T> (query: string): Promise<T> => {
+  return <T> (query: string|DocumentNode, variables?: StrapiGraphqlVariables): Promise<T> => {
+    const queryAsString = typeof query === 'string' ? query : print(query)
     return client('/graphql', {
       method: 'POST',
-      body: { query },
+      body: {
+        query: queryAsString,
+        variables
+      },
       headers: {
         accept: 'application/json'
       },

src/runtime/types/index.d.ts

@@ -552,5 +552,9 @@ export interface StrapiEmailConfirmationData {
   email: string
 }
 
+export interface StrapiGraphqlVariables {
+  [variable: string]: unknown
+}
+
 export * from './v3'
 export * from './v4'

yarn.lock

@@ -3223,6 +3223,11 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4,
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
+graphql@^16.5.0:
+  version "16.5.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.5.0.tgz#41b5c1182eaac7f3d47164fb247f61e4dfb69c85"
+  integrity sha512-qbHgh8Ix+j/qY+a/ZcJnFQ+j8ezakqPiHwPiZhV/3PgGlgf96QMBB5/f2rkiC9sgLoy/xvT6TSiaf2nTHJh5iA==
+
 gzip-size@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-7.0.0.tgz#9f9644251f15bc78460fccef4055ae5a5562ac60"