CODEWITHSUNDEEP
javascriptreactjsasync-await
Danial Asraf Norbee
Danial Asraf Norbee

Reputation: 271

How do I use the returned value from the first API call as a parameter to the second API call?

I am trying to make an async API call which will return the adminId. I want to use the returned value to make a second API call which returns the customer information.

From the code below, for testing purposes, I input the the const adminId as a string but if I were to remove that, how do I pass on the values[0].data.user[0].adminId to the second URL parameter?

import React, { useState, useContext, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
// import Badge from "@material-ui/core/Badge";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
// import NotificationsIcon from "@material-ui/icons/Notifications";
import ToggleMenu from "./ToggleMenu";
import axios from "axios";
import AuthApi from "../utils/createContext";
import TablePage from "../components/TablePage";
import FormDialog from "./FormDialog";
import moment from "moment";

const m = moment();
const today = m.format("LL");

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
  },
  toolbar: {
    paddingRight: 24, // keep right padding when drawer closed
  },
  title: {
    flexGrow: 1,
  },
  appBarSpacer: theme.mixins.toolbar,
  content: {
    flexGrow: 1,
    height: "100vh",
    overflow: "auto",
  },
}));

export default function Dashboard() {
  const classes = useStyles();

  const { value } = useContext(AuthApi);

  const [userData, setUserData] = useState({});


  const readData = async () => {
    const adminId = "b581828d-cb7a-483e-9d21-81cbab1606ef";
    const fetchUserInfo = await axios.post(`/auth/getemail/${value}`);
    const fetchCustomerInfo = await axios.post(
      `/customerinfo/getcustomer/${adminId}`
    );

    Promise.all([fetchUserInfo, fetchCustomerInfo])
      // .then((values) => {
      //   return Promise.all(values);
      // })
      .then((values) => {
        console.log(values[0].data.user[0].adminId);
      });
  };

  useEffect(() => {
    readData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);


return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="absolute">
        <Toolbar className={classes.toolbar}>
          <Typography
            component="h1"
            variant="h6"
            color="inherit"
            noWrap
            className={classes.title}
          >
            Dashboard {today}
          </Typography>
          <AccountCircleIcon />
          <Typography color="inherit" noWrap align="right">
            {userData.email}
          </Typography>
          <IconButton color="inherit">
            {/* <Badge badgeContent={4} color="secondary">
              <NotificationsIcon />]]]]]'''''
            </Badge> */}
          </IconButton>
          <ToggleMenu />
        </Toolbar>
      </AppBar>
      <main className={classes.content}>
        <div className={classes.appBarSpacer} />
        {/* <FormDialog adminId={adminId} /> */}
        <TablePage />
      </main>
    </div>
  );
}

Upvotes: 0

Views: 52

Answers (2)

Vivek Doshi
Vivek Doshi

Reputation: 58613

Simply like this :

const fetchUserInfo = await axios.post(`/auth/getemail/${value}`);

const fetchCustomerInfo = await axios.post(
    `/customerinfo/getcustomer/${fetchUserInfo.data.user[0].adminId}`
);

As you are using async await there is no need to Promise.all you are making API calls synchronously.

Upvotes: 1

Arpit Vyas
Arpit Vyas

Reputation: 2227

you can simply do like this if you'll get adminId than and than only second api will call and you'r using await so, remove promises.all().

const fetchUserInfo = await axios.post(`/auth/getemail/${value}`);

let adminId = fetchUserInfo.data.user[0].adminId && fetchUserInfo.data.user[0].adminId;
if (adminId) {
    const fetchCustomerInfo = await axios.post(
        `/customerinfo/getcustomer/${adminId}`
    )
}

Upvotes: 1

Related Questions