Consumo de APIs em React

type Repository = {
full_name: string;
description: string | null;
};


export default Repository;

const URL = "https://api.github.com/users/ruben-com-br/repos"

export default URL;

import { SetStateAction, useEffect, useState } from "react";
import Repository from './Types';
import URL from './URL'
import axios from "axios";


function ApiAxios() {
const [repositories, setRepositories] = useState<Repository[]>([]);


useEffect(() => {
  //fetch(URL)
  axios.get(URL)


    // .then((response) => response.json())
    // .then((data) => { 
    //   setRepositories(data);
    // })


    .then((response: { data: SetStateAction<Repository[]>; }) => {
      setRepositories(response.data);
    })
}, []);


return (
  <div>
    <h1>Consumo de api em Axios</h1>
    <h2>Lista de Repositorios</h2>


    <ul>
      {repositories.map((repo) => (
        <li key={repo.full_name}>
          <strong>{repo.full_name}</strong>
          <p>{repo.description}</p>
        </li>
      ))}
    </ul>
  </div>
);
}


export default  ApiAxios;

import axios from "axios";
import Repository  from "../Types";
import URL from "../URL";


async function getUsers(): Promise<Repository[]> {
const response = await axios.get<Repository[]>(`${URL}`);


return response.data;
}


export const api = {
getUsers,
};

import { useQuery } from "react-query";
import { api } from "./api";


function ApiReactQuery() { 
const { data, isError, isLoading } = useQuery("repo", api.getUsers);


return (
  <div>
    {isLoading && <h3>Carregando...</h3>}
    {isError && <h3>Ocorreu algum problema :(</h3>}
    <h1>Consumo de api em React Query</h1>
    <h2>Lista de Repositorios</h2>
    {data?.map((repo) => (
      <li key={repo.full_name}>
        <strong>{repo.full_name}</strong>
        <p>{repo.description}</p>
      </li>
    ))}
  </div>
);
}


export default ApiReactQuery;