GraphQL、React、Apollo - 预期可迭代，但没有找到字段“...”

Question

I'm a student beginner working on a personal project. I'm trying to build a simple web application that requests a list of heroes from an API ( https://docs.stratz.com/index.html ) and displays their ID and displayname on the webpage. I've successfully done something similar with SpaceX launches, but I can't seem to get this to work.

After setting up my server and running on a local port, I get an error "Expected Iterable, but did not find one for field RootQueryType.Heroes". I'm pretty sure this is because in my schema, I've defined my RootQuery as follows:

const HeroType = new GraphQLObjectType({
  name: 'Hero',
  fields: () => ({
    id: {type: GraphQLInt },
    displayName: {type: GraphQLString },
  })
});


// Root Query
const RootQuery = new GraphQLObjectType({
  name: 'RootQueryType',
  fields:{
    //list of heroes
    Heroes: {
      type: new GraphQLList(HeroType),
      // This is where we get data
      resolve(parent, args){
        return axios
          .get('https://api.stratz.com/api/v1/Hero')
          .then(res => res.data);
      }
    }
  },
});

I think that since I've defined Heroes as a GraphQLList , I get an error because I'm not receiving an iterable or array back from the server. In their documents, their server returns a sample that looks like this:

{
  "additionalProp1": {
    "id": 0,
    "name": "string",
    "displayName": "string",
    "shortName": "string",
    "abilities": [
      {
        "heroId": 0,
        "gameVersionId": 0,
        "slot": 0,
        "abilityId": 0
      }
    ],
    "roles": [
      {
        "heroId": 0,
        "roleId": 0,
        "gameVersionId": 0,
        "level": 0
      }
    ],
    "talents": [
...
// the list goes on and on with all sorts of info

Please correct me if I'm wrong, but I believe that my issue is that my schema.js file does not deal with "additionalProp1" as listed in their example. Could someone point me in the right direction of correcting my schema to deal with this?

Answer 1

The API you are hitting appears to returns an object that is a map of hero IDs to hero objects. It looks like this:

{
  "1": {
    "id": 1,
    "name": "npc_dota_hero_antimage",
    ...
  },
  "2": {
    "id": 2,
    "name": "npc_dota_hero_axe",
    ...
  },
  ...
}

What we want is an array of those objects instead. One way to do that would be something like:

.then(res => {
  const heroesById = res.data
  // get an array of the keys of the object
  const ids = Object.keys(heroesById) 
  // map over the array
  return ids.map(id => heroesById[id])
});