How to combine multiple API requests in one function with fetch() in React

Question

I have to functions getDataOne and getDataTwo. How do I combine below into one function, using fetch(), useState and useEffect?

const MyComponent = () => {
  const [loading, setLoading] = useState(false);
  const [dataOne, setDataOne] = useState<Data[]>([]);
  const [dataTwo, setDataTwo] = useState<Data[]>([]);

  const getDataOne = async () => {
    setLoading(true);
    const result = await fetch(
      "https://my-api-link-one"
    );
    const jsonResult = await result.json();

    setLoading(false);
    setDataOne(jsonResult);
  };

  const getDataTwo = async () => {
    setLoading(true);
    const result = await fetch(
      "https://my-api-link-two"
    );
    const jsonResult = await result.json();

    setLoading(false);
    setDataTwo(jsonResult);
  };

  useEffect(() => {
    getDataOne();
    getDataTwo();
  }, []);

Update:

I set it up using Promise.all

const [loading, setLoading] = useState(false);
   const [dataOne, setDataOne] = useState<DataOne[]>([]);
   const [dataTwo, setDataTwo] = useState<DataTwo[]>([]);
   const [data, setData] = useState<DataOne[] & DataTwo>([]);

    const urls = [
        "https://url-one", "https://url-two",
      ];
    
      const getData = async () => {
        setLoading(true);
        const results = await Promise.all(
          urls.map((url) => fetch(url).then((res) => res.json()))
        );
    
        setLoading(false);
        setData(results);
        console.log(data);
      };

This is not totally working yet. How do I use useState now correctly (and handle both data from urls)? In the end I want to have one data variable so I can map over this variable:

{data.map((item) => {
          return (
// etc

Adil Khalil · Accepted Answer · 2021-04-13 11:28:56Z

2

You can use Promise.all. Read more here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all.

const getData = () => {
setLoading(true);
Promise.all([fetch('api-1'), fetch('api-2')]).then(results => {
 setDataOne(results[0]);
 setDataTwo(results[1]);
}).finally(() => setLoading(false));
}

answered Apr 13, 2021 at 11:28

Adil Khalil

2,1313 gold badges22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

meez Over a year ago

thanks, I am close.. I updated my question. Do you know how to achieve that in a clean way?

Siddhant · Accepted Answer · 2021-04-13 13:18:07Z

1

So, Promise.all() accepts an array of promises, so naturally Promise.all() returns an array only. So even though your results variable still is an array I would recommend destructuring it because in this case there are only two API fetches involved. Looking at your update, I think there's only small modifications left which are as follows :

    const urls = ["https://url-one", "https://url-two",];

    const getData = async () => {
      setLoading(true);
      const [result1, result2] = await Promise.all(
        urls.map((url) => fetch(url).then((res) => res.json()))
     );
      setLoading(false);
      setDataOne(result1);
      setDataTwo(result2);
      console.log(data);
    };

answered Apr 13, 2021 at 13:18

Siddhant

931 silver badge5 bronze badges

5 Comments

meez Over a year ago

thanks, but my last question is how do I use useState in this case? In my updated answer I have now 3 useState variables declared. Maybe that's wrong. In the end I want them into one [data, setData], so I am able to map() data like {data.map((item) => {}

Siddhant Over a year ago

@meez if you're expecting arrays from both the API results you can concatenate them, right? I mean something like this should work setData([...result1, ...result2])

Siddhant Over a year ago

Are you sure you're getting response as an array? If yes then could you please send the JSON of 2nd URL

Siddhant Over a year ago

So after Promise operation do something like this const modifiedResults2 = result2.myItems; Then combine like this setData([...result1,...modifiedResults2]). By the way is results1 JSON like result2 or is it different?

meez Over a year ago

Ok thanks, almost there. Now I get an empty array because I think I set my types not correct: const [data, setData] = useState<TypeOne[] | TypeTwo[]>([]);. The mapped items should contain TypeOne and or TypeTwo (results1 and results2)

Corey Byrum · Accepted Answer · 2021-07-31 22:47:24Z

0

Utilize .flat() to reformat the data array returned from the Promise.all() into your state which holds the response obj/array,

Promise.all(
    urls.map(url => 
        fetch(url).then(e => e.json())
    )
).then(data => {
    finalResultState = data.flat();
});

answered Jul 31, 2021 at 22:47

Corey Byrum

1581 silver badge4 bronze badges

Collectives™ on Stack Overflow

How to combine multiple API requests in one function with fetch() in React

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related