Proper way to use fetch with github api v3?

Question

I want to map all the issue titles for a repo and render them to li in a react component. I've been able to extract only the issue title using octokat library but unfortunately that library does not play nice with some other stuff i've got going on. Also, I'm sure i can do this with es6 and the fetch api.

Original Post:

Been having a hellava time finding info on using es6 fetch / promises with the github api. I'm trying to fetch issues for a repo but i'm obviously missing something... I've used a few different libraries to try and accomplish this but I'd like to just use fetch.

Update: Now my new goal is merely to console.log the titles... baby steps.

import React from "react";

export default class extends React.Component {
  constructor() {
    super()
    this.state = {
      issues: []
    }
  }
  componentWillMount() {
    // let issueArry = []
    const url = "https://api.github.com/repos/fightplights/chode-stream/issues"
    fetch(url)
      .then(response => response) // i've tried with and without .json()
      .then(body => console.log(body))
      // this logs the same response

  }
  render() {
    return (
      <div>
        <ul>
          {here i will map this.state.issues (once i can get them =))}
        </ul>
      </div>
    )
  }
}

I know it's a simple error on my part. I'm still a fledgling. =)

...and obviously i need to render to the dom (not shown here)

@Andy_D is right that I wasn't parsing the body of the response, only the response itself (doh!) however now that i'm trying to data.map(issue => ...) I still get the error that data.map() is not a function. This leads me to believe that the data object is not the object the droids are looking for... hand waves in front of screen

Here's the response object in the first promise:

Response { 
  type: "cors", 
  url: "https://api.github.com/repos/fightp…", 
  redirected: false, 
  status: 200, 
  ok: true, 
  statusText: "OK", 
  headers: Headers, 
  bodyUsed: false 
}

But when I take that response in the next .then(data => console.log(data)) It is undefined... I have tried returning the first response => response.json() (as andy suggested) but it's already json... am i wrong?

What error message does your browser devtools console show? Or what is happening or not happening that's different from what you expect? Please use stackoverflow.com/posts/43174868/edit to edit/update your question to include that info — sideshowbarker
– sideshowbarker, Commented Apr 3, 2017 at 0:25
Maybe not set response to json? can i just pass the response along : .then(response).then()? — rimraf
– rimraf, Commented Apr 3, 2017 at 1:21

Andy_D · Accepted Answer · 2017-04-03 00:23:31Z

2

You need to read the JSON from the body of the response, what you are attempting to render is the full response body.

So:

fetch(url)
  .then(response => response.json())
  .then(data => data.map(...)

response.json() returns a promise, so you can .then it, the return value (data) will be the JS object/array you're looking for.
https://developer.mozilla.org/en-US/docs/Web/API/Body/json

answered Apr 3, 2017 at 0:23

Andy_D

4,22829 silver badges19 bronze badges

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

3 Comments

rimraf Over a year ago

I'm still getting an error with your method Andy. It's telling me that data.map() is not a function. I updated my example using your method.

Andy_D Over a year ago

Inspect the network request in dev tools and look at the response. Maybe it's a 200 with no content. The fact that bodyUsed is false is suspicious.

rimraf Over a year ago

Yeah. I concur! I may have accidentally pushed my API token to gh and had it revoked. I need to do some digging...

Collectives™ on Stack Overflow

Proper way to use fetch with github api v3?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related