Convert GraphQL List Type to a Relay Connection Type

[00:00] In order to be a Relay-compliant, GraphQL server, we need to be able to efficiently page through collections of items, in this case, we have a collection of videos that are being resolved in our video's field. And in Relay these are called connections. To get started converting our video's field into a connection, let's go and update what we're grabbing from the GraphQL Relay Package. So instead of just being the global ID field, we'll also need to grab some collection helpers, namely, connection definitions, connection from promised Array, and then, finally, Connection.Args, which will we'll be using to define our video connection.

[00:43] Now let's go and define our video connection. So we'll go down here and we'll create a connection type and alias it to video connection. And this is going to be equal to connection definitions, which takes in objects. And here, we'll just say what the node type is of this connection, which is video type.

[01:04] Next up, we'll update our video's field. And so, instead of having the type be a GraphQL list, that type is going to be video connection. For the arguments for this field, we're going to use the default connection arguments that we imported from GraphQL Relay. And then, finally, we'll update our resolve statement, which now returns connection from promised array. And this method expects the first argument to be a promise that resolves to an array of objects, in this case, our videos. And the second argument is going to be the Connection.Args.

[01:40] So let's try and query our new videos field inside of GraphQL. So we'll start up our server, go and visit our browser. And when we load up GraphQL Int Tran query for videos, we can see that this returns a connection, which has the fields edges and page info. So in this case, we'll go through edges and then the node will be this specific video. And then, on this node, we can query for all of the typical video fields that we've been working with. And when we execute it, we get our collection of videos and all of the fields inside of each node.

[02:16] We can also add additional fields to the video connection. So instead of just having the fields edges and page info, we can add another one, such as total account, which could describe the count of all of the videos. So let's go and add that. When we switch back into our editor, and go to where we're using connection definitions, we can also add an additional field on the input object called connection fields, which is just a method that returns an object. In here, we'll add a field called total count, which in this case, the count will be outside the GraphQL Int.

[02:53] The description will be a count of the total number of objects in this connection. And then, the resolve method will take in our current connection. And remember, the connection has the edges on it. So in this case, you can return the 'connection.edges.link value' to get the total count of all the videos in our collection. So let's go and try this out now by restarting our server and revisiting our GraphQL editor. And here, we'll just refresh the page. And now, when we query for the total count on the video connection, we'll get the numeric value of the total number of videos in our collection.

[03:36] Finally, we also have access to the specific arguments for a connection. So here we have first, after, before, and last. And so, first, in this case, takes in a number, so we'll get the first video. And here, we'll export the edges and then the node itself, and we'll get the title. And so, here we'll get the first video. You can also change this to last and work backwards in our connection from the query, and we'll get the last video. And so, because we're using the Connection.args Helper, we'll also get access to the connection arguments on this field.