GithubHelp home page GithubHelp logo

styfle / apollo-serverless-demo Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fanout/apollo-serverless-demo

0.0 2.0 0.0 444 KB

Serverless GraphQL subscriptions

Home Page: https://apollo.fanoutapp.com/

License: MIT License

TypeScript 100.00%

apollo-serverless-demo's Introduction

Apollo serverless demo

This project uses fanout-graphql-tools to demonstrate how to implement GraphQL subscriptions when Apollo Server is deployed on AWS Lambda. WebSocket connection management is delegated to Fanout Cloud such that Apollo does not require long-lived execution. There is no change to the wire protocol; Fanout is invisible to the GraphQL client.

There is a public deployment here: https://apollo.fanoutapp.com/

Usage

The demo is a basic GraphQL service with no frontend, although if the service is accessed from a browser then the GraphQL Playground will be loaded for easy testing. The service exposes an API for working with text notes. Below are some example operations to try.

Subscribing to new notes:

subscription {
  noteAddedToCollection(collection:"shopping") {
    id,
    content,
    collection,
  }
}

Adding a note:

mutation {
  addNote(note:{
    content:"buy bread",
    collection:"shopping",
  }) {
    id,
    content,
    collection,
  }
}

If you load the playground in two browser tabs, start a subscription in one and make a mutation from the other, then you'll see an update arrive over the subscription, like this:

{
  "data": {
    "noteAddedToCollection": {
      "id": "7bba1ad0-4816-47c4-9989-0465e8a5c6dd",
      "content": "buy bread",
      "collection": "shopping"
    }
  }
}

Here's an example of listening for updates using wscat:

$ wscat -s graphql-ws -c wss://apollo.fanoutapp.com/
connected (press CTRL+C to quit)
> {"type":"connection_init","payload":{}}
< {"type":"connection_ack"}
> {"id":"1","type":"start","payload":{"variables":{},"extensions":{},
"operationName":null,"query":"subscription { noteAddedToCollection(
collection: \"shopping\") { id content collection }}"}}
< {"id":"1","payload":{"data":{"noteAddedToCollection":{"id":
"f85157b8-abe5-4f5a-bb36-aa1b529674c2","content":"buy bread","collection":
"shopping"}}},"type":"data"}

How it works

At a high level:

  • Fanout Cloud manages the WebSocket connections.
  • Lambda (with API Gateway) runs the Apollo server, which is where the application logic lives.
  • DynamoDB is used to store GraphQL subscription state.

All WebSocket messages from the client are enveloped in an HTTP request and forwarded to the Apollo server. Apollo sends control messages in HTTP responses to associate WebSocket connections with Fanout publish/subscribe channels. Whenever Apollo needs to publish data to clients, it makes an HTTP request to Fanout Cloud with the payload, which will get injected into the appropriate WebSocket connections. It's important to note that it's the Apollo server that sets up the Fanout subscriptions, and the client has no awareness of this. For more about Fanout, see the docs.

The application keeps track of active GraphQL subscriptions by storing information about them in DynamoDB. When a mutation operation is performed, the database is checked for subscriptions that would need to be notified as a result. For each subscription that should receive an event, its Apollo resolver is executed, and the resulting filtered payload (if any) is sent to Fanout Cloud for client delivery.

Running locally

You can run the GraphQL Server locally by running:

npm start

This will run ./api/index.ts configured for in-memory storage.

Example:

$ npm start

> fanout-apollo-demo@ start /home/justin/dev/apollo-serverless-demo
> ts-node api/index

๐Ÿš€ Server ready at http://localhost:57410/graphql
๐Ÿš€ Subscriptions ready at ws://localhost:57410/

Deploying to ZEIT Now

Install the CLI:

npm install -g now

Deploy to the cloud:

now

Deploying to AWS

You can deploy the app to AWS and have it run on AWS Lambda, API Gateway, and DynamoDB for storage.

The specific AWS resources required are encoded in this source code repository using TypeScript and objects from the @pulumi npm modules. This is a pattern called Infrastructure as Code, and is useful because it lets us apply the same software development methodologies and change controls to our cloud resources as we do to our application source code.

You'll need an AWS Account. This repository will depend on the AWS_PROFILE environment variable being set. This value should correspond to an entry in your ~/.aws/credentials file, from which AWS SDKs will pull your account's access key and secret. For more on all this, see AWS User Guide - Named Profiles.

The following steps illustrate how to apply the configuration in this repository to 'the cloud'. If you encounter any issues in your development environment, please file an issue at https://github.com/fanout/apollo-serverless-demo.

  1. Ensure you have proper AWS credentials for our AWS accounts, add them to an aws-cli named profile, and ensure the AWS_PROFILE environment variable is set to the profile you want to use
export AWS_PROFILE=yourprofile
  1. Install pulumi following instructions at https://pulumi.io/quickstart/

  2. Clone this repository and cd into the top-level directory

  3. npm install

  4. pulumi up and follow the CLI instructions.

apollo-serverless-demo's People

Contributors

gobengo avatar jkarneges avatar styfle avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.