Merge pull request #219 from wunderio/feature/NEX-153-codegen-auth

NEX-153: Add necessary authentication to graphql-codegen

next/.gitignore

@@ -41,3 +41,6 @@ lerna-debug.log*
 /storybook-static
 /cypress/screenshots/
 /cypress/videos/
+
+# graphql schema
+lib/graphql/schema.graphql

next/.graphqlrc.yml

@@ -1,6 +1,3 @@
-# .graphqlrc.yml
-# NOTE: this needs to be http and not https:
-# Also, this should be updated with the project's lando url:
-schema: "http://next-drupal-starterkit.lndo.site/graphql"
-documents:
-  - "lib/graphql/**/*.{graphql,js,ts,jsx,tsx}"
+# This file exposes the graphql schema and documents to the graphql.vscode-graphql and other compatible IDE extensions
+schema: "./lib/graphql/schema.graphql"
+documents: "lib/graphql/**/*.{js,ts,jsx,tsx}"

next/codegen-access-token.ts

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const { loadEnvConfig } = require("@next/env");
+const fs = require("fs");
+const path = require("path");
+const os = require("os");
+
+loadEnvConfig(process.cwd());
+
+/**
+ * Gets an access token from Drupal and saves it the temporary directory,
+ * so it can be used by graphql-codegen to authenticate to the Drupal GraphQL API.
+ */
+void (async function getAndSaveAccessToken() {
+  try {
+    /* eslint-disable n/no-process-env */
+    const oauthUrl = `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/oauth/token`;
+    const credentials = Buffer.from(
+      `${process.env.DRUPAL_CLIENT_ID}:${process.env.DRUPAL_CLIENT_SECRET}`,
+    ).toString("base64");
+    /* eslint-enable n/no-process-env */
+
+    const response = await fetch(oauthUrl, {
+      method: "POST",
+      headers: {
+        Authorization: `Basic ${credentials}`,
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: `grant_type=client_credentials`,
+    });
+
+    if (!response.ok) {
+      throw new Error(response?.statusText || "Error getting access token.");
+    }
+
+    const result = await response.json();
+
+    const tokenFilePath = path.resolve(os.tmpdir(), ".drupal-access-token.txt");
+
+    fs.writeFileSync(tokenFilePath, result.access_token);
+
+    console.log(`Access token saved to ${tokenFilePath}`);
+  } catch (error) {
+    console.log("Error getting or saving access token:", error);
+  }
+})();

next/codegen.ts

@@ -1,8 +1,27 @@
-import { CodegenConfig } from "@graphql-codegen/cli";
+import { loadEnvConfig } from "@next/env";
+import type { CodegenConfig } from "@graphql-codegen/cli";
+import fs from "fs";
+import os from "os";
+import path from "path";
+
+const tokenFilePath = path.resolve(os.tmpdir(), ".drupal-access-token.txt");
+const token = fs.readFileSync(tokenFilePath, "utf8").trim();
+
+loadEnvConfig(process.cwd());
+
+/* eslint-disable-next-line n/no-process-env */
+const schemaUrl = `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/graphql`;
 
 const config: CodegenConfig = {
-  // eslint-disable-next-line n/no-process-env
-  schema: `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/graphql`,
+  schema: [
+    {
+      [schemaUrl]: {
+        headers: {
+          authorization: `Bearer ${token}`,
+        },
+      },
+    },
+  ],
   documents: ["lib/graphql/**/*.ts", "!./node_modules/**/*", "!./.next/**/*"],
   ignoreNoDocuments: true, // for better experience with the watcher
   generates: {
@@ -12,6 +31,12 @@ const config: CodegenConfig = {
         fragmentMasking: false,
       },
     },
+    "./lib/graphql/schema.graphql": {
+      plugins: ["schema-ast"],
+      config: {
+        includeDirectives: true,
+      },
+    },
   },
   verbose: true,
 };

next/package.json

@@ -15,7 +15,7 @@
     "build-storybook": "STORYBOOK=true storybook build",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "graphql-codegen": "graphql-codegen --watch"
+    "graphql-codegen": "ts-node ./codegen-access-token.ts && graphql-codegen --watch --config codegen.ts"
   },
   "dependencies": {
     "@elastic/react-search-ui": "^1.20.2",
@@ -54,6 +54,7 @@
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.0",
     "@graphql-codegen/client-preset": "^4.1.0",
+    "@graphql-codegen/schema-ast": "^4.0.2",
     "@next/eslint-plugin-next": "^13.5.6",
     "@parcel/watcher": "^2.4.0",
     "@storybook/addon-essentials": "^7.5.3",
@@ -86,6 +87,7 @@
     "storybook": "^7.5.3",
     "storybook-react-i18next": "^2.0.9",
     "tailwindcss": "^3.3.5",
+    "ts-node": "^10.9.2",
     "typescript": "~5.2.2"
   },
   "overrides": {