A Simple GraphQL API Using Apollo Server
By: Torrel Jeremiah
Tags: Graphql Playground, GraphQL, Graphql Apollo Server, Graphql Schema

This guide is aimed at people who wants to learn about a new technology but wants just a brief overview without the textbook. The article covers the basics of GraphQL and how you can build your own API using an Apollo server.

What is GraphQL and why would you want to use it:

GraphQL is a query language with a set of rules on how you can interact with an API. At it’s core, GraphQL enables declarative data fetching where a client can specify exactly what data it needs from the API. It also eliminates the need to use REST API.

Besides allowing the client to have more control on the kind of data it needs, graphQL also minimizes the amount of data that needs to be transferred over a network.

These are the techologies we’ll be using — graphQL, NodeJs to setup our environment and Apollo Client- a node.js implementation of the graphQL rule set.

Let start Building

- Create a directory.

- From the command prompt run “npm init” — this will create

package.json file.

- Open your favorite editor.

{

"name": "graphqlapi-apolloserver",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "nodemon index.js"

},

"author": "",

"license": "ISC",

"dependencies": {

"apollo-server": "^2.19.0",

"nodemon": "^2.0.6"

}

}

- For our dependencies we will need to run:

npm install apollo-server — This will allow us to to execute queries.

npm install graphQL — graphQL dependency.

npm install nodemon — auto restarts our server when we change or save files.

Now back to our editor — create a new file call index.js to create a functional graphQL server.

//only need the apollo and gql objects from apollo-server

const { ApolloServer, gql } = require('apollo-server');

/*

Our Session Query from the schema will live here

/* const server = new ApolloServer({typeDefs}); //A new server object server

.listen({port: process.env.PORT || 4000})

.then(({url}) => {

console.log(`graphQl running at ${url}`);

})

In our package.json file we can now add “start”: “nodemon index.js” — this will start our server.

Creating our Schema:

- A schema allows the client to understand what properties are available on your api.

- GraphQl has it’s own type system that is used to define the schema of an API. It allows a client to select only the fields they want.

//we are now utilizing the qgl object

//Let's define a Query of type "Artist" which will return an array of artists const typeDefs = gql`

type Query {

artists:[Artist]

} type Artist {

id: ID!,

name: String,

album: String,

genre: String,

price: String,

store: String

}`

The Apollo playground:

Apollo has this built in feature call the “playground” which runs on the clientside it allows us to play and examine our API. The schema tab in the playground allows us to view the Query and all it’s properties which is available to us.

At the command prompt — run “ npm start”.

In the browser type in “localhost:4000”

The playgound will display — select the schema tab, we can see the queries, types, fields etc..

The left panel is the query pane.

Executing Queries:

- Create an artists.json file.

- Copy this file over to your working directory.

artists.json [

{

"id": 447,

"name": "John Legend",

"album": "Evolver",

"genre": "R&B, neo soul",

"price": "18.99",

"store": "Barnes and noble"

},

{

"id": 4375,

"name": "Alicia Keys",

"album": "The Diary of Alicia Keys",

"genre": "Soul",

"price": "25.00",

"store": "amazon"

},

{

"id": 310,

"name": "Sade",

"album": "Stronger than Pride",

"genre": "Soul",

"price": "14.99",

"store": "amazon"

},

]

Resolvers:

-In order for our API to return data we need a resolver function.

- This function (the resolver) has to tell Apollo how to find those “artists” for the query type.

- Let’s bring in our artists.json file into the mix .

//this goes to the top of the file

const artists = require('./data/artists.json');

Let’s create our resolver function.

Place it after the schema.

const resolvers = {

Query: {

artists: () => {

return artists;

}

}

}

-Now lets execute our Book Query.

- In the query pane of the playground enter

query {

artists{

name

album

}

-We can select whatever data we want to work with

- Select the “play” button.

- Notice it comes back as a single “data” object which gives the “books” information we requested and nothing more.