The New Modern Backend: Node, GraphQL, Prisma & Docker
By: Marshal Murphy
Tags: Prisma, Backend Development, GraphQL, Docker, Nodejs

Node Server & GraphQL

Alrighty so, we have put together a base scaffolding for Prisma.

Now we need to create the necessary config for using Node and graphql-yoga to launch our local GraphQL server.

Let’s start by creating a new /src directory in the root of the project, and adding an index.js file.

In src/index.js begin by adding our dependencies. We are going to import GraphQLServer from graphql-yoga, and prisma from the Prisma resources we generated.

After that we need to build the server, so create a server variable from graphql-yoga , and set it up as follows:

Here, we are using context to receive a function that returns the merged object of anything contained in the GraphQL response withPrisma.

Lastly, we cap the file by starting the server. But if we started the server right now, it would fail.😕

This is because the server requires two more important pieces: resolvers & type definitions.

When we generated our Prisma scaffolding, out-of-the-box it supports a User model. In the follow up to this article we will expand upon this and create additional models, but for now let’s use the Prisma User definition in the default generated prisma schema to round out our setup and get this server up and running.

Create a file called ./src/schema.graphql and add the User type definition:

// src/schema.graphql type User {

id: ID!

name: String!

}

This defines the User type, which has a required( ! ) ID and name.

Now let’s import this type definition into our server config:

TypeDefs down. Now for resolvers.

Resolvers are functions that allow GraphQL to populate the data for a single field in our schema.

Here we will simply write a resolver called users that returns all users in the database.

Create a new directory for resolvers and a file called Query.js . Then use the following code for our users resolver.

Any resolver can take the arguments of parent, args, context, and info. We’ll leave the details of this for the next article.

All we really need to know is that we are accessing the context object within our server. This allows us to access the action to return all users from the generated Prisma schema.

Let’s update our schema.graphql to have a Query type for retrieving users from this query.

// src/schema.graphql type Query {

users: [User!]!

} type User {

id: ID!

name: String!

}

And lastly, import our resolvers and add them to our server variable:

Well, I don’t know about you, but as a Front End engineer, I’d really like to see some visual result of the work we’ve done so far.

Let’s add a script to package.json to launch this app.

Now from the root of our project folder, run that script!

> npm start

This will start the server on localhost:4000.

In your browser you’ll now have a GraphQL playground courtesy of Prisma.

If you open up the sidebar by clicking on Docs, you will see that Prisma has populated Queries with our users query.

Similarly, if you open Schema from the sidebar, you will see our typeDefs reflected here.

What do you say we query for users?

In the left pane, add the following...

query {

users {

id

name

}

}

… and click the play button to execute it!

Ah shoot, it failed… but I guess that makes sense. We created the infrastructure, but we have not yet connected our app to a database!

I would be doing us a disservice were I to end the tutorial here.

Let’s set up a remote database together in Heroku, and use Docker as the glue between Heroku and our local app.

Onwards! 🐳