Reputation: 271
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
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
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