Use GraphQLList with GraphQLObject Types

Josh Black
InstructorJosh Black

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 3 years ago

When working with collections of things in GraphQL, we'll always reach out for the GraphQLList Type. In this video, we'll learn how to use GraphQLList from the graphql package in combination with a GraphQLObject Type to create a field that returns a collection in our Schema.

[00:01] On our query type, we have exposed a single field for video, which will just retrieve a single video. Like in our previous schema, we may want to retrieve all of the videos available to us. Let's go ahead and add another field called "videos" that is built off of a GraphQL list.

[00:18] To start off, let's actually go into our data folder inside of index.js. Let's add another helper called get videos, which is going to be a function that returns a promise. What this promise is going to return is all of our videos.

[00:37] Next, we'll add it to our exports by doing exports.getvideos=getvideos. Then, we'll switch back to our index.js file and make sure that we're importing it along with the other helper. I'll do get video by ID, and then also, get videos.

[00:56] Finally, what we need to also include is the GraphQL list type from the GraphQL package. What we can do is use that inside of our field definition inside of our query type. Now to add the videos field, all we need to do is write out videos.

[01:14] For its type, we'll say it's a new GraphQL list of the video type, we know that it's a collection of videos. Then for the resolve statement, we can return get videos or just shorten this to get videos, which will be executed whenever we're trying to resolve all of our videos.

[01:36] Now, we can go and test this out by running our server. By doing nodeindex.js, we can switch over into our graphical editor. Now instead of querying for videos like before, we can query for videos. Then on videos, we can ask for the title and execute it.

Brendan Whiting
Brendan Whiting
~ 3 years ago

If I pass in the getVideos function as we did here, resolve: getVideos, I get this error. "message": "resolveFn is not a function". But if construct it like with did the other resolver, it works: resolve: (_, args) => getVideos()`. But I still get this error in GraphiQL even though it's working: 'Cannot query field 'videos' on type "QueryType". Did you mean 'video'?

const queryType = new GraphQLObjectType({
  name: 'QueryType',
  description: 'The root query type.',
  fields: {
    videos: {
      type: new GraphQLList(videoType),
      resolve: (_, args) => getVideos()
    },
    video: {
      type: videoType,
      args: {
        id: {
          type: new GraphQLNonNull(GraphQLID),
          description: 'The id of the video.'
        }
      },
      resolve: (_, args) => getVideoById(args.id)
    }
  },
});
Brendan Whiting
Brendan Whiting
~ 3 years ago

...nevermind, i was just defining the getVideos function wrong...