⚠️ This lesson is retired and might contain outdated information.

Create a GraphQL Schema

Josh Black
InstructorJosh Black
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 2 years ago

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.

[00:00] 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."

[00:09] 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.

[00:18] 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.

[00:39] 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.

[00:59] 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.

[01:19] 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.

[01:37] 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.

[01:49] 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.

[02:12] 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 =.

[02:34] 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.

[02:55] 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.

[03:19] 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.

[03:39] 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.

[03:59] 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.

Mithun
Mithun
~ 7 years ago

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.

Josh Black
Josh Blackinstructor
~ 7 years ago

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 😄

Nate Gibbons
Nate Gibbons
~ 7 years ago

which terminal & font set are you using?

Ian
Ian
~ 7 years ago

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

Josh Black
Josh Blackinstructor
~ 7 years ago

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!

Josh Black
Josh Blackinstructor
~ 7 years ago

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 😄

Chris Pauley
Chris Pauley
~ 7 years ago

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 {

Josh Black
Josh Blackinstructor
~ 7 years ago

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

ian morton
ian morton
~ 5 years ago

I get this from the query, not sure how to fix it, { data: [Object: null prototype] { foo: 'bar' } }

Oleksandr Lidak
Oleksandr Lidak
~ 4 years ago

I can not watch it! I've got undefined. Exception: ERROR_LOADING just in the middle the fifth time today

Yannis
Yannis
~ 4 years ago

Would it be possible to connect this server with React Apollo ?

Markdown supported.
Become a member to join the discussionEnroll Today