Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 829 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Create a GraphQL Schema

4:16 JavaScript lesson by

In this video, we’ll take a look at the GraphQL Language and write out our first GraphQL Schema. We’ll use the graphql package available to us through npm to parse our graphql language file and resolve our initial query.


egghead.io comment guidelines

Avatar
egghead.io

In this video, we’ll take a look at the GraphQL Language and write out our first GraphQL Schema. We’ll use the graphql package available to us through npm to parse our graphql language file and resolve our initial query.

Avatar
Mithun

The line endings seen in the editor are distracting.

A feedback would be that their display be turned off when recording videos, especially as we are looking at the video and attempting to write the code present.

Avatar
Josh Black

Hi Mithun! Just wanted to say thanks for watching the video!

RE: the line endings, totally understand! They definitely add visual clutter when looking at the code. Will try and remedy this in future so it's not as distracting 😄

In reply to Mithun
Avatar
marshallformula

which terminal & font set are you using?

In reply to Josh Black
Avatar
Ian

Thanks for the course, it came at the perfect time as I was looking to dive into Graphql from scratch.

By the way, are you using a theme for your ZSH profile? Anything you can share? I like the simplicity of it.

It reminds me that I really need to get more fluent with VIM too. :P

Avatar
Josh Black

Hi marshallformua! The terminal I'm using right now is iTerm2, with a zsh profile, and then Operator Mono for the font.

Thanks for watching, by the way!

In reply to marshallformula
Avatar
Josh Black

Hi Ian! Glad that the content for this course was helpful, thank you so much for watching!

And I definitely can share the profile settings, since I actually grabbed them from someone else's dotfiles 😂.

Most of the configuration for what I have comes from Greg Hurrell, working on Relay for Facebook. He posted his config setup under wincent/wincent on GitHub. Most of the theme stuff and vim pieces come from that.

Let me know if you have any more questions! And thanks again for watching 😄

In reply to Ian
Avatar
Chris Pauley

Which version of node is required?

After I typed your sample code and typed "node index.js", I get the following error:

const { graphql, buildSchema } = require('graphql');
^

SyntaxError: Unexpected token {

Avatar
Josh Black

Hi Chris! The version of Node that I used for this series was v6.x. Hope that helps!

In reply to Chris Pauley
Avatar
Chris Pauley

Yup, now I know nvm too
Thanks!

In reply to Josh Black
Avatar
Brent

Hi, where is the code for this tutorial available?

In reply to egghead.io

To get started with GraphQL, let's actually go and make the project directory that we're going to be working in. In our case, I'm going to make a directory called "getting-started."

Let's go ahead and cd into that. Inside of here, I'm going to use yarn's init command, and pass in the -y flag just to say yes to all the questions that they ask.

This is going to generate our package.json file inside of our project. Now, we can go ahead and add GraphQL to our project. We'll do yarn add graphql. Once that's installed, we can go ahead and actually open up our project in your text editor of choice.

Once you have your project directory open up in your text editor, go ahead and add an index.js file. This is what we're going to be using for building out our first Schema. Open up index.js. What we can do in the first line here is actually import two pieces from the GraphQL package.

The first one is going to be graphql, the second one is going to be a tool called buildSchema. We'll just require them from the graphql package. The next step here is to actually go ahead and build out our Schema. We can use that buildSchema utility here, which actually takes in a string.

In this case, I'll use a template literal, and inside of here, we can write out two types. The first type is going to be our Schema type. I'll write out type Schema. Schema takes in a variety of fields, but in this case, we're only going to write out query.

Query is going to refer to another type called type Query, and this is going to be a type that has a sing field called "foo," which is of type String.

What we've actually created here is a description of the capabilities of our GraphQL server. We've created a type called Schema, which is a definition of queries, mutations, and some scriptions. In this case, we're just going to be calling the query field. We've also created the query type, which defines a field called foo, which is of type String.

What this will allow us to do is to query our Schema for foo, and it will give back a value of a String. The way that GraphQL knows how to return a value or what value to return, is through the idea of something called a resolver. Let's go ahead and create our resolvers, const resolvers =.

Inside of this object literal, we'll just write one for foo which is going to be a function that returns the showing 'bar'. Now that we've actually written out the capabilities of our GraphQL server and we've written how to resolve any requests for a particular field, let's go ahead and create our first query which in this case will be a String.

We'll call it query myFirstQuery. What we can request on this query is the field foo. Let's actually go and use the graphql function that we acquired earlier, passing in our Schema, our query that we want to execute, as well as our resolvers. What this function returns is a Promise.

I'll call it .then. We'll give it the result call back, and then, we'll just logout what the result is. Let's also go ahead and catch any kind of error as well, and log that out to the console. What we're doing here with GraphQL is stating that we want information from this query.

In this case, we're requesting the field foo, and graphql is going to validate that query against the Schema which lists out all the functionalities and capabilities of a GraphQL server. Once it's validated that, it will actually go and get all of the data for that field based off of our resolvers.

What this means is that when we go into our terminal and type in node index.js in order to execute our Script, we'll actually get back an object that has a field called data. Inside of that, we get the field that we requested foo, and then the value bar.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?