custom args to asyncFetch?

[romelied]

I am currently looking into how I can pass a customArgument (an ID in this case) to asyncFetch for select component, so I can filter some options available to the list based on lets say an accountId. I was thinking setting up a custom function in a ctx, but I need to grab the value from a react context, so this needs to happen inside of a component. we are rendering a specific component for select fields, and I'm not sure if I can pass it dynamically somehow in the component? Additionally, this field is a select when onList operator is present and just a text box for equal and not equal.

` some_field: {
        defaultValue: '',
        label: 'some_field',
        type: 'text',
        valueSources: ['value'],
        preferWidgets: ['text'],
        operators: ['equal', 'not_equal', 'onList'],
        widgets: {
            text: {
                operators: ['equal', 'not_equal'],
            },
            select: {
                operators: ['onList'],
                fieldSettings: {
                    asyncFetch: async ({ search, offset, accountId }) => {
                        const itemsBasedOnAccount =
                            await functionToGetItemsBasedOnAccount
                        const response = itemsBasedOnAccount.data.data.map((item) => ({
                            title: item.listName,
                            value: item.id,
                        }));
                        console.log(response);

                        return {
                            values: response,
                            hasMore: false,
                        };
                    },
                },
            },
        },
    },`

[ukrbublik]

Could you please explain where value of accountId should be taken?

[romelied]

so accountId needs to be pulled from the formContext, to be made available to the function to call it. Right now our work around is to create a custom async-select component to render for some_field, which has access to the context and a customHook for grabbing the options data from an endpoint.

accountId has to be from and within a react component as it changes when we select a different account in the UI

[romelied]

just for reference theres a top level form that houses the accountListDropDown and the queryBuilder. The select component renders inside the queryBuilder and some_field uses our select widget/component. at the form level we are keeping track of what account is selected and storing it in a context, which can then be pulled in from our widget/component. I was hoping there was someway I could get the accountId to the asyncFetch call, maybe through props or something, not sure

[ukrbublik]

If you make asyncFetch non-arrow function, you can refer to config.ctx with this
You can put account id to ctx

[romelied]

ok, so just so I understand, I would create a named function in the config.ctx, refer to it in my asyncFetch for some field like the following:
asyncFetch: myFunction(accountId);
or is it like this:
asyncFetch: "myFunction"

my select widget which is the component that will render on the screen, will pull the accountId from React's Context API with something similar to:
const { values: { accountId }, } = useFormContext();
where do I implement this?

[ukrbublik]

Not exactly.
I thought about smth like this:

import { MuiConfig } from "@react-awesome-query-builder/mui";
const config = {
  ...MuiConfig,
  fields: {
    // ..
    some_field: {
      // ..
      widgets: {
        select: {
          fieldSettings: {
            asyncFetch: async function ({ search, offset }) => {
                const accountId = this.accountId; // this refers to config.ctx
                //...
            },
          }
        }
      },
    },
  },
  ctx: {
     ...MuiConfig.ctx,
     accountId: accountId, // put the value of accountId here
  },

When value of your account select component changes, you update props of query builder component with putting accountId inside config.ctx

[romelied]

this looks good, I think where I'm struggling is making the accountId value dynamic according to application state. I want the value of accountId: changesByState

is there a way to perhaps dynamically set the accountId value of the ctx? Can I import that ctx into my formComponent and re-render the query builder when I modify that value?

maybe I define ctx under configs/ctx.js
then under forms/component.js I import ctx as an object and set ctx.accountId = accountId // in my application state. changes when new account selected
then I am importing this into queryBuilder/myQueryBuilderComponent where I import ctx.js and setThat in state. Maybe that is where I will re-render the queryBuilder with the new accountId.

Does this sound viable? Or am I headed in the wrong direction modifying JS objects in different parts of the app?

[romelied]

Sorry I think that is the solution after all, making the ctx something in state possibly even a global context throughout the app where I update it in react and re-render the queryBuilder

Thanks so much for your help