Setting up a GraphQL Server with Nodejs and graphql-yoga

In this tutorial we’ll be setting up the foundation to build our GraphQL API. There is no Github link yet because this is the very beginning of the project.

Get the entire GraphQL Series Here

Learn to code with our beginner friendly tutorials on programming, Linux, Docker, and more

Decide where to put your project files and do some initial setup with the following steps:

$ mkdir super-todo-node
$ cd super-todo-node
$ npm init -y
$ npm install graphql-yoga

The most interesting part above is graphql-yoga. That is the GraphQL server, based on Express.js.

Now let’s create the “entry point” by following the steps below:

1. Create an src/ directory in the root of your project.
2. Create an src/index.js file

Inside the src/index.js enter this code:

const { GraphQLServer } = require("graphql-yoga");

const typeDefs = `
type Query {
  helloWorld: String!
}
`;

const resolvers = {
  Query: {
    helloWorld: () => `Hello World! What a day!`,
  },
};

const server = new GraphQLServer({
  typeDefs,
  resolvers,
});
server.start(() => console.log(`Server is running on http://localhost:4000`));

The top line pulls in the graphql server and stores it in a constant “GraphQLServer”.

const typeDefs is our “schema”, which describes how we can interact with and access our data. This is where you define which “queries”, “mutations”, “subscriptions”, “input types”, and data models exist on the server. The “Query” object describes the functions that retrieve data from the database. Our “helloWorld” function is a query that returns a string.

const resolvers is where we define our implementation to do the data operations we’re asking for. Things like querying a database, deleting/updating a record, etc… If this was SQL this is where we’d write the actual “INSERT”, “SELECT”, etc statements.

const server sets up our actual server. We pass in our “resolvers” and “typedefs” and graphql-yoga creates a server based on our definitions.

Cool! Let’s fire up the server by running $ node src/index.js in the root of our project! Now visit localhost:4000 in a browser and you’ll see something like this:

This is the GraphQL Client that we’ll be working in a lot in the next sections, so let’s take a moment to learn about it.

The + Icon at the top is hugely helpful, especially when you get into authentication., you’ll want to be able to have multiple tabs open so you can have a separate tab for each query, mutation, or subscription you may be working on.

Don’t forget the history tab, which keeps track of all the different queries you’ve ran in the past so you can quickly copy/paste.

At the bottom are two more tabs Query variables and HTTP Headers so you can mock input with user authentication and user input.

On the right we have docs and schema. They are self-documenting, so as you populate your schema it will keep track and help you figure out how to use each query, mutation, or subscription you have available in your GraphQL server.

Let’s test out our helloWorld query. Enter the following code into the left-hand side of the GraphQL client and hit the play button in the upper-middle:

query {
  helloWorld
}

Awesome. That’s all for this tutorial. In the next tutorial we’ll cover queries more in depth.

The final code is here at “done-setup-gql-server” branch.

Get the source code for the completed version of this tutorial