Bulk Calling of API in React and JavaScript/Typescript That Based on Previous Response

Question

I have a bulkSave function and I wanted to call API's repeatedly. Succeeding API depends on previous API.

My problem is if createProjectPeopleOrganization returns successfully while createProjectPeople returns an error, how will I return it in a way that the user will know that createProjectPeopleOrganization was successful while createProjectPeople returns an error? and also, is using for of here appropriate?

const peopleAndOrganizationIds =  [
    {
      personId: '123',
      organizationId: '54435'
    },
    {
      personId: '435',
      organizationId: '5435635'
    }
  ]

CODE

export const bulkSave = async ({ data }) => {
  const { projectId, peopleAndOrganizationIds } = data;

  try {
    for (const item of peopleAndOrganizationIds) {
      const { personId, organizationId } = item;

      const { person } = await getPerson({ personId });

      if (!person) {
        return new Response(null, {
          status: 400,
          statusText: "No person found",
        });
      }

      const organizationContext = person.organization;

      const { created_project_people_organization } = 
        await createProjectPeopleOrganization({
          object: {
            project_id: projectId,
            global_directory_organization_id: organizationId,
            context: organizationContext,
          },
        });

      const { created_project_people } = await createProjectPeople({
        object: {
          project_id: projectId,
          global_directory_people_id: personId,
          project_people_organization_id: created_project_people_organization?.id,
        },
      });
    }

    return new Response(null, {
      status: 200,
      statusText: "Success",
    });
  } catch (error) {
    return new Response(null, {
      status: 500,
      statusText: "Internal Server Error",
    });
  }
};

Answer 1

You should use Promise.allSettled instead. You can implement it like this.

Promise.allSettled([
  createProjectPeopleOrganization({
     object: {
       project_id: projectId,
       global_directory_organization_id: organizationId,
       context: organizationContext,
     },
   }),
  createProjectPeople({
    object: {
      project_id: projectId,
      global_directory_people_id: personId,
      project_people_organization_id: created_project_people_organization?.id,
     },
  })
]).then((results) => {
  // results is an array of:
  // {status: "fulfilled", value: 1}
  // {status: "rejected", reason: Error}
});

Similarly you can do this in an async function like this

 async function bulkSave(){
  try{
   const results = await Promise.allSettled([
     createProjectPeopleOrganization({
       object: {
         project_id: projectId,
         global_directory_organization_id: organizationId,
         context: organizationContext,
       },
     }),
    createProjectPeople({
      object: {
        project_id: projectId,
        global_directory_people_id: personId,
        project_people_organization_id: created_project_people_organization?.id,
      },
    })
   ]); 

    // results is an array of:
   // {status: "fulfilled", value: 1}
   // {status: "rejected", reason: Error}
  }
  catch(e){
   console.log(e)
  }
 }

You can then proceed to handle the individual results as you see fit.