React-Admin: How do I call two endpoints simultaneously from one click event within a

Question

So I have a form that contains the data about two tables on the backend:

• table zone, and
• table area

Normally, the update method in react-admin is just straight forward, but in this case not really.
So I have taken the data from the zone and area tables and put it in one form.

I also altered the saveButton to tweak the form values before submitting the form according to this react-admin documentation so in this way values are in correct form before submitting.

The challenge is that...
When I click the button somehow in onClick, I would need to execute the update on 2 endpoints with 2 update calls to dataProvider. I was thinking to use redux-saga for this case, but didn't have luck yet.

Any ideas, hints, or code examples are welcome.

Answer 1

Two alternatives are possible here:

• Call the two dataProvider.updates within a single click. Alternatively, you can fetch() directly for greater flexibility. (You might want to make use of React.useCallback and async for better performance)

export const SaveButton = ({
  basePath = '',
  label = 'Save',
  record,
  ...rest
}) => {
  const handleClick = () => {
    if (record !== undefined) {
      // first call -> Zone
      async () => await dataProvider.update(...);
      // Second call -> Area
      async() => await dataProvider.update(...);
    }
  };
  return <Button label={label} onClick={handleClick} {...rest} />;
};

• Declare two functions to call each call dataProvider.update separately.
  This would give you flexibility if you intend to do the same calls once any other clickEvent is triggered within that same component

export const SaveButton = ({
  basePath = '',
  label = 'Save',
  record,
  ...rest
}) => {
  const handleClick = () => {
    if (record !== undefined) {
      // first call -> Zone
      handleZoneCall();
      // second call -> Area
      handleAreaCall();   
    }
  };

  const handleZoneCall = async () => await dataProvider.update(...);
  const handleAreaCall = async() => await dataProvider.update(...);

  return <Button label={label} onClick={handleClick} {...rest} />;
};

One of the above should get you going...