Dynamic field update after api query

[Raumain]

Here is my problem (code below):

• I have a form with dynamic part, containing a group of fields, that can be added or removed
• For each a group i have field1 and field2
• When i fill field1, i want to fetch data from my apy (with TSQuery) based on the given value.
• Then with the API answer, i want to update field2

I have tried multiple things :

• validator.onChangeAsync
• validator.onChangeListenTo
• listeners.onChange
• useStore
• form.Subscribe

I can't figure if using one these methods is the right way, right now the only solution i found is useState and useEffect causing the whole part to re-render loosing the advantages of TanStack Form

Here is what it looks like :

const DynamicPart = withForm({
  ...formOpts,
  props: {
    index: 0,
  },
  render: ({ form, index }) => {
    const { data } = useGetData(  // useQuery hunder the hood, generated by [Kubb](https://kubb.dev/plugins/plugin-react-query/)
      {
        value: form.getFieldValue(`attribute[${index}].value`),
      },
      {
        query: {
          queryKey: [form.getFieldValue(`attribute[${index}].value`)],
          enabled: Boolean(form.getFieldValue(`attribute[${index}].value`)),
        },
      },
    );

    return (
      <div>
        <form.AppField
          name={`attribute[${index}].value`}
          validators={{
            onChangeAsync: async () => {
              form.setFieldValue(`attribute[${index}].name`, data.name);
            },
            onChangeAsyncDebounceMs: 500,
          }}
          children={(field) => <field.TextField label={`Value ${index + 1}:`} />}
        />

        <form.AppField
          name={`attribute[${index}].name`}
          children={(field) => <field.TextField label="Name:" required={true} />}
        />
      </div>
    );
  },
});