WIP

apps/decap/src/helpers/frame.tsx

@@ -1,5 +1,6 @@
-import { FrameQuery, Locale, registerOperator, Url } from '@custom/schema';
+import { FrameQuery, Locale, Url } from '@custom/schema';
 import { NavigationItemSource } from '@custom/schema/source';
+import { registerExecutor } from '@custom/ui';
 import { IntlProvider } from '@custom/ui/intl';
 import { Frame } from '@custom/ui/routes/Frame';
 import { PropsWithChildren } from 'react';
@@ -16,23 +17,20 @@ const menuItems = (amount: number) =>
   );
 
 export function PreviewFrame({ children }: PropsWithChildren) {
-  registerOperator(
-    () => ({
-      mainNavigation: [
-        {
-          locale: Locale.En,
-          items: menuItems(4),
-        },
-      ],
-      footerNavigation: [
-        {
-          locale: Locale.En,
-          items: menuItems(4),
-        },
-      ],
-    }),
-    FrameQuery,
-  );
+  registerExecutor(FrameQuery, () => ({
+    mainNavigation: [
+      {
+        locale: Locale.En,
+        items: menuItems(4),
+      },
+    ],
+    footerNavigation: [
+      {
+        locale: Locale.En,
+        items: menuItems(4),
+      },
+    ],
+  }));
   return (
     <IntlProvider locale={'en'}>
       <Frame>{children}</Frame>

apps/decap/src/main.tsx

@@ -1,4 +1,5 @@
-import { PreviewDecapPageQuery, registerOperator } from '@custom/schema';
+import { PreviewDecapPageQuery } from '@custom/schema';
+import { registerExecutor } from '@custom/ui';
 import { Page } from '@custom/ui/routes/Page';
 import CMS from 'decap-cms-app';
 
@@ -66,7 +67,7 @@ CMS.registerPreviewTemplate(
     PreviewDecapPageQuery,
     pageSchema,
     (data) => {
-      registerOperator(() => data, PreviewDecapPageQuery);
+      registerExecutor(PreviewDecapPageQuery, data);
       return <Page id="preview" locale="en" />;
     },
     'previewDecapPage',

apps/website/gatsby-browser.ts

@@ -1,10 +1,12 @@
 import './styles.css';
 
-import { drupalOperator, registerOperator } from '@custom/schema';
+import { registerExecutor } from '@custom/ui';
 import { GatsbyBrowser } from 'gatsby';
 
+import { drupalExecutor } from './src/utils/drupal-executor';
+
 export const onClientEntry: GatsbyBrowser['onClientEntry'] = async () => {
-  registerOperator(drupalOperator(`/graphql`));
+  registerExecutor(drupalExecutor(`/graphql`));
 };
 
 export const shouldUpdateScroll: GatsbyBrowser['shouldUpdateScroll'] = (

apps/website/gatsby-ssr.ts

@@ -1,13 +1,16 @@
 import './styles.css';
 
-import { drupalOperator, Locale, registerOperator } from '@custom/schema';
+import { Locale } from '@custom/schema';
+import { registerExecutor } from '@custom/ui';
 import { GatsbySSR } from 'gatsby';
 
+import { drupalExecutor } from './src/utils/drupal-executor';
+
 export const onRenderBody: GatsbySSR['onRenderBody'] = ({
   setHtmlAttributes,
   pathname,
 }) => {
-  registerOperator(drupalOperator(`/graphql`));
+  registerExecutor(drupalExecutor(`/graphql`));
   const locales = Object.values(Locale);
   if (locales.length === 1) {
     // Single-language project.

apps/website/src/layouts/index.tsx

@@ -1,5 +1,6 @@
 import { SilverbackPageContext } from '@amazeelabs/gatsby-source-silverback';
-import { FrameQuery, registerOperator } from '@custom/schema';
+import { FrameQuery } from '@custom/schema';
+import { registerExecutor } from '@custom/ui';
 import { IntlProvider } from '@custom/ui/intl';
 import { Frame } from '@custom/ui/routes/Frame';
 import { graphql, useStaticQuery, WrapPageElementNodeArgs } from 'gatsby';
@@ -22,7 +23,7 @@ export default function Layout({
       }
     }
   `);
-  registerOperator(data, FrameQuery);
+  registerExecutor(FrameQuery, data);
   return (
     <IntlProvider locale={locale || 'en'}>
       <Frame>{children}</Frame>

apps/website/src/pages/404.tsx

@@ -1,8 +1,5 @@
-import {
-  NotFoundPageQuery,
-  registerOperator,
-  ViewPageQuery,
-} from '@custom/schema';
+import { NotFoundPageQuery, ViewPageQuery } from '@custom/schema';
+import { registerExecutor } from '@custom/ui';
 import { Page } from '@custom/ui/routes/Page';
 import { graphql, PageProps } from 'gatsby';
 import React from 'react';
@@ -34,15 +31,15 @@ export default function Index({ data }: PageProps<NotFoundPageQuery>) {
   data.websiteSettings?.notFoundPage?.translations
     ?.filter(isTruthy)
     .forEach(({ id, locale, ...page }) => {
-      registerOperator(
-        () => ({
-          page,
-        }),
+      registerExecutor(
         ViewPageQuery,
         {
           id,
           locale,
         },
+        {
+          page,
+        },
       );
     });
   return (

apps/website/src/preview/page.tsx

@@ -1,32 +1,35 @@
-'use client';
-
-import {
-  drupalOperator,
-  registerOperator,
-  ViewPageQuery,
-} from '@custom/schema';
-import { Loading } from '@custom/ui/routes/Loading';
-// import { Page } from '@custom/ui/routes/Page';
+import { PreviewDrupalPageQuery, ViewPageQuery } from '@custom/schema';
+import { registerExecutor } from '@custom/ui';
+import { Page } from '@custom/ui/routes/Page';
 import React from 'react';
 
-// import { usePreviewParameters } from '../utils/preview';
+import { drupalExecutor } from '../utils/drupal-executor';
+import { usePreviewParameters } from '../utils/preview';
+
+const previewExecutor = drupalExecutor(
+  `${process.env.GATSBY_DRUPAL_URL}/graphql`,
+);
 
 export default function PagePreview() {
-  // const { nid, rid, lang } = usePreviewParameters();
-  registerOperator(
-    drupalOperator(`${process.env.GATSBY_DRUPAL_URL}/graphql`),
-    ViewPageQuery,
-  );
-  return <Loading />;
-  // const data = useOperation(
-  //   PreviewPageQuery,
-  //   nid && rid && lang
-  //     ? {
-  //         id: nid,
-  //         rid: rid,
-  //         locale: lang,
-  //       }
-  //     : undefined,
-  // );
-  // return data?.previewPage ? <Page page={data.previewPage} /> : <Loading />;
+  const { nid, rid, lang } = usePreviewParameters();
+
+  registerExecutor(ViewPageQuery, () => {
+    return new Promise<ViewPageQuery>((resolve, reject) => {
+      if (nid && rid && lang) {
+        previewExecutor(PreviewDrupalPageQuery, {
+          id: nid,
+          locale: lang,
+          rid,
+        })
+          .then((result) => {
+            if (result.preview) {
+              resolve({ page: result.preview });
+            }
+            return;
+          })
+          .catch((error) => reject(error));
+      }
+    });
+  });
+  return <Page id="preview" locale="en" />;
 }

apps/website/src/templates/decap-page.tsx

@@ -1,5 +1,6 @@
 import { SilverbackPageContext } from '@amazeelabs/gatsby-source-silverback';
-import { Locale, registerOperator, ViewPageQuery } from '@custom/schema';
+import { Locale, ViewPageQuery } from '@custom/schema';
+import { registerExecutor } from '@custom/ui';
 import { Page } from '@custom/ui/routes/Page';
 import { graphql, HeadProps, PageProps } from 'gatsby';
 import React from 'react';
@@ -45,10 +46,14 @@ export default function DecapPageTemplate({
   data,
   pageContext,
 }: PageProps<ViewPageQuery, SilverbackPageContext>) {
-  registerOperator(data, ViewPageQuery, {
-    id: pageContext.id,
-    locale: pageContext.locale,
-  });
+  registerExecutor(
+    ViewPageQuery,
+    {
+      id: pageContext.id,
+      locale: pageContext.locale,
+    },
+    data,
+  );
   return (
     <Page
       id={pageContext.id}

apps/website/src/templates/drupal-page.tsx

@@ -1,10 +1,6 @@
 import { SilverbackPageContext } from '@amazeelabs/gatsby-source-silverback';
-import {
-  Locale,
-  PageFragment,
-  registerOperator,
-  ViewPageQuery,
-} from '@custom/schema';
+import { Locale, PageFragment, ViewPageQuery } from '@custom/schema';
+import { registerExecutor } from '@custom/ui';
 import { Page } from '@custom/ui/routes/Page';
 import { graphql, HeadProps, PageProps } from 'gatsby';
 import React from 'react';
@@ -53,10 +49,14 @@ export default function DrupalPageTemplate({
   data,
   pageContext,
 }: PageProps<PageTemplateQuery, SilverbackPageContext>) {
-  registerOperator(data, ViewPageQuery, {
-    id: pageContext.id,
-    locale: pageContext.locale,
-  });
+  registerExecutor(
+    ViewPageQuery,
+    {
+      id: pageContext.id,
+      locale: pageContext.locale,
+    },
+    data,
+  );
   return (
     <Page id={pageContext.id} locale={(pageContext.locale || 'en') as Locale} />
   );

apps/website/src/utils/drupal-executor.ts

@@ -0,0 +1,45 @@
+// TODO: Duplication of types generated in the schema package.
+export type OperationId<
+  TQueryResult extends any,
+  TQueryVariables extends any,
+> = string & {
+  ___query_result: TQueryResult;
+  ___query_variables: TQueryVariables;
+};
+
+export type AnyOperationId = OperationId<any, any>;
+
+export type OperationResult<TQueryID extends OperationId<any, any>> =
+  TQueryID['___query_result'];
+
+export type OperationVariables<TQueryID extends OperationId<any, any>> =
+  TQueryID['___query_variables'];
+
+/**
+ * Create an executor that operates against a Drupal endpoint.
+ * TODO: Fix typing after moving Operation types into executors package.
+ */
+export function drupalExecutor(endpoint: string) {
+  return async function <OperationId extends AnyOperationId>(
+    id: OperationId,
+    variables?: OperationVariables<OperationId>,
+  ) {
+    const url = new URL(endpoint, window.location.origin);
+    url.searchParams.set('queryId', id);
+    url.searchParams.set('variables', JSON.stringify(variables));
+    const { data, errors } = await (
+      await fetch(url, {
+        credentials: 'include',
+        headers: {
+          'SLB-Forwarded-Proto': window.location.protocol.slice(0, -1),
+          'SLB-Forwarded-Host': window.location.hostname,
+          'SLB-Forwarded-Port': window.location.port,
+        },
+      })
+    ).json();
+    if (errors) {
+      throw errors;
+    }
+    return data;
+  };
+}

packages/executors/.eslintrc.mjs

@@ -0,0 +1,4 @@
+export default {
+  extends: ['@amazeelabs/eslint-config'],
+  root: true,
+};

packages/executors/.gitignore

@@ -0,0 +1 @@
+build

packages/executors/.prettierrc

@@ -0,0 +1 @@
+"@amazeelabs/prettier-config"

packages/executors/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@amazeelabs/executors",
+  "version": "1.0.0",
+  "description": "",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "prep": "tsc",
+    "build": "tsc",
+    "test:unit": "vitest run",
+    "test:static": "tsc --noEmit && eslint \"**/*.{ts,tsx,js,jsx}\" --ignore-path=\"./.gitignore\" --fix"
+  },
+  "keywords": [],
+  "author": "Amazee Labs <[email protected]>",
+  "license": "ISC",
+  "dependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "lodash-es": "^4.17.21"
+  },
+  "devDependencies": {
+    "@amazeelabs/eslint-config": "^1.4.43",
+    "@amazeelabs/prettier-config": "^1.1.3",
+    "eslint": "^8.43.0",
+    "prettier": "^2.8.8",
+    "typescript": "^5.3.3",
+    "vitest": "^1.1.0"
+  }
+}

packages/executors/src/index.ts

@@ -0,0 +1 @@
+export { createExecutor, registerExecutor, clearRegistry } from './lib.js';