Multiple API handling through Axios in react application

Question

When I have Two APIs and one for cats data and one for cats image, how can I populate images and data from two APIs in one component using hooks through Axios call?

CodeSandbox

CatsList.js

import React, {useState, useEffect} from 'react'
import {baseUrl} from './services/mainApi';
import axios from 'axios';

export default function CatsList() {
  const [data, setData] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `${baseUrl}breeds`,
      );
      setData(result.data);
    };
    fetchData();
  }, []);

  return (
    <ul className="row">
      {data.map(item => (
        <li className="col-md-3 list-item" key={item.id}>
          <a href={item.wikipedia_url}>
            <h2>{item.name}</h2>
            <p>{item.origin}</p>
            <p>{item.description}</p>
          </a>
        </li>
      ))}
    </ul>
  );
}

mainApi.js

import axios from 'axios';
export const baseUrl = 'https://api.thecatapi.com/v1/'
export const catsImage = `${baseUrl}/images/search?breed_id=abys`

andy mccullough · Accepted Answer · 2020-10-20 05:35:46Z

1

You'll need to make a a request per cat to get the cats image, before setting data e.g.

const fetchData = async () => {
    const result = await axios(
        `${baseUrl}breeds`,
    );
    const catImageResponses = Promise.all(
        result.data.map(cat => axios(buildCatImageUrl(cat)))
    )
    // handle catImageResponses, correlating them with result.data (cats), then set state
};
fetchData();

You'll need to correlate your cat images with your cats before setting your state, and you'll need to build the cat image url dynamically based on the cat, at the minute its hardcoded.

edited Oct 20, 2020 at 5:35

answered Oct 20, 2020 at 5:28

andy mccullough

9,6817 gold badges38 silver badges64 bronze badges

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

Collectives™ on Stack Overflow

Multiple API handling through Axios in react application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related