From e2c9936e9c6a89984c5070a382415b61976d7b6d Mon Sep 17 00:00:00 2001 From: Joshua Scott Date: Tue, 21 May 2024 17:06:51 +0300 Subject: [PATCH 1/5] NEX-153: Install necessary dev dependencies --- next/package-lock.json | 154 +++++++++++++++++++++++++++++++++++++++++ next/package.json | 2 + 2 files changed, 156 insertions(+) diff --git a/next/package-lock.json b/next/package-lock.json index 752ade4f..5c64ed47 100644 --- a/next/package-lock.json +++ b/next/package-lock.json @@ -45,6 +45,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", @@ -77,6 +78,7 @@ "storybook": "^7.5.3", "storybook-react-i18next": "^2.0.9", "tailwindcss": "^3.3.5", + "ts-node": "^10.9.2", "typescript": "~5.2.2" } }, @@ -2494,6 +2496,28 @@ "node": ">=0.1.90" } }, + "node_modules/@cspotcode/source-map-support": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", + "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", + "dev": true, + "dependencies": { + "@jridgewell/trace-mapping": "0.3.9" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": { + "version": "0.3.9", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", + "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", + "dev": true, + "dependencies": { + "@jridgewell/resolve-uri": "^3.0.3", + "@jridgewell/sourcemap-codec": "^1.4.10" + } + }, "node_modules/@cypress/request": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz", @@ -8208,6 +8232,30 @@ "node": ">=10.13.0" } }, + "node_modules/@tsconfig/node10": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz", + "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==", + "dev": true + }, + "node_modules/@tsconfig/node12": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", + "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", + "dev": true + }, + "node_modules/@tsconfig/node14": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", + "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", + "dev": true + }, + "node_modules/@tsconfig/node16": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", + "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", + "dev": true + }, "node_modules/@types/aria-query": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", @@ -11640,6 +11688,12 @@ "sha.js": "^2.4.8" } }, + "node_modules/create-require": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", + "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", + "dev": true + }, "node_modules/cross-fetch": { "version": "3.1.8", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz", @@ -12493,6 +12547,15 @@ "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", "dev": true }, + "node_modules/diff": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", + "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", + "dev": true, + "engines": { + "node": ">=0.3.1" + } + }, "node_modules/diffie-hellman": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", @@ -17719,6 +17782,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/make-error": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", + "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", + "dev": true + }, "node_modules/makeerror": { "version": "1.0.12", "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz", @@ -23203,6 +23272,76 @@ "integrity": "sha512-PGcnJoTBnVGy6yYNFxWVNkdcAuAMstvutN9MgDJIV6L0oG8fB+ZNNy1T+wJzah8RPGor1mZuPQkVfXNDpy9eHA==", "dev": true }, + "node_modules/ts-node": { + "version": "10.9.2", + "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", + "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", + "dev": true, + "dependencies": { + "@cspotcode/source-map-support": "^0.8.0", + "@tsconfig/node10": "^1.0.7", + "@tsconfig/node12": "^1.0.7", + "@tsconfig/node14": "^1.0.0", + "@tsconfig/node16": "^1.0.2", + "acorn": "^8.4.1", + "acorn-walk": "^8.1.1", + "arg": "^4.1.0", + "create-require": "^1.1.0", + "diff": "^4.0.1", + "make-error": "^1.1.1", + "v8-compile-cache-lib": "^3.0.1", + "yn": "3.1.1" + }, + "bin": { + "ts-node": "dist/bin.js", + "ts-node-cwd": "dist/bin-cwd.js", + "ts-node-esm": "dist/bin-esm.js", + "ts-node-script": "dist/bin-script.js", + "ts-node-transpile-only": "dist/bin-transpile.js", + "ts-script": "dist/bin-script-deprecated.js" + }, + "peerDependencies": { + "@swc/core": ">=1.2.50", + "@swc/wasm": ">=1.2.50", + "@types/node": "*", + "typescript": ">=2.7" + }, + "peerDependenciesMeta": { + "@swc/core": { + "optional": true + }, + "@swc/wasm": { + "optional": true + } + } + }, + "node_modules/ts-node/node_modules/acorn": { + "version": "8.11.3", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", + "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", + "dev": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/ts-node/node_modules/acorn-walk": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz", + "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==", + "dev": true, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/ts-node/node_modules/arg": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", + "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", + "dev": true + }, "node_modules/ts-pnp": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz", @@ -23865,6 +24004,12 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/v8-compile-cache-lib": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", + "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", + "dev": true + }, "node_modules/validate-npm-package-license": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", @@ -24446,6 +24591,15 @@ "fd-slicer": "~1.1.0" } }, + "node_modules/yn": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", + "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/next/package.json b/next/package.json index a56f0a03..19b72b03 100644 --- a/next/package.json +++ b/next/package.json @@ -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": { From 322f4994ebda9209a982bbec9c5d1ccccda7caa4 Mon Sep 17 00:00:00 2001 From: Joshua Scott Date: Tue, 21 May 2024 17:11:10 +0300 Subject: [PATCH 2/5] NEX-153: Add script to get and save an access token for graphql-codegen --- next/codegen-access-token.ts | 46 ++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 next/codegen-access-token.ts diff --git a/next/codegen-access-token.ts b/next/codegen-access-token.ts new file mode 100644 index 00000000..049862fb --- /dev/null +++ b/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); + } +})(); From ee0b11a0c628ae2fdc220bd7e3570b999002be19 Mon Sep 17 00:00:00 2001 From: Joshua Scott Date: Tue, 21 May 2024 17:13:28 +0300 Subject: [PATCH 3/5] NEX-153: Update graphql-codegen config to authenticate via access token --- next/.graphqlrc.yml | 6 ------ next/codegen.ts | 25 ++++++++++++++++++++++--- next/package.json | 2 +- 3 files changed, 23 insertions(+), 10 deletions(-) delete mode 100644 next/.graphqlrc.yml diff --git a/next/.graphqlrc.yml b/next/.graphqlrc.yml deleted file mode 100644 index fddf5ed3..00000000 --- a/next/.graphqlrc.yml +++ /dev/null @@ -1,6 +0,0 @@ -# .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}" diff --git a/next/codegen.ts b/next/codegen.ts index 0fe41b51..a15482c1 100644 --- a/next/codegen.ts +++ b/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: { diff --git a/next/package.json b/next/package.json index 19b72b03..4dfa24da 100644 --- a/next/package.json +++ b/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", From 12b442358f2be88c43612fd4238cdda9601967b5 Mon Sep 17 00:00:00 2001 From: Joshua Scott Date: Tue, 21 May 2024 17:15:38 +0300 Subject: [PATCH 4/5] NEX-153: Expose graphql schema for vscode-graphql extension --- next/.gitignore | 3 +++ next/.graphqlrc.yml | 3 +++ next/codegen.ts | 6 ++++++ 3 files changed, 12 insertions(+) create mode 100644 next/.graphqlrc.yml diff --git a/next/.gitignore b/next/.gitignore index 7a358d15..32544290 100644 --- a/next/.gitignore +++ b/next/.gitignore @@ -41,3 +41,6 @@ lerna-debug.log* /storybook-static /cypress/screenshots/ /cypress/videos/ + +# graphql schema +lib/graphql/schema.graphql diff --git a/next/.graphqlrc.yml b/next/.graphqlrc.yml new file mode 100644 index 00000000..d2490300 --- /dev/null +++ b/next/.graphqlrc.yml @@ -0,0 +1,3 @@ +# This file exposes the graphql schema and documents to the graphql.vscode-graphql extension +schema: "./lib/graphql/schema.graphql" +documents: "lib/graphql/**/*.{js,ts,jsx,tsx}" diff --git a/next/codegen.ts b/next/codegen.ts index a15482c1..768e6983 100644 --- a/next/codegen.ts +++ b/next/codegen.ts @@ -31,6 +31,12 @@ const config: CodegenConfig = { fragmentMasking: false, }, }, + "./lib/graphql/schema.graphql": { + plugins: ["schema-ast"], + config: { + includeDirectives: true, + }, + }, }, verbose: true, }; From 597957e5e2a47e95d93f8c9c365e6a2fb3027edb Mon Sep 17 00:00:00 2001 From: Joshua Scott Date: Tue, 21 May 2024 18:51:45 +0300 Subject: [PATCH 5/5] NEX-153: Improve comment in next/.graphqlrc.yml Co-authored-by: Mario Vercellotti --- next/.graphqlrc.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/next/.graphqlrc.yml b/next/.graphqlrc.yml index d2490300..5b83e6fa 100644 --- a/next/.graphqlrc.yml +++ b/next/.graphqlrc.yml @@ -1,3 +1,3 @@ -# This file exposes the graphql schema and documents to the graphql.vscode-graphql extension +# 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}"