WIP

Altinn · Mar 5, 2024 · 844f5f9 · 844f5f9
1 parent fdf10f6
commit 844f5f9
Show file tree

Hide file tree

Showing 8 changed files with 560 additions and 5 deletions.
diff --git a/packages/bff-graphql-poc/package.json b/packages/bff-graphql-poc/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "bff-graphql-poc",
+  "scripts": {
+    "dev": "nodemon --watch 'src/**' --ext 'ts' --exec './src/index.ts'"
+  },
+  "dependencies": {
+    "@fastify/websocket": "^9.0.0",
+    "@tsconfig/node20": "^20.1.2",
+    "fastify": "^4.26.1",
+    "graphql": "^16.8.1",
+    "graphql-http": "^1.22.0",
+    "graphql-ws": "^5.15.0",
+    "nexus": "^1.3.0",
+		"fastify-graphiql": "workspace:*"
+  },
+  "devDependencies": {
+    "ts-node": "^10.9.1",
+    "typescript": "^5.3.3",
+    "nodemon": "^3.0.3"
+  },
+  "type": "module"
+}
diff --git a/packages/bff-graphql-poc/src/index.ts b/packages/bff-graphql-poc/src/index.ts
@@ -0,0 +1,31 @@
+#!/usr/bin/env -S node --no-warnings=ExperimentalWarning --loader ts-node/esm
+import Fastify from 'fastify';
+import fastifyWebsocket from '@fastify/websocket'; 
+import { makeHandler } from 'graphql-ws/lib/use/@fastify/websocket';
+import { createHandler } from 'graphql-http/lib/use/fastify';
+import fastifyGraphiql from 'fastify-graphiql';
+import { schema } from './schema.ts';
+
+const port = 4000;
+const app = Fastify();
+app.get('/', async function handler (request, reply) {
+  return { hello: 'world' }
+});
+
+app.register(fastifyGraphiql);
+
+app.register(fastifyWebsocket);
+
+app.register(async (fastify) => {
+  fastify.get('/graphql', { websocket: true }, makeHandler({ schema }));
+});
+
+app.post('/graphql', createHandler({ schema }));
+
+app.listen({ port }, (err, address) => {
+	if(err) {
+		fastify.log.error(err);
+		process.exit(1);
+	}
+	console.log(`App started on ${address}`);
+});
diff --git a/packages/bff-graphql-poc/src/schema.ts b/packages/bff-graphql-poc/src/schema.ts
@@ -0,0 +1,17 @@
+import { makeSchema, objectType } from 'nexus';
+
+const Query = objectType({
+  name: 'Query',
+  definition(t) {
+    t.field('hello', {
+      type: 'String',
+      resolve: () => {
+        return 'Hello!';
+      },
+    });
+  },
+});
+
+export const schema = makeSchema({
+	types: [Query]
+});
diff --git a/packages/bff-graphql-poc/tsconfig.json b/packages/bff-graphql-poc/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+
+  "ts-node": {
+    "transpileOnly": true,
+    "files": true,
+
+    "compilerOptions": {
+    }
+  },
+  "compilerOptions": {
+	}
+}
diff --git a/packages/fastify-graphiql/Readme.md b/packages/fastify-graphiql/Readme.md
@@ -0,0 +1,3 @@
+# GraphiQL
+
+Adds the GraphiQL graphical interactive in-browser GraphQL IDE to fastify.
diff --git a/packages/fastify-graphiql/package.json b/packages/fastify-graphiql/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "fastify-graphiql",
+  "main": "./src/index.js",
+  "scripts": {
+  },
+  "dependencies": {
+    "fastify-plugin": "^4.5.1"
+  }
+}
diff --git a/packages/fastify-graphiql/src/index.js b/packages/fastify-graphiql/src/index.js
@@ -0,0 +1,82 @@
+const fp = require('fastify-plugin')
+
+const plugin = fp((fastify, opts, done) => {
+	const graphqlURL = '/graphql';
+
+	fastify.get('/graphiql', (request, reply) => {
+		reply.type('text/html');
+		reply.send(
+`
+<!--
+ *  Copyright (c) 2021 GraphQL Contributors
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE file in the root directory of this source tree.
+-->
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>GraphiQL</title>
+    <style>
+      body {
+        height: 100%;
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      #graphiql {
+        height: 100vh;
+      }
+    </style>
+    <!--
+      This GraphiQL example depends on Promise and fetch, which are available in
+      modern browsers, but can be "polyfilled" for older browsers.
+      GraphiQL itself depends on React DOM.
+      If you do not want to rely on a CDN, you can host these files locally or
+      include them directly in your favored resource bundler.
+    -->
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <!--
+      These two files can be found in the npm module, however you may wish to
+      copy them directly into your environment, or perhaps include them in your
+      favored resource bundler.
+     -->
+    <script src="https://unpkg.com/graphiql/graphiql.min.js" type="application/javascript"></script>
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+
+    <!--
+      These are imports for the GraphIQL Explorer plugin.
+     -->
+    <script src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js" crossorigin></script>
+    <link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" />
+  </head>
+  <body>
+    <div id="graphiql">Loading...</div>
+    <script>
+      const root = ReactDOM.createRoot(document.getElementById('graphiql'));
+      const fetcher = GraphiQL.createFetcher({
+        url: '${graphqlURL}',
+      });
+      const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
+      root.render(
+        React.createElement(GraphiQL, {
+          fetcher,
+          defaultEditorToolsVisibility: true,
+          plugins: [explorerPlugin],
+        }),
+      );
+    </script>
+  </body>
+</html>
+`
+		);
+	});
+
+	done();
+});
+
+module.exports = plugin;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# GraphiQL

		Adds the GraphiQL graphical interactive in-browser GraphQL IDE to fastify.