add POC graphql subscription

.meshrc.yml

@@ -9,6 +9,9 @@ sources:
         source: schemas/directus.graphql
         operationHeaders:
           Authorization: Bearer {env.DIRECTUS_API}
+additionalResolvers:
+  - ./resolvers/projects.js
+
   # - name: Cloudron
   #   handler:
   #     openapi:

package.json

@@ -33,12 +33,15 @@
     "fs": "0.0.1-security",
     "graphql": "^16.7.1",
     "graphql-request": "^6.1.0",
+    "graphql-subscriptions": "^2.0.0",
+    "graphql-ws": "^5.14.0",
     "next": "13.4.9",
     "node-fetch": "^3.3.2",
     "postcss": "8.4.25",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.2",
-    "typescript": "5.1.6"
+    "typescript": "5.1.6",
+    "ws": "^8.13.0"
   }
 }

pnpm-lock.yaml

@@ -12,7 +12,7 @@ dependencies:
     version: 0.85.1(@babel/core@7.22.8)(@types/node@20.4.1)(graphql-tag@2.12.6)(graphql-yoga@4.0.3)(graphql@16.7.1)(react-native@0.72.3)
   '@graphql-mesh/graphql':
     specifier: ^0.95.1
-    version: 0.95.1(@graphql-mesh/cross-helpers@0.4.0)(@graphql-mesh/store@0.94.3)(@graphql-mesh/types@0.95.2)(@graphql-mesh/utils@0.94.3)(@graphql-tools/utils@10.0.3)(@types/node@20.4.1)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0)(tslib@2.6.0)
+    version: 0.95.1(@graphql-mesh/cross-helpers@0.4.0)(@graphql-mesh/store@0.94.3)(@graphql-mesh/types@0.95.2)(@graphql-mesh/utils@0.94.3)(@graphql-tools/utils@10.0.3)(@types/node@20.4.1)(graphql-ws@5.14.0)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0)(tslib@2.6.0)
   '@graphql-mesh/openapi':
     specifier: ^0.94.7
     version: 0.94.7(@graphql-mesh/cross-helpers@0.4.0)(@graphql-mesh/store@0.94.3)(@graphql-mesh/types@0.95.2)(@graphql-mesh/utils@0.94.3)(@graphql-tools/utils@10.0.3)(graphql@16.7.1)(tslib@2.6.0)
@@ -58,6 +58,12 @@ dependencies:
   graphql-request:
     specifier: ^6.1.0
     version: 6.1.0(graphql@16.7.1)
+  graphql-subscriptions:
+    specifier: ^2.0.0
+    version: 2.0.0(graphql@16.7.1)
+  graphql-ws:
+    specifier: ^5.14.0
+    version: 5.14.0(graphql@16.7.1)
   next:
     specifier: 13.4.9
     version: 13.4.9(@babel/core@7.22.8)(react-dom@18.2.0)(react@18.2.0)
@@ -79,6 +85,9 @@ dependencies:
   typescript:
     specifier: 5.1.6
     version: 5.1.6
+  ws:
+    specifier: ^8.13.0
+    version: 8.13.0
 
 packages:
 
@@ -100,7 +109,7 @@ packages:
       '@jridgewell/trace-mapping': 0.3.18
     dev: false
 
-  /@apollo/client@3.7.17(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0):
+  /@apollo/client@3.7.17(graphql-ws@5.14.0)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-0EErSHEtKPNl5wgWikHJbKFAzJ/k11O0WO2QyqZSHpdxdAnw7UWHY4YiLbHCFG7lhrD+NTQ3Z/H9Jn4rcikoJA==}
     requiresBuild: true
     peerDependencies:
@@ -125,6 +134,7 @@ packages:
       '@wry/trie': 0.4.3
       graphql: 16.7.1
       graphql-tag: 2.12.6(graphql@16.7.1)
+      graphql-ws: 5.14.0(graphql@16.7.1)
       hoist-non-react-statics: 3.3.2
       optimism: 0.16.2
       prop-types: 15.8.1
@@ -2071,7 +2081,7 @@ packages:
       - react-native-windows
     dev: false
 
-  /@graphql-mesh/graphql@0.95.1(@graphql-mesh/cross-helpers@0.4.0)(@graphql-mesh/store@0.94.3)(@graphql-mesh/types@0.95.2)(@graphql-mesh/utils@0.94.3)(@graphql-tools/utils@10.0.3)(@types/node@20.4.1)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0)(tslib@2.6.0):
+  /@graphql-mesh/graphql@0.95.1(@graphql-mesh/cross-helpers@0.4.0)(@graphql-mesh/store@0.94.3)(@graphql-mesh/types@0.95.2)(@graphql-mesh/utils@0.94.3)(@graphql-tools/utils@10.0.3)(@types/node@20.4.1)(graphql-ws@5.14.0)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0)(tslib@2.6.0):
     resolution: {integrity: sha512-5ZHZLmHsEFUIBdyWZTG9ANHvOYlexOheUUwfBChmVoW/GqLe7FM1TEMS/91IwnAKA6SXZm5k068WmeLBXyrpRA==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
@@ -2089,7 +2099,7 @@ packages:
       '@graphql-mesh/types': 0.95.2(@graphql-mesh/store@0.94.3)(@graphql-tools/utils@10.0.3)(graphql@16.7.1)(tslib@2.6.0)
       '@graphql-mesh/utils': 0.94.3(@graphql-mesh/cross-helpers@0.4.0)(@graphql-mesh/types@0.95.2)(@graphql-tools/utils@10.0.3)(graphql@16.7.1)(tslib@2.6.0)
       '@graphql-tools/delegate': 10.0.0(graphql@16.7.1)
-      '@graphql-tools/federation': 1.1.3(@types/node@20.4.1)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0)
+      '@graphql-tools/federation': 1.1.3(@types/node@20.4.1)(graphql-ws@5.14.0)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0)
       '@graphql-tools/url-loader': 8.0.0(@types/node@20.4.1)(graphql@16.7.1)
       '@graphql-tools/utils': 10.0.3(graphql@16.7.1)
       graphql: 16.7.1
@@ -2458,7 +2468,7 @@ packages:
       value-or-promise: 1.0.12
     dev: false
 
-  /@graphql-tools/federation@1.1.3(@types/node@20.4.1)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0):
+  /@graphql-tools/federation@1.1.3(@types/node@20.4.1)(graphql-ws@5.14.0)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-rLLV5e/SPuZMyzz0pby3gfffUv2cwN4VI7Sr6TTMSi0dGB0esbr35ueZOlox/HK8SKtDjp7E/4ZGOy83E5TENg==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
@@ -2475,7 +2485,7 @@ packages:
       tslib: 2.6.0
       value-or-promise: 1.0.12
     optionalDependencies:
-      '@apollo/client': 3.7.17(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0)
+      '@apollo/client': 3.7.17(graphql-ws@5.14.0)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0)
     transitivePeerDependencies:
       - '@types/node'
       - graphql-ws
@@ -5625,6 +5635,15 @@ packages:
       tslib: 2.6.0
     dev: false
 
+  /graphql-subscriptions@2.0.0(graphql@16.7.1):
+    resolution: {integrity: sha512-s6k2b8mmt9gF9pEfkxsaO1lTxaySfKoEJzEfmwguBbQ//Oq23hIXCfR1hm4kdh5hnR20RdwB+s3BCb+0duHSZA==}
+    peerDependencies:
+      graphql: ^15.7.2 || ^16.0.0
+    dependencies:
+      graphql: 16.7.1
+      iterall: 1.3.0
+    dev: false
+
   /graphql-tag@2.12.6(graphql@16.7.1):
     resolution: {integrity: sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==}
     engines: {node: '>=10'}
@@ -6119,6 +6138,10 @@ packages:
       ws: 8.13.0
     dev: false
 
+  /iterall@1.3.0:
+    resolution: {integrity: sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==}
+    dev: false
+
   /jackspeak@2.2.1:
     resolution: {integrity: sha512-MXbxovZ/Pm42f6cDIDkl3xpwv1AGwObKwfmjs2nQePiy85tP3fatofl3FC1aBsOtP/6fq5SbtgHwWcMsLP+bDw==}
     engines: {node: '>=14'}

resolvers/projects.js

@@ -0,0 +1,41 @@
+const { createClient } = require('graphql-ws');
+const WebSocket = require('ws');
+
+const client = createClient({
+  url: 'wss://directus.andert.me/graphql',
+  keepAlive: 30000,
+  webSocketImpl: WebSocket,
+  connectionParams: async () => {
+    return { access_token: 'Mb3NMqKwiyesxDeJRTD72VZZ6f4t3mBr' };
+  },
+  on: {
+    opened: () => console.log('Connection opened'),
+    closed: () => console.log('Connection closed'),
+    error: (error) => console.log('Connection error:', error),
+  },
+});
+
+client.subscribe(
+  {
+    query: `
+      subscription {
+        projects_mutated {
+          data {
+            text
+            date_updated
+            user_updated {
+              first_name
+            }
+          }
+          event
+          key
+        }
+      }
+    `,
+  },
+  {
+    next: data => console.log('data:', data),
+    error: error => console.error('error:', error),
+    complete: () => console.log('complete'),
+  }
+);