Serve a GraphQL Schema as Middleware in Express

[00:00] Instead of building out our GraphQL schema using this build schema utility function, and then executing queries against that schema using the GraphQL utility function, it's actually very common to serve up our schema as this middleware in some kind of web framework or library like Connect or Express.

[00:21] Let's actually go and hop into our terminal and use yarn to add two dependencies. The first one will be Express, but the second one's going to be a package called express-graphql, which will actually enable us to serve up our GraphQL schema as a middleware in Express.

[00:39] Now that those are installed, let's go and hop into our editor and require Express. We'll also require our GraphQL HTTP server, by requiring express-graphql.

[00:57] We can now go and define our port variable, which is by listening in on process.env.port, defaulting to 3000. We'll also set up our server by calling the Express function.

[01:09] Then, down here, we'll actually go and get rid of the GraphQL utility function and we'll say server.use, and we'll mount it on the GraphQL endpoint. Then we'll pass in the GraphQL HTTP middleware function, and we'll pass in the configuration object.

[01:30] This configuration object takes in a variety of options, but in our case, we're only going to worry about two. The first one is schema, which will correspond to the schema that we're constructing above. The second option is for using a tool called GraphiQL. GraphiQL is just a visual editor, or a visual IDE, for dealing with GraphQL schemas, and we'll explore that in the second.

[01:54] First let's go in add in our missing parenthese here. Let's also go in and clean up a little bit of the code that we don't need above, which will just be this query variable. We'll fix the formatting here.

[02:07] Then finally we're going to tell our server what port to listen to and we'll give it a callback function. Inside of this function, we're just going to say that we're listening on HTTP local host and then our given port.

[02:22] Now that we have this set up, we can actually go into our terminal and do node index.js, which will bootstrap our server. Let me exit out of full screen here, and bring in our browser window.

[02:38] Now what we can do is actually visit local host port 3000/GraphQL which is what our middleware is hosted on. We'll get an in browser view of the tool called GraphiQL, which will actually enable us to query our GraphQL schema.

[02:55] However, if we try and write a query here, like requesting all of the titles from our videos, we actually have our field videos being returned with a value null, which means that GraphQL in this case couldn't actually resolve our query.

[03:10] We can fix this pretty easily by hopping back into our editor and adding a third option to our GraphQL HTTP config object. Here we'll pass in root value similar to what we did when we were using the GraphiQL utility, and we'll just pass in our resolvers object that we've defined up above that actually defines how to fetch some of these fields.

[03:36] Now let's go into the tab that we have our node process running in and quit it out and make sure that we've actually saved our index.js file and we can restart our node process by writing node index.js. Now when we go to our Chrome window, and run our query one more time, we actually get the result we expect where we get a collection of videos and we get the title of each one.