Allow binding query parameters to environment variables

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

@@ -15,7 +15,6 @@ import {
 } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
 import { TabContext, TabList } from '@mui/lab';
-import { useBrowserJsRuntime } from '@mui/toolpad-core/jsBrowserRuntime';
 import { useServerJsRuntime } from '@mui/toolpad-core/jsServerRuntime';
 import { Panel, PanelGroup, PanelResizeHandle } from '../../components/resizablePanels';
 import { ClientDataSource, ConnectionEditorProps, QueryEditorProps } from '../../types';
@@ -266,7 +265,10 @@ function QueryEditor({
  },
  { retry: false },
  );
- const envVarNames = React.useMemo(() => introspection?.data?.envVarNames || [], [introspection]);
+
+ const envObj = React.useMemo(() => introspection?.data?.envVarNames, [introspection]);
+
+ const envVarNames = React.useMemo(() => Object.keys(envObj || {}) || [], [envObj]);
 
  const handleParamsChange = React.useCallback(
  (newParams: [string, BindableAttrValue<string>][]) => {
@@ -335,11 +337,10 @@ function QueryEditor({
 
  const paramsEntries = input.params || EMPTY_PARAMS;
 
- const jsBrowserRuntime = useBrowserJsRuntime();
- const jsServerRuntime = useServerJsRuntime();
+ const jsServerRuntime = useServerJsRuntime(envObj);
 
  const paramsEditorLiveValue = useEvaluateLiveBindingEntries({
- jsRuntime: jsBrowserRuntime,
+ jsRuntime: jsServerRuntime,
  input: paramsEntries,
  globalScope,
  });
@@ -463,6 +464,7 @@ function QueryEditor({
  globalScopeMeta={QUERY_SCOPE_META}
  liveValue={liveSearchParams}
  jsRuntime={jsServerRuntime}
+ envVarNames={envVarNames}
  />
  </TabPanel>
  <TabPanel disableGutters value="body">
@@ -530,7 +532,8 @@ function QueryEditor({
  globalScope={globalScope}
  globalScopeMeta={globalScopeMeta}
  liveValue={paramsEditorLiveValue}
- jsRuntime={jsBrowserRuntime}
+ jsRuntime={jsServerRuntime}
+ envVarNames={envVarNames}
  />
  </Box>
  </Panel>

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

@@ -231,9 +231,7 @@ export default function createDatasource(
  switch (query.kind) {
  case 'introspection': {
  const env = await loadEnvFile(project);
- const envVarNames = Object.keys(env);
-
- return { envVarNames };
+ return { envVarNames: env };
  }
  case 'debugExec':
  return execBase(project, connection, query.query, query.params);

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

@@ -125,5 +125,5 @@ export interface FetchResult extends ExecFetchResult<any> {
 }
 
 export type IntrospectionResult = {
- envVarNames: string[];
+ envVarNames: Record<string, string | undefined>;
 };

packages/toolpad-core/src/jsServerRuntime.tsx

@@ -27,10 +27,9 @@ export function createServerJsRuntime(env?: Record<string, string | undefined>):
  };
 }
 
-export function useServerJsRuntime(): JsRuntime {
+export function useServerJsRuntime(processEnv: Record<string, string | undefined> = {}): JsRuntime {
  return React.useMemo(() => {
  // process.env is not available in the browser
- const processEnv = {};
  return createServerJsRuntime(processEnv);
- }, []);
+ }, [processEnv]);
 }