CODEWITHSUNDEEP
graphqlaxios
Arun Purewal
Arun Purewal

Reputation: 457

Swapi GraphQl - not fetching data in GraphiQl

So I am fairly new to GraphQl and I am trying to get data from SWAPI

I have this in my schema.js file to call to SWAPI (the links and format are taken from the https://swapi.co doucmentation)

However when I test the connection in GraphiQl it is coming up with the following error (for starships too): 

{
  "errors": [
    {
      "message": "Expected Iterable, but did not find one for field RootQueryType.films.",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "path": [
        "films"
      ]
    }
  ],
  "data": {
    "films": null
  }
}

This is my schema.js file: 

const axios = require("axios");

const {
  GraphQLObjectType,
  GraphQLInt,
  GraphQLString,
  GraphQLList,
  GraphQLSchema
} = require("graphql");

// Launch Type
const StarshipType = new GraphQLObjectType({
  name: "Starship",
  fields: () => ({
    name: { type: GraphQLString },
    model: { type: GraphQLString },
    crew: { type: GraphQLString },
    passengers: { type: GraphQLString },
    film: { type: FilmType }
  })
});

// Rocket Type
const FilmType = new GraphQLObjectType({
  name: "Film",
  fields: () => ({
    title: { type: GraphQLString },
    director: { type: GraphQLString },
    release_date: { type: GraphQLString }
  })
});

// Root Query
const RootQuery = new GraphQLObjectType({
  name: "RootQueryType",
  fields: {
    starships: {
      type: new GraphQLList(StarshipType),
      resolve(parent, args) {
        return axios
          .get("https://swapi.co/api/starships/")
          .then(res => res.data);
      }
    },
    starship: {
      type: StarshipType,
      args: {
        starship_number: { type: GraphQLInt }
      },
      resolve(parent, args) {
        return axios
          .get(`https://swapi.co/api/starships/${args.starship_number}`)
          .then(res => res.data);
      }
    },
    films: {
      type: new GraphQLList(FilmType),
      resolve(parent, args) {
        return axios.get("https://swapi.co/api/films/").then(res => res.data);
      }
    },
    film: {
      type: FilmType,
      args: {
        id: { type: GraphQLInt }
      },
      resolve(parent, args) {
        return axios
          .get(`https://swapi.co/api/films/${args.id}`)
          .then(res => res.data);
      }
    }
  }
});

module.exports = new GraphQLSchema({
  query: RootQuery
});

Upvotes: 0

Views: 344

Answers (1)

Daniel Rearden
Daniel Rearden

Reputation: 84897

If you look at the response from the REST endpoint, it looks something like this:

{
    "count": 7, 
    "next": null, 
    "previous": null, 
    "results": [
        {
            "title": "A New Hope", 
            "episode_id": 4, 
            // other fields
        }
    ]
}

This is what you a returning inside your resolver. However, by making the return type for your field a List, you're telling GraphQL to expect an array. You should update your resolver to something like:

films: {
  type: new GraphQLList(FilmType),
  resolve(parent, args) {
    return axios.get("https://swapi.co/api/films/").then(res => res.data.results);
  }
},

Upvotes: 1

Related Questions