Handle query that's not a function

components/Editor/QueryForm.tsx

@@ -119,17 +119,23 @@ interface State {
 }
 
 const QueryForm: React.FC<QueryProps> = ({ id, fn, openByDefault, storageKey }) => {
+  const fnIsAFunction = typeof fn === 'function'
+
   const { addLine } = useConsole()
   const [open, setOpen] = useEditorState(`${storageKey}-open`, !!openByDefault)
   const [storedValues, setStoredValues] = useEditorState(
-    `${storageKey}-values`,
-    JSON.stringify([...new Array(fn.length)].map(() => ''))
+    fnIsAFunction ? `${storageKey}-values` : null,
+    JSON.stringify([...new Array(fnIsAFunction ? fn.length : 0)].map(() => ''))
   )
   const [state, setState] = useState<State>({
     status: STATUS.READY,
   })
 
-  const values = JSON.parse(storedValues)
+  if (!fnIsAFunction) {
+    return <div>"{id}" is not a function</div>
+  }
+
+  const values = JSON.parse(storedValues || '{}')
   const setValues = (newVals: string[]) => setStoredValues(JSON.stringify(newVals))
 
   const functionNames = functionToParamNames(fn)

hooks/editor-state.ts

@@ -49,14 +49,18 @@ export const EDITOR_TYPES = {
 }
 
 export function useEditorState<T = any>(
-  key: string,
+  key?: string | null,
   defaultState?: T,
   storageKey: string = EDITOR_TYPES.EDITOR_STATE
-): [T, (val: T) => void] {
-  const updater = getUpdater(key)
+): [T | null, (val: T) => void] {
+  const updater = getUpdater(key || 'undefined')
   updater.register()
 
-  const value = getEditorState({ key, storageKey }) || defaultState || null
+  if (!key) {
+    return [null, () => null]
+  }
+
+  const value: T | null = getEditorState({ key, storageKey }) || defaultState || null
 
   const setValue = (newVal: T) => {
     setEditorState({ key, value: newVal, storageKey })