How to update valueEditor when one field is selected ?

[Hulk13500]

Hi everyone, I'm currently working on a React querybuilder. React querybuilder works very well, no problems. However, I'm trying to do something a bit complex and I can't find the tools to help me with this task, which is as follows: When I select a field, I have to call an API that will return either an empty array or an array of data. If the array is empty, we simply return a classic text input, otherwise we return a selection with the data I'm retrieving from the API as an option.

This is to avoid loading all the api at once and overloading the backend. So I don't know if I should update the fields or update the rule directly. I hope I've been clear enough about my problem and I'd like to thank in advance anyone who can take the time to help me solve it.

[jakeboone02]

Please clarify for me: you want the field selector to be a simple text editor until the API returns a non-empty array, and then the field selector should be a drop down menu?

I'm curious why you'd display a free-form text box instead of a "loading" message or an empty <select>, since it would allow the user to enter invalid data.

But to achieve your goal, you'd need a custom field selector that returned <input type="text"> if the fields array was empty, and returned the default <ValueSelector {...props} /> when not empty. Something like this:

const CustomFieldSelector = (props: FieldSelectorProps) => {
  if (props.options.length === 0) {
    return <input type="text" onChange={e => props.handleOnChange(e.target.value)} />;
  }
  return <ValueSelector {...props} />;
}

// App component returns:

<QueryBuilder
  fields={fields} // <-- This prop should be updated by your API
  controlElements={{ fieldSelector: CustomFieldSelector }}
/>

[Hulk13500]

Hi Jake, first of all thank you for replying so quickly. I'll try to be clearer about the problem. Initially all the fields are of "text" type, when a field is selected we call the api which will either return an empty table or a table of data.

If the api returns an empty array, we return a text type input in the customFieldSelector as you've done, but if we receive an array of data, we need to change the valueEditorType of the field to "select" and pass the data we've retrieved from the api as a select option. How do you update fields in a function that isn't inside the react component ?

Here are a few screenshots :

If the result of api is an empty array :

if the result of api is an data array :

And here's the code I've done but of course it's not functional as I've put a customValueEditor in a component which is an error to avoid :

`const App = () => {

const [fields, setFields] = useState<any>([
    {
        name: "message",
        label: "Message",
        inputType: "text"
    }
]);
const [query, setQuery] = useState<RuleGroupType>({
    combinator: 'and',
    rules: [
      { field: fields[0].name, operator: '=', value: '' },
    ],
});


const successGetColumnSelector = async (response: Response, value?: string) => {
    const json = await response.json()
    console.log("test")
    if(json.length !== 0) {
        const values = json.map((element: any) => {
            return {
                name: element,
                label: element
            }
        })
        // .filter((field: any) => field.name != value)
        setFields((prevState: any) => {
            return [
                ...prevState.filter((field: any) => field.name != value),
                {
                    name: value,
                    label: prevState.find((field: any) => field.name === value).label,
                    valueEditorType: "select",
                    values: values
                }
            ]
        })
    }
}


const customValueEditor = (props: ValueEditorProps) => {
    if(props.field !== undefined) {
        console.log("value")
        fetchGet(url, jwt, undefined, (response: Response) => successGetColumnSelector(response, props.field))
    }
    if(props.type === "select") {
        let options: any = []
        options = props.values?.map((value: any) => {
          return {
            value: value.name,
            label: value.label
          }
        })
    
        return <ButtonGenerator type={ButtonType.search} options={options} onChange={(e: any) => props.handleOnChange(e.value)} value={options.find((option: any) => option.value === props.value)}   />
      }
    
    return <input key={props.level.toString()} type={'text'} onChange={(e: any) => props.handleOnChange(e.target.value)} value={props.value} />
}


return (
    <>
        <QueryBuilder fields={fields} query={query} onQueryChange={setQuery} controlElements={{
            valueEditor: customValueEditor
        }} />
        <pre>{formatQuery(query, 'sql')}</pre>
    </>
)

}

export default App`

[jakeboone02]

Ok I think I understand. You have a static list of fields, but you won't know the valueEditorType until the API responds.

I wouldn't recommend trying to update fields from the value editor. You might want to use a small wrapper component around the default field selector that captures the onChange value, updates the API response cache if necessary, and then passes the field value on to props.handleOnChange like normal. Your API response cache can be managed outside the query builder.

Hope that helps.

[Hulk13500]

Hi Jake, I think the way you've explained it to me is the right one. Finally we've talked to some colleagues and I no longer need to call the api when a field is selected but directly at the start of the queryBuilder initialisation, which makes the task much easier.

Thank you very much for taking the time to help me.

[jakeboone02]

I no longer need to call the api when a field is selected but directly at the start of the queryBuilder initialisation, which makes the task much easier.

I was hoping you'd end up there! Let me know if you need any more help with RQB.