Write a GraphQL Schema in JavaScript

[00:00] We look inside of our index.js file and look at how we're defining our schema. What we're doing is using the build schema function, passing in a template literal to define our schema as a string.

[00:13] However, what we can do is build out this entire schema definition using JavaScript. Let's try that.

[00:22] The first thing that we're going to need to do is change this require statement to grab some of the functions that we need.

[00:28] The first one's going to be GraphQL schema so we can actually write out our schema. The second one's going to be GraphQL object type for our higher order types. Then finally we can grab GraphQLString, GraphQLInt and GraphQLBoolean as some primitive types in GraphQL.

[00:50] Now let's take all of these types and start rewriting our schema. The first thing we can do is say con schema equals new GraphQL schema. What we do is we pass in this configuration object that takes in a couple of keys.

[01:03] In this video, what we're going to be focusing on is the query type, and we'll actually go and make a variable in an second. But we can also pass in mutation as a key, as well as subscription to represent other kind of capabilities of our GraphQL server.

[01:20] Now let's actually go into find our query type. This query type is going to be a new GraphQL object type. I'll take in that same kind of configuration object that the schema did.

[01:32] The first field that we'll define on it is name, which is query type. We can also add in optional description, and in this case, we'll just add a description of the route query type. We can also add a key called fields, which will define what the things are that we can query for in our GraphQL schema.

[01:52] Let's go ahead and add a video field. Inside of this field, we need to specify the type, which will be video type, and we'll define that in a second. Then we'll also add in a resolve field, which will just be a function that will return a promise. This promise is just going to resolve with a simple object.

[02:16] We're going to use this object to just represent a video, so we'll add in some of the fields that we need, such as ID, title. We can also add in duration, and finally, watched.

[02:27] The idea behind this structure is that we're going to have all of these fields and each field has a type and a resolve statement. What the job of the resolve statement is is to provide a function that can return something asynchronous like a promise, and it will actually resolve with the information that we need to resolve this field.

[02:52] Now that we know how those statements work, let's actually go and write out our video type.

[02:58] Our video type follows a very similar structure to our query type, where we're just building it off of a GraphQL object type. We also give it a name, in this case it'll be video. We'll also give it a description, which will be A Video on Egghead.io. It also has fields that we can query for on this type.

[03:23] The first field that we're going to add is ID, and the type of ID is going to be GraphQL ID. Let's actually make sure that we're grabbing that from the GraphQL package at the top of our file.

[03:36] Next up, we can add a description, and in this case, it's going to be the ID of the video.

[03:45] Next up, let's add the title, which would be very similar, except now the type is a GraphQLString and the description part is going to be the title of the video.

[03:55] We can also add the duration, which will be a GraphQLInt. The description's going to be the duration of the video in seconds.

[04:10] The last field that we're going to add is watched, which is just a GraphQLBoolean. We'll grab that and then then description is going to be whether or not the viewer has watched the video.

[04:28] Now that we have our video type defined and we have all of these fields defined on it, including ID, and title, duration and watched, we have our query type that's telling us what kind of fields are available for us to query on. We actually have a almost complete representation of our original schema that we defined using build schema and the resolvers.

[04:49] Let's actually try and get rid of this schema that we have as well as the resolve statements that we created before, and use this new schema that we created with the GraphQL schema constructor inside of our server.

[05:06] First, we can remove the root value and then we can switch into our terminal and run node index.js to start our server. Then we can switch out of full screen here, bring in our window, and run Enter and actually visit our graphical editor.

[05:24] Inside of here, we can query for our video type, we can get the ID, title, duration and whether or not it was watched. We'll execute the query and we get a response.