Migrate existing mutations to queries (#1130)

packages/toolpad-app/src/appDom.ts → packages/toolpad-app/src/appDom/index.ts

@@ -10,13 +10,13 @@ import {
 } from '@mui/toolpad-core';
 import invariant from 'invariant';
 import { BoxProps } from '@mui/material';
-import { ConnectionStatus, AppTheme } from './types';
-import { omit, update, updateOrCreate } from './utils/immutability';
-import { camelCase, generateUniqueString, removeDiacritics } from './utils/strings';
-import { ExactEntriesOf, Maybe } from './utils/types';
-import { filterValues } from './utils/collections';
+import { ConnectionStatus, AppTheme } from '../types';
+import { omit, update, updateOrCreate } from '../utils/immutability';
+import { camelCase, generateUniqueString, removeDiacritics } from '../utils/strings';
+import { ExactEntriesOf, Maybe } from '../utils/types';
+import { filterValues } from '../utils/collections';
 
-export const CURRENT_APPDOM_VERSION = 1;
+export const CURRENT_APPDOM_VERSION = 2;
 
 export const RESERVED_NODE_PROPERTIES = [
   'id',
@@ -134,6 +134,9 @@ export interface QueryNode<Q = any> extends AppDomNodeBase {
   };
 }
 
+/**
+ * @deprecated QueryNode can act as a mutation by switching the `mode` attribute to 'mutation'
+ */
 export interface MutationNode<Q = any> extends AppDomNodeBase {
   readonly type: 'mutation';
   readonly params?: BindableAttrValues;

packages/toolpad-app/src/appDomMigrations/index.ts → packages/toolpad-app/src/appDom/migrations/index.ts

@@ -1,8 +1,9 @@
 import invariant from 'invariant';
 import v1 from './v1';
-import * as appDom from '../appDom';
+import v2 from './v2';
+import * as appDom from '..';
 
-const versions = [v1];
+const versions = [v1, v2];
 
 invariant(versions.length === appDom.CURRENT_APPDOM_VERSION, 'Unable to find the latest version');
 

packages/toolpad-app/src/appDomMigrations/v1.ts → packages/toolpad-app/src/appDom/migrations/v1.ts

@@ -1,6 +1,6 @@
 import invariant from 'invariant';
-import { AppDom, QueryNode, createConst, isQuery, ElementNode, isElement, ref } from '../appDom';
-import { update } from '../utils/immutability';
+import { AppDom, QueryNode, createConst, isQuery, ElementNode, isElement, ref } from '..';
+import { update } from '../../utils/immutability';
 
 function migrateLegacyQueryNode(node: QueryNode<any>): QueryNode<any> {
   if (node.attributes.dataSource?.value !== 'rest') {

packages/toolpad-app/src/appDom/migrations/v2.ts

@@ -0,0 +1,30 @@
+import invariant from 'invariant';
+import * as appDom from '..';
+import { mapValues } from '../../utils/collections';
+
+function replaceMutation(node: any): appDom.AppDomNode {
+  if (node.type === 'mutation') {
+    return {
+      ...node,
+      type: 'query',
+      parentProp: 'queries',
+      attributes: {
+        ...node.attributes,
+        mode: appDom.createConst('mutation'),
+      },
+    };
+  }
+
+  return node;
+}
+
+export default {
+  up(dom: appDom.AppDom): appDom.AppDom {
+    invariant(dom.version === 1, 'Can only migrate dom of version 1');
+    return {
+      ...dom,
+      nodes: mapValues(dom.nodes, (node) => replaceMutation(node)),
+      version: 2,
+    };
+  },
+};

packages/toolpad-app/src/runtime/ToolpadApp.tsx

@@ -470,7 +470,7 @@ function QueryNode({ node }: QueryNodeProps) {
 }
 
 interface MutationNodeProps {
-  node: appDom.MutationNode | appDom.QueryNode;
+  node: appDom.QueryNode;
 }
 
 function MutationNode({ node }: MutationNodeProps) {
@@ -716,7 +716,7 @@ function parseBindings(
 function RenderedPage({ nodeId }: RenderedNodeProps) {
   const dom = useDomContext();
   const page = appDom.getNode(dom, nodeId, 'page');
-  const { children = [], queries = [], mutations = [] } = appDom.getChildNodes(dom, page);
+  const { children = [], queries = [] } = appDom.getChildNodes(dom, page);
 
   usePageTitle(page.attributes.title.value);
 
@@ -827,10 +827,6 @@ function RenderedPage({ nodeId }: RenderedNodeProps) {
           {queries.map((node) => (
             <FetchNode key={node.id} node={node} />
           ))}
-
-          {mutations.map((node) => (
-            <MutationNode key={node.id} node={node} />
-          ))}
         </EvaluatePageExpressionProvider>
       </SetControlledBindingContextProvider>
     </BindingsContextProvider>

packages/toolpad-app/src/server/appTemplateDoms/doms.ts

@@ -1,6 +1,6 @@
 import * as path from 'path';
 import * as appDom from '../../appDom';
-import { migrateUp } from '../../appDomMigrations';
+import { migrateUp } from '../../appDom/migrations';
 import { AppTemplateId } from '../../types';
 import { readJsonFile } from '../../utils/fs';
 import projectRoot from '../projectRoot';

packages/toolpad-app/src/server/data.ts

@@ -9,10 +9,10 @@ import { asArray } from '../utils/collections';
 import { decryptSecret, encryptSecret } from './secrets';
 import applyTransform from './applyTransform';
 import { excludeFields } from '../utils/prisma';
-import { migrateUp } from '../appDomMigrations';
 import { getAppTemplateDom } from './appTemplateDoms/doms';
 import { validateRecaptchaToken } from './validateRecaptchaToken';
 import config from './config';
+import { migrateUp } from '../appDom/migrations';
 
 const SELECT_RELEASE_META = excludeFields(prisma.Prisma.ReleaseScalarFieldEnum, ['snapshot']);
 const SELECT_APP_META = excludeFields(prisma.Prisma.AppScalarFieldEnum, ['dom']);
@@ -453,7 +453,7 @@ export async function setConnectionParams<P>(
 
 export async function execQuery<P, Q>(
   appId: string,
-  dataNode: appDom.QueryNode<Q> | appDom.MutationNode<Q>,
+  dataNode: appDom.QueryNode<Q>,
   params: Q,
 ): Promise<ExecFetchResult<any>> {
   const dataSource: ServerDataSource<P, Q, any> | undefined =

packages/toolpad-app/src/server/handleDataRequest.ts

@@ -63,7 +63,7 @@ export default async (
   const dom = await loadDom(appId, version);
   const dataNode = appDom.getNode(dom, queryNodeId);
 
-  if (!appDom.isQuery(dataNode) && !appDom.isMutation(dataNode)) {
+  if (!appDom.isQuery(dataNode)) {
     throw new Error(`Invalid node type for data request`);
   }