How to set up Apollo in Amplify

Photo by Stephen Leonardi

This tutorial will get you running serverless Apollo on AWS using Amplify. It only takes a few minutes to get started. Please note that this example uses the new multienv version of Amplify, though you should get similar results with the the previous version.

Amplify is great tool for setting up AWS services. It’s still not mature, but it’s useful and developing fast. If you want to use AppSync, there are tons of resources to help you. If you want to use vanilla Apollo, though, you have a few things to navigate.

You can check out the end result on this repo. If you’d like to add Apollo to your own app, just make sure you’ve got a profile (amplify configure) and that you’ve run amplify init in your project.

You’ll need 2 things to run Apollo:

1. a Lambda function to run Apollo server
2. an API Gateway to make your server available to the outside world.

These will be done in separate steps in Amplify.

Apollo Server on Lambda

First, you’ll need to create a Lambda function.

amplify function add

Answer the questions:

? Provide a friendly name for your resource to be used as a label for this category in the project:

> apollosvr - pick any name (logical name for templates)

? Provide the AWS Lambda function name:

> apollosvr - pick a name (name in package.json)

? Choose the function template that you want to use:

> Serverless express function (Integration with Amazon API Gateway)

? Do you want to edit the local lambda function now?

> Yes

Your editor should open to app.js. We don’t need this file at all. Do the following:

1. Delete app.js
2. Replace the dependencies in package.json

"dependencies": {
    "apollo-server-lambda": "^2.4.8",
    "graphql": "^14.1.1"
  },

1. replace index.js with:

const { ApolloServer, gql } = require('apollo-server-lambda');
// Construct a schema, using GraphQL schema language
const typeDefs = gql`
  type Query {
    hello: String
  }
`;
// Provide resolver functions for your schema fields
const resolvers = {
  Query: {
    hello: (parent, args, context) => {
      return 'Hello world!';
    },
  },
};
const server = new ApolloServer({
  typeDefs,
  resolvers,
});
exports.handler = server.createHandler({
  cors: {
    origin: true,
    credentials: true,
    allowedHeaders: ['authorization', 'content-type', 'x-amz-security-token', 'x-amz-date'],
  },
});

Make sure you saved your files, then Press enter to continue in the terminal.

Choose REST

OK, we have a server config, but we need an API gateway to get to it. Run the following:

amplify api add

Choose the following:

? Please select from one of the below mentioned services

> REST

Oh, the irony! If you choose GraphQL you will be creating an AppSync API. You must surrender your desire to achieve your desire. Choose REST, my friend.

? Provide a friendly name for your resource to be used as a label for this category in the project:

> apolloApi

? Provide a path (e.g., /items)

> /graphql

? Choose a Lambda source

> Use a Lambda function already added in the current Amplify project

? Choose the Lambda function to invoke by this path

> apollosvr

? Restrict API access

> No

? Do you want to add another path?

> No

Push your project

amplify push

You should see something like this

Current Environment: master
| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Function | apolloSvr       | Create    | awscloudformation |
| Api      | apolloApi       | Create    | awscloudformation |
? Are you sure you want to continue? (Y/n)

Select Yes and amplify will see to the provisioning of your services. It should take less than 5 minutes.

Find your endpoint URL and check out the GraphQL playground

Strangely, the API gateway endpoint is not printed at any time in this process, so you’ll have to find it in the CloudFormation outputs. These are available locally in amplify/backend/amplify-meta.json. Find it at api.apolloApi.output.RootUrl. It will resemble: https://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/master(with the x’s filled in). Then:

1. go to your browser, appending /graphql to the path (e.g., https://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/master/graphql). You should now see the GraphQL Playground (if not, double-check your path and/or confirm that amplify push was successful).
2. The GraphQL playground has its own URL bar. You may be missing the API Gateway stage in the URL (/master in this example) before /graphql- update that to match the url in the browser address bar, and run the { hello } query. If you get the “Hello world!” response, then you’re done! The playground should remember the URL on your browser once you’ve been there once.

Congratulations, you’ve just set up a serverless Apollo server. Your app will be able to access the live server at the same address. There are many things to cover from here, but hopefully this got you a good start on your adventure. Happy coding!