react-api-block11.js

import React from 'react';

export const App = () => {
  const {
    data: data00,
    error: error00,
    execute: executeNext00AsyncCall,
  } = executeNext00AsyncCall();
  
  const {
    data: data01,
    error: error01,
    execute: executeNext01AsyncCall(),
  } = useNext01ApiCall();
  
  const {
    data: data02,
    error: error02,
    execute: executeNext02AsyncCall(),
  } = useNext02AsyncCall();
  
  const [isSubmitting, setIsSubmitting] = React.useState(false); // or use formik
  
  const handleOnSubmit = (formValues) => {
    setIsSubmitting(true);
    
    executeNext00AsyncCall(formValues);
  };
  
  useEffect(() => {
    if (data00 && !data01) { // if first API call have data and second API call doesn't have data yet
      try {
        executeNext01AsyncCall(data00);  
      } catch (error) {}
    }
  }, [
    data00,
    data01,
    executeNext01AsyncCall,
  ]);
  
  useEffect(() => {
    if (data01 && !data02) { // if second API call have data and third API call doesn't have data yet
      try {
        executeNext02AsyncCall(data01);  
      } catch (error) {}
    }
  }, [
    data01,
    data02,
    executeNext02AsyncCall,
  ]);
  
  useEffect(() => {
    if (data01 && data02 && data03) { // all calls have data
      setIsSubmitting(false);
      // redirect if needed using the response or do anything you want
    }
  }, [
    data01,
    data02,
    data03
  ]);
  
  return (
    ...  
  )
};