brandonjbjelland / serverless-graphql-apollo

Serverless GraphQL Boilerplate using Apollo – Ready to be deployed to production within minutes …

Serverless GraphQL

This starter kit is an opinionated set of tools combined to help you get started building a Serverless application with an GraphQL endpoint and deploy them to production in minutes.

This example uses the following technologies:

• Frontend

  • Apollo Client
  • React

• Backend

  • Serverless
  • AWS Lambda & AWS API Gateway
  • Apollo Lambda Server
  • Serverless Webpack
  • Serverless Offline

System Architecture

Quick Setup

You need to have Node 6 or higher installed.

npm install -g serverless
npm install -g yarn

Install Dependencies.

yarn install-dependencies

Quick Start (Serverless Offline)

1. Start Backend

cd app-backend
yarn run start-server-lambda:offline

2. Start FrontEnd

cd app-backend
yarn run start-client-local

3. Start GraphiQL

http://localhost:4000/graphiql

4. Start Client

http://localhost:3000

Setup for Production

Configure your AWS keys. Here you can find a 2min walkthrough how to do retrieve the keys.

sls config credentials --provider aws --key <your_aws_access_key> --secret <your_aws_secret_key>

You need to make sure you have access to your deployed lambda functions.

1. Deploy Serverless Resources to your AWS Account

cd app-backend
yarn run deploy-server-lambda-prod

2. Get your /graphql url after deployment and use it in config/security.env.prod

Example Query

Introspection Query:

{
  __type(name: "Tweets") {
    name
    kind
    fields{
      name
      type{
        name
        kind
        ofType{
          name
          kind
        }
      }
    }
  }
}

Sample Query:

note: consumer_key and consumer_secret are present in config/security.env.local

{
  getTwitterFeed(handle:"sidg_sid", consumer_key:"xxx", consumer_secret:"xxx"){
    name
    screen_name
    location
    description
    followers_count
    friends_count
    favourites_count
    posts{
      tweet
    }
  }
}

Directory Layout

.
├── /app-client/                     # React Client with Apollo Integration
│   ├── /public/                     # front End Utils
│   │   ├── /index.html              # main html file to render react app
│   │   ├── /...                     # front end metadata
│   ├── /src/                        # react app code logic
│   │   ├── /componenets/            # react componenets
│   │   ├── /App.js                  # react application logic
│   │   ├── /index.js                # react dom render
│   │   ├── /...                     # etc.
│   ├── /package.json                # react app dependencies
├── /app-backend/                    # Server Backend with Apollo Integration
│   ├── /handler.js                  # AWS Lambda - Apollo Lambda Server
│   ├── /package.js                  # server side dependencies
│   ├── /resolvers.js                # graphql resolvers
│   ├── /schema.js                   # graphql schema
│   ├── /serverless.yaml             # Serverless yaml for AWS deployment
│   ├── /webpack.config.js           # Webpack server side code with ES6
├── /config/                         # Configuration files
│   ├── /security.env.local          # local config
│   ├── /security.env.prod           # production config

Usage of GraphQL Playground

To use the GraphQL Playground, open /playground of your Serverless service. With serverless offline it is http://localhost:4000/playground.

Webpack and Babel

Todo

Who uses Serverless GraphQL Apollo?

As the Serverless GraphQL Apollo community grows, we'd like to keep track of who is using the platform. Please send a PR with your company name and @githubhandle if you may.

Currently officially using Serverless GraphQL Apollo :

1. Serverless @nikgraf
2. Glassdoor @sid88in

Feedback

Send your questions or feedback at: @nikgraf, @sidg_sid