Start your own app with React, GraphQL and Serverless architecture: Part 3 - Let's build a GraphQL backend!

Max Rozen
@RozenMD

Note that this series was written in 2018, using an older version of Terraform (version 12), available here. As it also uses an old version of Node, this series is left online as more of a guideline.

To start, open up your terminal, navigate to your app, and type:

mkdir api

We'll now start a new npm project for our GraphQL server (you could integrate more with the Razzle project, but I'm not entirely sure how).

npm init -y

And now we'll add all the dependencies:

yarn add cors graphql graphql-tag graphql-tools request request-promise-native

and dev-dependencies:

yarn add -D webpack babel-core babel-loader babel-plugin-inline-import babel-plugin-transform-class-properties babel-plugin-transform-object-rest-spread cross-env zip-webpack-plugin webpack-cli

Time to add add some JavaScript files

Create a .babelrc file in api/, containing:

{
"presets": ["env"],
"plugins": [
"inline-import",
"transform-class-properties",
"transform-object-rest-spread"
]
}

In your package.json add the following scripts:

"dev": "cross-env BABEL_DISABLE_CACHE=1 node -r babel-register local.js",
"build": "cross-env BABEL_DISABLE_CACHE=1 webpack --config=webpack.config.babel.js --env=production"

Create a local.js file in api/, containing:

import cors from 'cors';
import express from 'express';
import schema from './schema';
import { json } from 'body-parser';
import { graphql } from 'graphql';
const PORT = process.env.PORT || 3002;
const app = express();
app.use(cors());
app.post('/graphql', json(), (req, res) => {
const { query, variables } = req.body;
const rootValue = {};
const context = {};
let operationName;
console.log('query: ', query);
console.log('variables: ', variables);
graphql(schema, query, rootValue, context, variables, operationName)
.then((d) => {
console.log('d: ', d);
res
.status(200)
.set('Content-Type', 'application/json')
.send(JSON.stringify(d));
})
.catch((e) => {
console.log('e: ', e);
res
.status(500)
.set('Content-Type', 'application/json')
.send(JSON.stringify(e));
});
});
app.listen(PORT, (err) => {
if (err) {
throw err;
}
console.log(`Listening on http://localhost:${PORT}/`);
});

Create an index.js file in api/, containing:

import { graphql } from 'graphql';
import schema from './schema';
export const handler = (event, context, callback) => {
context.callbackWaitsForEmptyEventLoop = false;
console.log('event:', event);
if (event.httpMethod == 'OPTIONS') {
callback(null, {
statusCode: 200,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Authorization, Content-Type',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH',
'Access-Control-Allow-Credentials': 'true',
'Content-Type': 'application/json',
},
body: null,
});
} else {
const { query, variables, operationName } = JSON.parse(event.body);
const rootValue = {};
const ctx = {};
graphql(schema, query, rootValue, ctx, variables, operationName)
.then((d) => {
callback(null, {
statusCode: 200,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Authorization, Content-Type',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH',
'Access-Control-Allow-Credentials': 'true',
'Content-Type': 'application/json',
},
body: JSON.stringify(d),
});
})
.catch((e) => {
callback(null, {
statusCode: 503,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Authorization, Content-Type',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH',
'Access-Control-Allow-Credentials': 'true',
'Content-Type': 'application/json',
},
body: JSON.stringify(e),
});
});
}
};

Create a resolvers.js file in api/, containing:

export default {
Query: {
hello: () => 'world',
},
// Mutation: {
//
// },
};

Create a schema.graphql file in api/, containing:

type Query {
hello: String!
}
#type Mutation {
#
#}
schema {
query: Query
#mutation: Mutation
}

Create a schema.js file in api/, containing:

import { makeExecutableSchema } from 'graphql-tools';
import typeDefs from './schema.graphql';
import resolvers from './resolvers';
export default makeExecutableSchema({
typeDefs,
resolvers,
});

Finally, create a webpack.config.babel.js file in api/, containing:

import path from 'path';
import webpack from 'webpack';
import zip from 'zip-webpack-plugin';
export default {
entry: path.resolve(__dirname),
output: {
path: path.join(__dirname, '..', 'build'),
filename: 'index.js',
library: 'index',
libraryTarget: 'umd',
},
target: 'node',
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, '..'),
exclude: path.resolve(__dirname, '..', 'node_modules'),
loader: 'babel-loader',
},
{
test: /\.graphql$/,
include: path.resolve(__dirname, '..'),
exclude: path.resolve(__dirname, '..', 'node_modules'),
loader: 'graphql-tag/loader',
},
],
},
plugins: [
new webpack.ProvidePlugin({
XMLHttpRequest: ['xmlhttprequest', 'XMLHttpRequest'],
}),
new zip({
filename: 'graphql.zip',
}),
],
};

That's all you should need to get the GraphQL service running locally.

Terraform changes

We also need to make some changes to our Terraform configuration to:

  • Spin up a new Lambda for GraphQL
  • Spin up a new API Gateway for the new Lambda
  • Tell Cloudfront to forward all /graphql requests to our API Gateway

Back in infrastructure/, create a api_gateway_lambda.tf file containing:

resource "aws_api_gateway_rest_api" "graphql_api" {
name = "${var.name}_api"
description = "${var.comment}"
}
resource "aws_api_gateway_deployment" "graphql_api_deployment" {
rest_api_id = "${aws_api_gateway_rest_api.graphql_api.id}"
stage_name = "prod"
}
resource "aws_api_gateway_resource" "grapqhl_endpoint" {
rest_api_id = "${aws_api_gateway_rest_api.graphql_api.id}"
parent_id = "${aws_api_gateway_rest_api.graphql_api.root_resource_id}"
path_part = "graphql"
}
resource "aws_api_gateway_method" "graphql_path_post" {
rest_api_id = "${aws_api_gateway_rest_api.graphql_api.id}"
resource_id = "${aws_api_gateway_resource.grapqhl_endpoint.id}"
http_method = "ANY"
authorization = "NONE"
}
resource "aws_api_gateway_integration" "graphql_path_integration" {
rest_api_id = "${aws_api_gateway_rest_api.graphql_api.id}"
resource_id = "${aws_api_gateway_resource.grapqhl_endpoint.id}"
http_method = "${aws_api_gateway_method.graphql_path_post.http_method}"
integration_http_method = "POST"
type = "AWS_PROXY"
uri = "arn:aws:apigateway:${var.aws_region}:lambda:path/2015-03-31/functions/${aws_lambda_function.graphql.arn}/invocations"
content_handling = "CONVERT_TO_TEXT"
}
resource "aws_api_gateway_method" "graphql_post" {
rest_api_id = "${aws_api_gateway_rest_api.graphql_api.id}"
resource_id = "${aws_api_gateway_rest_api.graphql_api.root_resource_id}"
http_method = "ANY"
authorization = "NONE"
}
resource "aws_api_gateway_integration" "graphql_integration" {
rest_api_id = "${aws_api_gateway_rest_api.graphql_api.id}"
resource_id = "${aws_api_gateway_rest_api.graphql_api.root_resource_id}"
http_method = "${aws_api_gateway_method.graphql_post.http_method}"
integration_http_method = "POST"
type = "AWS_PROXY"
uri = "arn:aws:apigateway:${var.aws_region}:lambda:path/2015-03-31/functions/${aws_lambda_function.graphql.arn}/invocations"
content_handling = "CONVERT_TO_TEXT"
}

In infrastructure/ create a lambda_graphql.tf file containing:

resource "aws_lambda_function" "graphql" {
function_name = "graphql_${var.name}"
role = "${aws_iam_role.lambda_iam.arn}"
handler = "index.handler"
runtime = "nodejs8.10"
timeout = "45"
memory_size = "512"
filename = "../build/graphql.zip"
source_code_hash = "${base64sha256(file("../build/graphql.zip"))}"
tags {
Site = "${var.name}"
}
}
resource "aws_lambda_permission" "allow_api_to_exec_lambda_graphql" {
statement_id = "allow_api_to_exec_lambda_graphql"
action = "lambda:InvokeFunction"
function_name = "${aws_lambda_function.graphql.function_name}"
principal = "apigateway.amazonaws.com"
source_arn = "${aws_api_gateway_rest_api.graphql_api.execution_arn}/*/*/*"
}

In our existing cloudfront.tf file, we'll want to add this immediately after the ssr origin_id block:

origin {
origin_id = "api"
domain_name = "${aws_api_gateway_rest_api.graphql_api.id}.execute-api.${var.aws_region}.amazonaws.com"
custom_origin_config {
http_port = "80"
https_port = "443"
origin_protocol_policy = "match-viewer"
origin_ssl_protocols = ["TLSv1", "TLSv1.1", "TLSv1.2"]
}
origin_path = "/${aws_api_gateway_deployment.graphql_api_deployment.stage_name}"
}

Similarly, still in the cloudfront.tf file, add the following immediately after the ordered_cache_behavior for /static/*:

ordered_cache_behavior {
path_pattern = "graphql"
allowed_methods = ["DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT"]
cached_methods = ["GET", "HEAD"]
target_origin_id = "api"
default_ttl = 0
max_ttl = 0
min_ttl = 0
viewer_protocol_policy = "https-only"
compress = true
forwarded_values {
query_string = true
cookies {
forward = "all"
}
headers = [
"Accept",
"Authorization",
"Origin",
]
}
}

At this point you can run terraform apply - You will most likely get an error regarding an API Gateway integration not existing. This is a race condition, and we can get around it just by re-running terraform apply.

Do you struggle to keep up with best practices in React?

I send a single email every two weeks with an article like this one, to help you keep track of what's happening in the React ecosystem.

Lots of developers like them, and I'd love to hear what you think as well. You can always unsubscribe.

    Join 1,555 React developers that have signed up so far!