Deprecate createQuery and replace with createFunction

docs/data/toolpad/connecting-to-datasources/serverside-javascript.md

@@ -52,12 +52,12 @@ The most powerful way of bringing data into Toolpad is through serverside JavaSc
 
 ## Parameters
 
-To be really useful, these backend functions need to be parametrizable with actual state on the page. You can do so by wrapping them in our `createQuery` function.
+To be really useful, these backend functions need to be parametrizable with actual state on the page. You can do so by wrapping them in our `createFunction` method.
 
 ```tsx
-import { createQuery } from '@mui/toolpad/server';
+import { createFunction } from '@mui/toolpad/server';
 
-export const example = createQuery(
+export const example = createFunction(
   async ({ parameters }) => {
     return {
       message: `3 x ${parameters.value} = ${parameters.value * 3}`,

packages/toolpad-app/src/toolpadDataSources/local/client.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BindableAttrEntries, CreateQueryConfig } from '@mui/toolpad-core';
+import { BindableAttrEntries, CreateFunctionConfig } from '@mui/toolpad-core';
 import { Autocomplete, Button, Stack, TextField, Typography } from '@mui/material';
 import { useBrowserJsRuntime } from '@mui/toolpad-core/jsBrowserRuntime';
 import { ClientDataSource, QueryEditorProps } from '../../types';
@@ -42,7 +42,8 @@ function QueryEditor({
   );
 
   const functionName: string | undefined = input.attributes.query.value.function;
-  const functionDefs: Record<string, CreateQueryConfig<any>> = introspection.data?.functions ?? {};
+  const functionDefs: Record<string, CreateFunctionConfig<any>> = introspection.data?.functions ??
+  {};
   const parameterDefs = (functionName ? functionDefs?.[functionName]?.parameters : null) || {};
 
   const paramsEntries = input.params?.filter(([key]) => !!parameterDefs[key]) || EMPTY_PARAMS;

packages/toolpad-app/src/toolpadDataSources/local/server.ts

@@ -80,7 +80,7 @@ function formatCodeFrame(location: esbuild.Location): string {
 async function createMain(): Promise<string> {
   const relativeFunctionsFilePath = [`.`, getFunctionsFile('.')].join(path.sep);
   return `
-    import { TOOLPAD_QUERY } from '@mui/toolpad-core/server';
+    import { TOOLPAD_FUNCTION } from '@mui/toolpad-core/server';
     import { errorFrom, serializeError } from '@mui/toolpad-core/utils/errors';
     import fetch, { Headers, Request, Response } from 'node-fetch'
 
@@ -92,7 +92,7 @@ async function createMain(): Promise<string> {
       global.Response = Response
     }
 
-    async function loadQuery (name, importFn) {
+    async function loadFunction (name, importFn) {
       const { default: resolver } = await importFn()
       return [name, resolver]
     }
@@ -101,18 +101,18 @@ async function createMain(): Promise<string> {
     async function getResolvers() {
       if (!resolversPromise) {
         resolversPromise = (async () => {
-          const queries = await import(${JSON.stringify(
+          const functions = await import(${JSON.stringify(
             relativeFunctionsFilePath,
           )}).catch((err) => {
             console.error(err);
             return {};
           });
 
-          const queriesFileResolvers = Object.entries(queries).flatMap(([name, resolver]) => {
+          const functionsFileResolvers = Object.entries(functions).flatMap(([name, resolver]) => {
             return typeof resolver === 'function' ? [[name, resolver]] : []
           })
 
-          return new Map(queriesFileResolvers);
+          return new Map(functionsFileResolvers);
         })();
       }
       return resolversPromise
@@ -158,7 +158,7 @@ async function createMain(): Promise<string> {
             const resolvers = await getResolvers()
             const resolvedResolvers =  Array.from(resolvers, ([name, resolver]) => [
               name,
-              resolver[TOOLPAD_QUERY] || {}
+              resolver[TOOLPAD_FUNCTION] || {}
             ]);
             data = { 
               functions: Object.fromEntries(resolvedResolvers.filter(Boolean))

packages/toolpad-app/src/toolpadDataSources/local/types.ts

@@ -1,4 +1,4 @@
-import { BindableAttrValue, CreateQueryConfig, ExecFetchResult } from '@mui/toolpad-core';
+import { BindableAttrValue, CreateFunctionConfig, ExecFetchResult } from '@mui/toolpad-core';
 
 export interface LocalConnectionParams {}
 
@@ -29,5 +29,5 @@ export interface FetchResult extends ExecFetchResult<any> {
 }
 
 export type IntrospectionResult = {
-  functions: Record<string, CreateQueryConfig<unknown>>;
+  functions: Record<string, CreateFunctionConfig<unknown>>;
 };

packages/toolpad-components/src/DataGrid.tsx

@@ -223,7 +223,6 @@ interface CustomColumnProps {
 function CustomColumn({ params }: CustomColumnProps) {
   const { value, colDef, row, field } = params;
   const column = colDef as SerializableGridColumn;
-
   const components = useComponents();
   const Component = components[`codeComponent.${column.codeComponent}`];
 

packages/toolpad-core/src/constants.ts

@@ -1,7 +1,7 @@
 export const RUNTIME_PROP_NODE_ID = '__toolpadNodeId';
 export const RUNTIME_PROP_SLOTS = '__toolpadSlots';
 export const TOOLPAD_COMPONENT = Symbol.for('ToolpadComponent');
-export const TOOLPAD_QUERY = Symbol.for('ToolpadQuery');
+export const TOOLPAD_FUNCTION = Symbol.for('ToolpadFunction');
 export const TOOLPAD_COMPONENT_MODE_PROPERTY = 'ToolpadComponentMode';
 
 export const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'];

packages/toolpad-core/src/createFunction.tsx

@@ -0,0 +1,52 @@
+import { TOOLPAD_FUNCTION } from './constants.js';
+import { PrimitiveValueType } from './types.js';
+
+interface ParameterTypeLookup {
+  number: number;
+  string: string;
+  boolean: boolean;
+  array: unknown[];
+  object: Record<string, unknown>;
+}
+
+export interface FunctionParameterConfig<P, K extends keyof P> {
+  typeDef: PrimitiveValueType;
+  defaultValue?: P[K];
+}
+
+export interface CreateFunctionConfig<P> {
+  parameters: {
+    [K in keyof P]: FunctionParameterConfig<P, K>;
+  };
+}
+
+type CreateFunctionConfigParameters<
+  C extends CreateFunctionConfig<CreateFunctionConfigParameters<C>>,
+> = FunctionResolverParams<C>['parameters'];
+
+export interface FunctionResolverParams<
+  C extends CreateFunctionConfig<CreateFunctionConfigParameters<C>>,
+> {
+  parameters: {
+    [K in keyof C['parameters']]: ParameterTypeLookup[C['parameters'][K]['typeDef']['type']];
+  };
+}
+
+export interface FunctionResolver<
+  C extends CreateFunctionConfig<CreateFunctionConfigParameters<C>>,
+> {
+  (params: FunctionResolverParams<C>): Promise<unknown>;
+}
+
+export interface ToolpadFunction<C extends CreateFunctionConfig<CreateFunctionConfigParameters<C>>>
+  extends FunctionResolver<C> {
+  [TOOLPAD_FUNCTION]: C;
+}
+
+export default function createFunction<
+  C extends CreateFunctionConfig<CreateFunctionConfigParameters<C>>,
+>(resolver: FunctionResolver<C>, config?: C) {
+  return Object.assign(resolver, {
+    [TOOLPAD_FUNCTION]: config || { parameters: {} },
+  });
+}

packages/toolpad-core/src/createQuery.tsx

@@ -1,48 +1,8 @@
-import { TOOLPAD_QUERY } from './constants.js';
-import { PrimitiveValueType } from './types.js';
-
-interface QueryParameterTypeLookup {
-  number: number;
-  string: string;
-  boolean: boolean;
-  array: unknown[];
-  object: Record<string, unknown>;
-}
-
-export interface QueryParameterConfig<P, K extends keyof P> {
-  typeDef: PrimitiveValueType;
-  defaultValue?: P[K];
-}
-
-export interface CreateQueryConfig<P> {
-  parameters: {
-    [K in keyof P]: QueryParameterConfig<P, K>;
-  };
-}
-
-type CreateQueryConfigParameters<C extends CreateQueryConfig<CreateQueryConfigParameters<C>>> =
-  QueryResolverParams<C>['parameters'];
-
-export interface QueryResolverParams<C extends CreateQueryConfig<CreateQueryConfigParameters<C>>> {
-  parameters: {
-    [K in keyof C['parameters']]: QueryParameterTypeLookup[C['parameters'][K]['typeDef']['type']];
-  };
-}
-
-export interface QueryResolver<C extends CreateQueryConfig<CreateQueryConfigParameters<C>>> {
-  (params: QueryResolverParams<C>): Promise<unknown>;
-}
-
-export interface ToolpadQuery<C extends CreateQueryConfig<CreateQueryConfigParameters<C>>>
-  extends QueryResolver<C> {
-  [TOOLPAD_QUERY]: C;
-}
-
-export default function createQuery<C extends CreateQueryConfig<CreateQueryConfigParameters<C>>>(
-  resolver: QueryResolver<C>,
-  config?: C,
-) {
-  return Object.assign(resolver, {
-    [TOOLPAD_QUERY]: config || { parameters: {} },
-  });
-}
+import createFunction from './createFunction.js';
+
+/**
+ * @deprecated
+ * createQuery is deprecated. Use createFunction instead.
+ */
+const createQuery = createFunction;
+export default createQuery;

packages/toolpad-core/src/index.tsx

@@ -22,3 +22,6 @@ export * from './componentsContext.js';
 
 export { default as createQuery } from './createQuery.js';
 export * from './createQuery.js';
+
+export { default as createFunction } from './createFunction.js';
+export * from './createFunction.js';

packages/toolpad-core/src/server.ts

@@ -1,3 +1,6 @@
 export * from './constants.js';
 export { default as createQuery } from './createQuery.js';
 export * from './createQuery.js';
+
+export { default as createFunction } from './createFunction.js';
+export * from './createFunction.js';

test/integration/backend-basic/fixture/toolpad/queries.ts

@@ -1,4 +1,4 @@
-import { createQuery } from '@mui/toolpad/server';
+import { createFunction } from '@mui/toolpad/server';
 
 export async function hello() {
   return { message: 'hello world' };
@@ -8,7 +8,7 @@ export async function throws() {
   throw new Error('BOOM!');
 }
 
-export const echo = createQuery(
+export const echo = createFunction(
   async function echo({ parameters }) {
     return {
       params: parameters,