refactor: use graphql directive autoloading

And centralise schema aggregation in the schema package.

apps/cms/.gitignore

@@ -28,3 +28,6 @@ generated/operations.json
 
 # Translations from the FE
 generated/translations.json
+
+# GraphQL autoload registry
+generated/autoload.json

apps/cms/autoload.json

@@ -0,0 +1 @@
+{}

apps/cms/config/sync/graphql.graphql_servers.main.yml

@@ -14,7 +14,7 @@ query_depth: null
 query_complexity: null
 schema_configuration:
   directable:
-    schema_definition: ../generated/graphql/schema.graphqls
+    schema_definition: ../node_modules/@custom/schema/build/schema.graphql
     extensions:
       silverback_campaign_urls: silverback_campaign_urls
       silverback_gatsby: silverback_gatsby

apps/cms/package.json

@@ -8,9 +8,8 @@
   "sideEffects": false,
   "scripts": {
     "prep": "if command -v composer; then composer install; else echo 'Skipping composer install.'; fi",
-    "build": "pnpm drupal-install && rm -rf install-cache.zip && pnpm content:import && pnpm build:directives && pnpm export:schema && pnpm fix-premissions && pnpm ensure-working-db",
+    "build": "pnpm drupal-install && rm -rf install-cache.zip && pnpm content:import && pnpm fix-premissions && pnpm ensure-working-db",
     "turbo:build": "pnpm turbo build --output-logs=new-only",
-    "build:directives": "pnpm --silent drush graphql:directives > ../../packages/schema/src/generated/directives.graphqls",
     "export:schema": "pnpm drush silverback-gatsby:schema-export ../../../tests/schema",
     "fix-premissions": "chmod +w web/sites/default/files/.htaccess && chmod +w web/sites/default/files/private/.htaccess",
     "ensure-working-db": "pnpm drush sqlq 'select * from node'",

apps/decap/src/helpers/query.ts

@@ -13,7 +13,7 @@ import { useEffect, useState } from 'react';
 TODO: Generalize schema concatenation for other use cases (e.g. Drupal or Gatsby).
 Either using codegen or by reading .graphqlconfig.
 */
-import rawSchema from '../../node_modules/@custom/schema/src/schema.graphqls?raw';
+import rawSchema from '../../node_modules/@custom/schema/build/schema.graphql?raw';
 
 const rawDirectives = import.meta.glob(
   '../../node_modules/@custom/schema/src/generated/**/*.graphqls',

apps/website/.gitignore

@@ -6,4 +6,5 @@ public
 styles.css
 persisted-store
 
-src/gatsby-fragments.js
+src/gatsby-fragments.js
+autoload.mjs

apps/website/gatsby-config.js → apps/website/gatsby-config.mjs

@@ -6,6 +6,8 @@
 // TS file name should be different from gastby-config.ts, otherwise Gatsby will
 // pick it up instead of the JS file.
 
+import autoload from './autoload.mjs';
+
 process.env.GATSBY_DRUPAL_URL =
   process.env.DRUPAL_EXTERNAL_URL || 'http://127.0.0.1:8888';
 
@@ -18,7 +20,7 @@ process.env.CLOUDINARY_CLOUDNAME = process.env.CLOUDINARY_CLOUDNAME || 'demo';
 /**
  * @type {import('gatsby').GatsbyConfig}
  */
-module.exports = {
+export default {
   trailingSlash: 'ignore',
   proxy: {
     prefix: '/sites/default/files',
@@ -34,7 +36,6 @@ module.exports = {
   plugins: [
     'gatsby-plugin-pnpm',
     'gatsby-plugin-layout',
-    // 'gatsby-source-filesystem',
     'gatsby-plugin-sharp',
     {
       resolve: '@amazeelabs/gatsby-source-silverback',
@@ -46,14 +47,11 @@ module.exports = {
         graphql_path: '/graphql',
         auth_key: 'cfdb0555111c0f8924cecab028b53474',
         type_prefix: '',
+        schema_configuration: './graphqlrc.yml',
+        directives: autoload,
       },
     },
-    {
-      resolve: '@amazeelabs/gatsby-silverback-cloudinary',
-      options: {
-        responsiveImageFields: 'MediaImage.source',
-      },
-    },
+    '@amazeelabs/gatsby-silverback-cloudinary',
     {
       resolve: 'gatsby-plugin-netlify',
       options: {

apps/website/gatsby-node.mjs

@@ -1,38 +1,7 @@
 // @ts-check
 import { Locale } from '@custom/schema';
-import { readFileSync } from 'fs';
 import { resolve } from 'path';
 
-/**
- *
- * @type {import('gatsby').GatsbyNode['createSchemaCustomization']}
- */
-export const createSchemaCustomization = (args) => {
-  // TODO: This is still necessary, because graphql-source-toolkit won't import
-  //       interface relations.
-  const schema = readFileSync(
-    `./node_modules/@custom/schema/src/schema.graphqls`,
-    'utf8',
-  ).toString();
-  args.actions.createTypes(schema);
-
-  // Create field extensions for all directives that could confuse Gatsby.
-  const directives = schema.matchAll(/ @[a-zA-Z][a-zA-Z0-9]*/gm);
-  /**
-   * @type {Set<string>}
-   */
-  const directiveNames = new Set();
-  // "default" is a gatsby internal directive and should not be added again.
-  directiveNames.add('default');
-  for (const directive of directives) {
-    const name = directive[0].substring(2);
-    if (!directiveNames.has(name)) {
-      directiveNames.add(name);
-      args.actions.createFieldExtension({ name });
-    }
-  }
-};
-
 /**
  * @type {import('gatsby').GatsbyNode['onCreateWebpackConfig']}
  */

apps/website/graphqlrc.yml

@@ -0,0 +1,2 @@
+schema:
+  - node_modules/@custom/schema/build/schema.graphql

apps/website/package.json

@@ -4,7 +4,7 @@
   "dependencies": {
     "@amazeelabs/bridge-gatsby": "^1.2.0",
     "@amazeelabs/cloudinary-responsive-image": "^1.6.7",
-    "@amazeelabs/gatsby-silverback-cloudinary": "^1.0.47",
+    "@amazeelabs/gatsby-silverback-cloudinary": "^1.2.1",
     "@amazeelabs/gatsby-source-silverback": "^1.13.2",
     "@amazeelabs/publisher": "^2.4.12",
     "@amazeelabs/strangler-netlify": "^1.1.2",

packages/schema/.gitignore

@@ -0,0 +1 @@
+src/generated

packages/schema/.graphqlrc.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://unpkg.com/[email protected]/config-schema.json",
+  "schema": [
+    "../../apps/website/node_modules/@amazeelabs/*/directives.graphql",
+    "../../apps/cms/web/modules/contrib/*/directives.graphql",
+    "src/schema.graphql"
+  ],
+  "documents": ["src/**/*.gql"]
+}

packages/schema/codegen.ts

@@ -1,5 +1,9 @@
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
+// Load schema and document paths from .graphqlrc.json, so it's shared
+// with IDE plugins.
+import graphqlrc from './.graphqlrc.json';
+
 const common = {
   enumsAsConst: true,
   maybeValue: 'T | undefined',
@@ -13,9 +17,14 @@ const common = {
 };
 
 const config: CodegenConfig = {
-  schema: 'src/schema.graphqls',
-  documents: ['src/fragments/**/*.gql', 'src/operations/**/*.gql'],
+  ...graphqlrc,
   generates: {
+    'build/schema.graphql': {
+      plugins: ['schema-ast'],
+      config: {
+        includeDirectives: true,
+      },
+    },
     // Persisted query ids to be consumed by Drupal.
     'build/operations.json': {
       plugins: ['@amazeelabs/codegen-operation-ids'],
@@ -24,6 +33,22 @@ const config: CodegenConfig = {
     'build/gatsby-fragments.js': {
       plugins: ['@amazeelabs/codegen-gatsby-fragments'],
     },
+    // Directive autoloader for Gatsby.
+    '../../apps/website/autoload.mjs': {
+      plugins: ['@amazeelabs/codegen-autoloader'],
+      config: {
+        mode: 'js',
+        context: ['gatsby'],
+      },
+    },
+    // Directive autoloader for Drupla.
+    '../../apps/cms/autoload.json': {
+      plugins: ['@amazeelabs/codegen-autoloader'],
+      config: {
+        mode: 'drupal',
+        context: ['drupal'],
+      },
+    },
     // The main entry point. Contains:
     // - All types generated from the schema.
     // - All operation types

packages/schema/package.json

@@ -38,18 +38,20 @@
     "@amazeelabs/codegen-gatsby-fragments": "^1.1.8",
     "@amazeelabs/codegen-operation-ids": "^0.1.21",
     "@graphql-codegen/cli": "^4.0.1",
+    "@graphql-codegen/schema-ast": "^4.0.0",
     "@graphql-codegen/typescript": "^4.0.1",
     "@graphql-codegen/typescript-operations": "^4.0.1",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.67",
+    "concurrently": "^8.2.1",
     "graphql": "^16.7.1",
-    "typescript": "^5.1.6",
-    "concurrently": "^8.2.1"
+    "typescript": "^5.1.6"
   },
   "dependencies": {
+    "@amazeelabs/codegen-autoloader": "^1.1.1",
     "@amazeelabs/scalars": "^1.6.2",
-    "swr": "^2.2.0",
+    "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.80",
-    "@swc/cli": "^0.1.62"
+    "swr": "^2.2.0"
   }
 }