CODEWITHSUNDEEP
reactjsgithub-api
larry burns
larry burns

Reputation: 189

Github API returns another API endpoint to make another request

I'm using github's API to get a list of my repos and then filtering them to display some specified projects. The issue I'm having is some of the data is another API endpoint that needs to be requested. I've never encountered this before. Am I suppose to make another fetch request after I get the first dataset back from the API? For instance I'm currently using this specific end point

https://api.github.com/user/repos

and here is some of the data I get back

archive_url: "https://api.github.com/repos/myUserName/test-repo/{archive_format}{/ref}"
archived: false
assignees_url: "https://api.github.com/repos/myUserName/test-repo/assignees{/user}"
blobs_url: "https://api.github.com/repos/myUserName/test-repo/git/blobs{/sha}"
branches_url: "https://api.github.com/repos/myUserName/test-repo/branches{/branch}"
languages_url: "https://api.github.com/repos/alenart91/test-repo/languages"

so now if I want the languages_url data I have to make another fetch request?

here is my current code

import ProjectCard from './ProjectCard.js'

class Projects extends React.Component {
  constructor(props) {
    super(props);
    this.state = { projects: [], name: '' }
  }

  componentDidMount() {

    this.getProjects();
  }

  getProjects = () => {
   const token = 'private data';
   let url = 'https://api.github.com/user/repos';

   fetch(url , {
         mode: 'cors',
         headers: {
             'Accept': 'application/vnd.github.v3+json', 
             'Authorization': 'Bearer ' + token
         }})
         .then(res => {
           if (res.status === 200) {
             return res.json();
           } else {
             return res.statusText;
           }
         })
         .then( data => {

           let filteredProjects = data.filter( projectName => {
             return projectName.name == 'test-repo' || projectName.name == 'test-repo';
           })

           this.setState( {projects: filteredProjects });
         })
         .catch( err => {
           console.log(err);
         })

 }

  render() {

    const {projects} = this.state;
    return (
      <React.Fragment>

        {projects.map( projects => {
          return <ProjectCard language = {projects.language} description = {projects.description} url = {projects.html_url} name = {projects.name} />
        })}
      </React.Fragment>
    );
  }
}

export default Projects

Upvotes: 0

Views: 186

Answers (1)

Poonacha
Poonacha

Reputation: 1316

Yes, you need to make another fetch request for the languages_url endpoint. Alternatively, you can use GraphQL to get the languages of a repository in a single request. See below code for the GraphQL call. Ref. GraphQL

{
  repository(owner: "<<OWNER>>", name: "<<REPONAME>>") {
    name
    languages(first: 10) {
      edges {
        node {
          name
        }
      }
    }
  }
}

Upvotes: 1

Related Questions