support graphql mutations (#189)

* support GraphQL mutations

* Release 1.0.0-edge.15

eslint.config.mjs

@@ -7,6 +7,11 @@ export default createConfigForNuxt({
       commaDangle: 'never',
       braceStyle: '1tbs'
     }
+  },
+  dirs: {
+    src: [
+      './playground'
+    ]
   }
 },
 {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpnuxt/core",
-  "version": "1.0.0-edge.14",
+  "version": "1.0.0-edge.15",
   "description": "WPNuxt",
   "repository": {
     "type": "git",

src/context.ts

@@ -25,7 +25,7 @@ export async function prepareContext(ctx: WPNuxtContext) {
   const fnExp = (q: WPNuxtQuery, typed = false) => {
     const functionName = fnName(q.name)
     if (!typed) {
-      return `export const ${functionName} = (params) => useWPContent('${q.name}', [${q.nodes?.map(n => `'${n}'`).join(',')}], false, params)`
+      return `export const ${functionName} = (params) => useWPContent('${q.operation}', '${q.name}', [${q.nodes?.map(n => `'${n}'`).join(',')}], false, params)`
     }
     const fragmentSuffix = q.fragments?.length && q.nodes?.includes('nodes') ? '[]' : ''
     const fragments = q.fragments?.length ? q.fragments.map(f => `${f}Fragment${fragmentSuffix}`).join(' | ') : 'any'

src/runtime/components/StagingBanner.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { OperationTypeNode } from 'graphql'
 import { useWPUri } from '../composables/useWPUri'
 import { useWPContent } from '../composables'
 import WPNuxtLogo from './WPNuxtLogo.vue'
@@ -27,7 +28,7 @@ if (uri.startsWith('/')) {
 if (uri.endsWith('/')) {
   uri = uri.substring(0, uri.length - 1)
 }
-const { data: post } = await useWPContent('NodeByUri', ['nodeByUri'], false, { uri: uri })
+const { data: post } = await useWPContent(OperationTypeNode.QUERY, 'NodeByUri', ['nodeByUri'], false, { uri: uri })
 
 if (import.meta.client) {
   document.body.style.marginBottom = '40px'

src/runtime/composables/usePrevNextPost.ts

@@ -1,3 +1,4 @@
+import { OperationTypeNode } from 'graphql'
 import { useWPContent } from './useWPContent'
 
 const _usePrevNextPost = async (currentPostSlug: string) => {
@@ -14,7 +15,7 @@ const _usePrevNextPost = async (currentPostSlug: string) => {
 }
 
 const getAllPosts = async () => {
-  const { data: allPosts } = await useWPContent('Posts', ['posts', 'nodes'], false)
+  const { data: allPosts } = await useWPContent(OperationTypeNode.QUERY, 'Posts', ['posts', 'nodes'], false)
   if (allPosts) {
     return {
       slugs: allPosts?.map((post) => {

src/runtime/composables/useWPContent.ts

@@ -1,11 +1,13 @@
 import type { FetchError } from 'ofetch'
+import type { OperationTypeNode } from 'graphql'
 import { getRelativeImagePath } from '../util/images'
 import type { AsyncData } from '#app'
 
-const _useWPContent = async <T>(queryName: string, nodes: string[], fixImagePaths: boolean, params?: T) => {
+const _useWPContent = async <T>(operation: OperationTypeNode, queryName: string, nodes: string[], fixImagePaths: boolean, params?: T) => {
   const { data, error } = await $fetch<AsyncData<T, FetchError | null>>('/api/wpContent', {
     method: 'POST',
     body: {
+      operation,
       queryName,
       params
     }

src/runtime/server/api/wpContent.post.ts

@@ -11,8 +11,10 @@ export default defineCachedEventHandler(async (event: H3Event) => {
       'The request must contain a queryName'
     )
   }
-  return $fetch('/api/graphql_middleware/query/' + body.queryName, {
-    params: buildRequestParams(body.params),
+  return $fetch('/api/graphql_middleware/' + (body.operation || 'query') + '/' + body.queryName, {
+    method: body.operation === 'mutation' ? 'POST' : 'GET',
+    params: body.operation === 'query' ? buildRequestParams(body.params) : undefined,
+    body: body.operation === 'mutation' ? body.params : undefined,
     headers: {
       Authorization: `Bearer ${event.context.accessToken}`
     }

src/types.d.ts

@@ -66,4 +66,5 @@ export type WPNuxtQuery = {
   nodes?: string[]
   fragments: string[]
   params: Record<string, string>
+  operation: OperationTypeNode
 }

src/useParser.ts

@@ -17,7 +17,8 @@ const _parseDoc = async (doc: string): Promise<WPNuxtQuery[]> => {
         name: operationDefinition.name.value.trim(),
         nodes: [],
         fragments: [],
-        params: {}
+        params: {},
+        operation: operationDefinition.operation
       }
       processSelections(operationDefinition.selectionSet.selections, 0, query)
       return query