feat: support graphql subscriptions

.github/workflows/docs.yml

@@ -7,12 +7,6 @@ on:
     paths:
       - "docs/**"
       - ".github/workflows/docs.yml"
-  pull_request:
-    branches:
-      - main
-    paths:
-      - "docs/**"
-      - ".github/workflows/docs.yml"
   workflow_dispatch:
 
 jobs:    

README.md

@@ -36,7 +36,7 @@
 - 🚀 [Nuxt 3](https://v3.nuxtjs.org) Support
 - Full Typescript Support
 - HMR (Hot Module Reload) for GraphQL documents
-- Minimal [GraphQL Client](https://github.com/prisma-labs/graphql-request#graphql-request) + [Code Generation](https://www.graphql-code-generator.com/)
+- Minimal GraphQL Client + [Code Generation](https://www.graphql-code-generator.com/)
 
 ## Preview
 

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

@@ -114,9 +114,8 @@ export default defineNuxtPlugin(() => {
       for (const gqlError of err.gqlErrors) {
         console.error('[nuxt-graphql-client] [GraphQL error]', {
           client: err.client,
+          operation: err.operation,
           statusCode: err.statusCode,
-          operationType: err.operationType,
-          operationName: err.operationName,
           gqlError
         })
       }

docs/content/1.index.md

@@ -19,7 +19,7 @@ snippet: yarn add nuxt-graphql-client
 Nuxt [GraphQL Client]{ .text-primary }
 
 #description
-Minimal [GraphQL Client](https://github.com/prisma-labs/graphql-request#graphql-request) + [Code Generation](https://www.graphql-code-generator.com/) for [Nuxt](https://v3.nuxtjs.org) ⚡️
+Minimal GraphQL Client + [Code Generation](https://www.graphql-code-generator.com/) for [Nuxt](https://v3.nuxtjs.org) ⚡️
 
 #extra
 ::list

docs/content/4.community/1.credits.md

@@ -10,5 +10,5 @@ Special thanks to [@danielroe](https://github.com/danielroe) for helping navigat
 <br>
 
 Under the hood:
-- [GraphQL Request](https://github.com/prisma-labs/graphql-request#graphql-request)
+- [ofetch](https://github.com/unjs/ofetch)
 - [GraphQL Code Generator](https://www.graphql-code-generator.com/)

examples/subscription/app.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <NuxtExampleLayout repo="diizzayy/nuxt-graphql-client" example="subscription" class="text-start">
+      <template #name>
+        <NuxtLink to="https://github.com/Diizzayy/nuxt-graphql-client/tree/refactor/ohmygql/examples/subscription">
+          subscription
+        </NuxtLink>
+      </template>
+
+      <div grid grid-cols-2>
+        <div>
+          <div>
+            <p>WS Status: {{ wsStatus }}</p>
+          </div>
+
+          <div v-if="wsStatus === 'connected'">
+            <p id="connected">
+              🟩
+            </p>
+          </div>
+
+          <div>
+            <input id="todoInput" v-model="todoInput" type="text">
+          </div>
+
+          <NButton @click="createTodo()">
+            Create Todo
+          </NButton>
+        </div>
+
+        <div id="todoResponse">
+          {{ data }}
+        </div>
+      </div>
+    </NuxtExampleLayout>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { TodoAddedSubscription } from '#gql'
+
+const wsStatus = ref<string>('')
+const todoInput = ref(`Random Text ${Math.random().toString()}`)
+const data = ref<TodoAddedSubscription['todoAdded'] | null>(null)
+
+onMounted(() => {
+  const { subscribe, onResult, onError, unsubscribe } = GqlTodoAdded(null, {
+    on: {
+      opened: () => (wsStatus.value = 'opened'),
+      connected: () => (wsStatus.value = 'connected'),
+      connecting: () => (wsStatus.value = 'connecting'),
+      closed: () => (wsStatus.value = 'closed')
+    }
+  })
+
+  onResult((result) => {
+    data.value = result.data?.todoAdded
+  })
+
+  subscribe()
+})
+
+const createTodo = () => GqlCreateTodo({ todo: { text: todoInput.value } })
+</script>

examples/subscription/nuxt.config.ts

@@ -0,0 +1,9 @@
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui', 'nuxt-graphql-client'],
+
+  runtimeConfig: {
+    public: {
+      GQL_HOST: 'https://nuxt-gql-server-2gl6xp7kua-ue.a.run.app/query'
+    }
+  }
+})

examples/subscription/package.json

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "name": "example-subscription",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "preview": "nuxt preview",
+    "generate": "nuxt generate",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "nuxt": "latest",
+    "@nuxt/ui": "latest",
+    "nuxt-graphql-client": "latest"
+  }
+}

examples/subscription/queries/todos.gql

@@ -0,0 +1,7 @@
+query getTodos { todos { id text } }
+
+query getTodo($id: Int!) { todo (id: $id) { id text } }
+
+mutation createTodo($todo: TodoInput!) { createTodo(todo: $todo) { id text } }
+
+subscription todoAdded { todoAdded { id text } }

examples/subscription/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "./.nuxt/tsconfig.json"
+}

package.json

@@ -9,7 +9,7 @@
     "gql",
     "graphql",
     "graphql-client",
-    "graphql-request",
+    "ofetch",
     "codegen",
     "graphql-code-generator"
   ],
@@ -47,13 +47,12 @@
   "dependencies": {
     "@graphql-codegen/cli": "npm:graphql-codegen-cli-nuxt@latest",
     "@graphql-codegen/typescript": "^2.8.3",
-    "@graphql-codegen/typescript-graphql-request": "^4.5.8",
     "@graphql-codegen/typescript-operations": "^2.5.8",
     "@nuxt/kit": "latest",
     "defu": "^6.1.1",
     "graphql": "^16.6.0",
-    "graphql-request": "^5.0.0",
     "knitwork": "^1.0.0",
+    "ogql": "^0.0.1",
     "ohash": "^1.0.0",
     "scule": "^1.0.0"
   },
@@ -64,6 +63,7 @@
     "@vitest/coverage-c8": "^0.25.3",
     "eslint": "^8.29.0",
     "nuxt": "latest",
+    "playwright": "^1.28.1",
     "vitest": "^0.25.3"
   },
   "packageManager": "pnpm@7.18.0"

playground/plugins/onError.ts

@@ -5,9 +5,8 @@ export default defineNuxtPlugin(() => {
       for (const gqlError of err.gqlErrors) {
         console.error('[nuxt-graphql-client] [GraphQL error]', {
           client: err.client,
+          operation: err.operation,
           statusCode: err.statusCode,
-          operationType: err.operationType,
-          operationName: err.operationName,
           gqlError
         })
       }