serverless/serverless-graphql

Name: serverless-graphql

Owner: Serverless

Description: Serverless GraphQL Boilerplate using Apollo ? Ready to be deployed to production within minutes ?

Created: 2016-02-25 17:10:04.0

Updated: 2018-01-18 14:34:13.0

Pushed: 2018-01-09 06:33:35.0

Homepage: https://www.serverless.com

Size: 9130

Language: JavaScript

GitHub Committers

UserMost Recent Commit# Commits

Other Committers

UserEmailMost Recent Commit# Commits

README

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:

System Architecture

serverless application architecture v2

Quick Setup

You need to have Node 6 or higher installed.

install -g serverless
install -g yarn
install -g netlify-cli

Install Dependencies.

 install
Feature Support in this repository

feature_support

Quick Start (Serverless Offline)

Please note: AWS CLI is required to be installed on your system

  1. Select Backend

  2. AWS Appsync (Serverless Offline does not support Appsync at this point)

    • AWS DynamoDB
    • AWS ElasticSearch
    • AWS Lambda
  3. Lambda Backend (Serverless Offline Supported)

    • Twitter Rest API

      pp-backend/rest-api
       start
      
    • DynamoDB

      pp-backend/dynamodb
       start
      
    • RDS

      pp-backend/rds
       start
      
  4. Start FrontEnd (Apollo Client or Appsync Client)

  5. For Appsync Backend please select Appsync Client Integration:

    pp-client/appsync-client/
     start
    
  6. For Lambda Backend please select Apollo Client Integration:

    pp-client/apollo-client/
     start
    

Also, please make sure GraphQL endpoint is configured correctly in config/security.env.local to run client on local.

  1. Start GraphiQL

    ://localhost:4000/graphiql
    
  2. Start GraphQL Playground (GraphiQL replacement - coming soon)

    ://localhost:4000/playground
    
Setup for Production (Deploy resources to AWS)

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

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. Select Backend

  2. AWS Appsync (Serverless Offline does not support Appsync at this point)

To use aws appsync you will need to create cognito user pool to authenticate the API Reference

- *AWS DynamoDB*
    cd app-backend/appsync/dynamodb
    yarn deploy-prod

Please make sure:
 1. account_id is configured in package.json
 2. graphQLAPIName, userPoolId and accountId are configured in deploy-dynamo.js

    node deploy-dynamo.js

- AWS ElasticSearch

    cd app-backend/appsync/elasticsearch
    yarn deploy-prod

Please make sure:
 1. account_id is configured in package.json
 2. graphQLAPIName, userPoolId, accountId and esHostname are configured in deploy-elasticsearch.js

    node deploy-elasticsearch.js

- AWS Lambda

    cd app-backend/appsync/lambda
    yarn deploy-prod

Please make sure:
 1. account_id is configured in package.json
 2. graphQLAPIName, userPoolId and accountId are configured in deploy-lambda.js

    node deploy-lambda.js

deploy feedback

  1. Select Frontend (apollo-client or appsync-client)

  2. Note:

    • For lambda please use apollo-client
    • For appsync backend please use appsync-client
    • Please note that backend is deployed before deploying frontend.
    • You can deploy the client on AWS S3 or Netlify.
  3. AWS S3

  4. First you will need to choose custom s3 bucket name for client. For ex: s3-firstname-serverless-graphql. Please note that bucket name must be unique across all aws buckets.

  5. Now, in app-client/<client-name>/serverless.yml edit the custom.client.bucketName property and replace it the bucket name above.

  6. Now, in app-client/<client-name>/package.json edit the homepage property with https://${yourBucketName}.s3-website-us-east-1.amazonaws.com. For ex: https://s3-bucketname-serverless-graphql.s3-website-us-east-1.amazonaws.com

  7. Run the deployment command

     app-client/<client-name>/
    rn deploy-s3
    Your deployment url will be printed on the console
    
  8. Your deployment url will be : https://s3.amazonaws.com/[bucket-name]/index.html

  9. Netlify

  10. First you will need to create a new account. Please see https://www.netlify.com/docs/cli/ for details.

  11. Remove homepage property in app-client/<client-name>/package.json. This property is not required while deploying to netlify but is required for aws s3 deployment.

  12. The first time you use the cli tool, you?ll be asked to authenticate through the browser. After you authenticate netlify will store an access token in a global ~/.netlify/config

  13. Run deployment command

     app-client/<client-name>/
    rn deploy-netlify
    
    • ? No site id specified, create a new site (Y/n) Y
    • ? Path to deploy? (current dir) build
  14. Your deployment url will be printed on the console

Example: Appsync Backend Integration
 Mutation {
# Create a tweet for a user
# consumer keys and tokens are not required for dynamo integration
createTweet(
    tweet: String!,
    consumer_key: String,
    consumer_secret: String,
    access_token_key: String,
    access_token_secret: String,
    created_at: String!
): Tweet!

# Delete User Tweet
deleteTweet(
    tweet_id: String!,
    consumer_key: String,
    consumer_secret: String,
    access_token_key: String,
    access_token_secret: String
): Tweet!

# Retweet existing Tweet
reTweet(
    tweet_id: String!,
    consumer_key: String,
    consumer_secret: String,
    access_token_key: String,
    access_token_secret: String
): Tweet!

# Update existing Tweet
updateTweet(tweet_id: String!, tweet: String!): Tweet!

# Create user info is available in dynamo integration
updateUserInfo(
    location: String!,
    description: String!,
    name: String!,
    followers_count: Int!,
    friends_count: Int!,
    favourites_count: Int!,
    followers: [String!]!
): User!


 Query {
meInfo(consumer_key: String, consumer_secret: String): User!
getUserInfo(handle: String!, consumer_key: String, consumer_secret: String): User!

# search functionality is available in elasticsearch integration
searchAllTweetsByKeyword(keyword: String!): TweetConnection


 Subscription {
addTweet: Tweet
    @aws_subscribe(mutations: ["createTweet"])


 Tweet {
tweet_id: String!
tweet: String!
retweeted: Boolean
retweet_count: Int
favorited: Boolean
created_at: String!


 TweetConnection {
items: [Tweet!]!
nextToken: String


 User {
name: String!
handle: String!
location: String!
description: String!
followers_count: Int!
friends_count: Int!
favourites_count: Int!
followers: [String!]!
topTweet: Tweet
tweets(limit: Int!, nextToken: String): TweetConnection

# search functionality is available in elasticsearch integration
searchTweetsByKeyword(keyword: String!): TweetConnection


ma {
query: Query
mutation: Mutation
subscription: Subscription

query

Directory Layout

/app-client/                             # React JS Client Integrations
??? /appsync-client                         # Appsync Client Itegrations
?   ??? /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
?   ?   ??? /aws-exports.js                 # AWS Authentication
?   ?   ??? /...                            # etc.
?   ??? /package.json                       # react app dependencies
?   ??? /serverless.yml                     # Serverless yaml for AWS deployment
??? /apollo-client                       # Apollo Client Itegrations
?   ??? /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
?   ??? /serverless.yml                     # Serverless yaml for AWS deployment
/app-backend/                            # Server Backend Integrations
??? /appsync/                               # AWS Appsync Integrations
?   ??? /dynamodb/*                         # AWS Appsync Dynamodb 
?   ??? /elasticsearch/*                    # AWS Appsync Elasticsearch
?   ??? /lambda/                            # AWS Appsync Lambda
??? /dynamodb                            # Integration with DynamodDB Backend
?   ??? /seed-data/                         # seed test data
?   ?   ??? /create_seed_data.js            # Create Seed data to be inserted in dynamodb local and remote
?   ?   ??? /insert_seed_data_prod.js       # Insert seed data in aws dynamodb (serverless)
?   ?   ??? /sample-query.txt               # Test Query on DynamoDB Local Client http://localhost:8000
?   ??? /handler.js                         # AWS Lambda - Apollo Lambda Server
?   ??? /package.js                         # server side dependencies
?   ??? /resolvers.js                       # graphql resolvers
?   ??? /schema.js                          # graphql schema
?   ??? /serverless.yml                     # Serverless yaml for AWS deployment
?   ??? /webpack.config.js                  # Webpack server side code with ES6
??? /rest-api                           # Integration with REST API Backend
?   ??? /handler.js                         # AWS Lambda - Apollo Lambda Server
?   ??? /package.js                         # server side dependencies
?   ??? /resolvers.js                       # graphql resolvers
?   ??? /schema.js                          # graphql schema
?   ??? /serverless.yml                     # Serverless yaml for AWS deployment
?   ??? /webpack.config.js                  # Webpack server side code with ES6
??? /RDS                                # Integrations for PostGres, MySQL and Aurora Backend
?   ??? /seed-data/                         # seed test data
?   ?   ??? /create_seed_data.js            # Create Seed data to be inserted in dynamodb local and remote
?   ?   ??? /seed_local.js                  # Insert seed data in aws dynamodb (serverless)
?   ?   ??? /seed_prod.js                   # Test Query on DynamoDB Local Client http://localhost:8000
?   ??? /migrations/                        # Create DDL statements
?   ??? /kenxfile                           # Database Configurations 
?   ??? /handler.js                         # AWS Lambda - Apollo Lambda Server
?   ??? /package.js                         # server side dependencies
?   ??? /resolvers.js                       # graphql resolvers
?   ??? /schema.js                          # graphql schema
?   ??? /serverless.yml                     # 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. Why GraphQL Playground and not GraphiQL? Refer FAQ playground

Usage of GraphiQL

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

Coming Soon
  1. Schema Stitching
  2. Lambda Backend: GraphCool, Druid
  3. Lambda Backend: GraphQL Mutations and Subscriptions
  4. Aggregations at Scale - Druid
  5. Lambda Backend: Authentication and Authorization
  6. Lambda Backend: Pagination
  7. Swagger Integration
  8. Integration with Azure, IBM and Google Coud
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
  3. @pradel
  4. EMC School @JstnEdr
Feedback

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


This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.