Introduction

I built a starter repo to stand up a GraphQL service endpoint so it can be used as a backend layer for statically generated sites (SSGs).

GitHub Repo — starter-lambda-graphql

The README goes into a lot of detail, but on this post, I will go over the steps to stand it up so you can start querying it.

Preview

If you want to test out what we will be building, you can use this online graphql explorer: graphiql-online

Open it up in a new tab and then change the endpoint to

https://rj07ty7re4.execute-api.us-east-1.amazonaws.com/dev/gql

Then try out this query:

{
  allPokemon {
    paging { totalPages itemsPerPage page total }
    items {
      name type1 type2 names
      stats { attack defense stamina }
      moves { quick eliteQuick charge eliteCharge }
    }
  }
}

Paste it in and click “play”.

Requirements

The starter relies on the Serverless Framework, and aws-cli.

An AWS account

This is required to enable deploying the project to the AWS Cloud.

The resources created on this post would require very heavy traffic to pass the free monthly tier.

aws-cli

Go here and install the cli for your environment / operating-system.

With the cli you can configure access credentials for the project to use.

aws configure

Go over these instructions to set up the cli with proper AWS credentials.

serverless framework

Here you can find instructions on how to install the framework using npm. You don’t need to subscribe or create an account.

Deploying your backend

Once the requirements have been satisfied

Your AWS Account
AWS CLI
Serverless Framework

It’s time to clone the repo.

Navigate to a directory where you want to keep your code and then

> git clone https://github.com/readonlychild/starter-lambda-graphql.git

Feel free to rename the project folder

> rename starter-lambda-graphql backend

Now let’s go into the folder

> cd backend

And install our dependencies

> npm install

At this point, the project is ready to be deployed, and also contains some sample graphql queries to see it in action.

So let’s command

> sls deploy

so everything gets set up in your AWS account.

• A lambda function will be created
• An API Gateway endpoint will be created, that serves as a trigger to your graphql lambda
• The output of your command will yield an https endpoint for your backend.
  • Copy-Paste this endpoint because it is not evident where to grab it from at a later time.

Testing your Backend

The best way to test and interact with your backend is to install the browser extension: Altair. It is available for Chrome, Edge, and Firefox.

Once you enable it, grab your backend endpoint from the serverless deploy output, and put it into Altair.

Next, copy the query below and paste it in, then click on Send Request.

{
  pokemon(id:"ivysaur") {
    name type1 type2 names
    stats { attack defense stamina }
    moves { quick eliteQuick charge eliteCharge }
  }
}

Here is the expected result:

Conclusion

We went thru some steps to create the basis for a graphql based backend for an SSG site.

This is a big component for working with a JAMstack site.

What next

The next couple posts in the pipeline will cover:

• General overview of the project structure and key packages and functions.
• Hone in on the pokemon query, how it was built and what pieces are needed in the backend; do another query for getting details about a move.
• Accessing your backend from javascript in your page.

---

---

Back to Post List