Build a Simple GraphQL Server with GraphQL Yoga

Share this video with your friends

Social Share Links

Send Tweet

GraphQL Yoga is an open source server utility tool based on Express that simplifies how developers build GraphQL servers. This lesson shows how quick it is to get started with Yoga by writing simple types and resolvers. It also shows you how to test and inspect a GraphQL server/schema using the GraphQL playground.

Instructor: [00:00] First thing we need to do is to import GraphQL server from GraphQL Yoga. After importing GraphQL server, I can go ahead and create an instance of this server, which takes a configuration object and receives the type definitions, as well as the resolvers.

[00:24] We can then start the server using the start method. It also takes a configuration object. We will [inaudible] set the port to 4200, as well as a callback function that is called once the server starts running.

[00:44] The type definitions on the resolvers are correctly undefined. Let's start creating the type definitions. We need a type, computer, and it has a property module, which is of string type, a property maker, which is also a string, and then the year it was manufactured, which can be an integer.

[01:15] We also need the query type. It has just a single property, the return of the computers we have. For now, we can just the leave the resolvers as an empty object. We can start the server and see what the schema looks like.

[01:39] Running the server starts the playground. You can open the schemata and see the type definitions we just created. So far, we have the module, the maker, and the year fields in the computer type. You can also see that we have the query type, which returns an array of computers.

[01:56] Tell this all happens when we send a computers query. We first create a computers resolver, which is simply a function that returns a value. For now, we just leave the value as an array. When we head back to the playground, we can then ask the server for these computers. As expected, we should get an empty array.

[02:22] Rather than returning an empty array, we can return something more meaningful, which could be an array of two computers. The first one is made by Apple, and is the MacBook Pro. It was manufactured in the year 2017.

[02:46] The second is made by the same company, but is the MacBook Air, and manufactured 2016. We can then replace the empty array with computer's data. We can save now and query the server, so we can see what we have.

[03:00] We can see we have the MacBook Pro and the MacBook Air. We can also expand the query to have the year and the maker. As you can see, now it includes the year, 2017, maker, Apple. Whenever I will send a query to the server, the GraphQL SRI receives this query, validates it against the type definitions, and then uses the resolvers to send the payload back to the client.