How to Install Express GraphQL Server on ECS

By Yitian Xu, Solutions Architect

Solution Background

At its core, GraphQL provides a syntax that describes how to ask for data (called a Schema). GraphQL is database agnostic and works by creating a single endpoint responsible for accepting queries, rather than relying on the REST API approach of having separate endpoints for each service. One of the main benefits is clients have the ability to dictate exactly what they need from the server, and receive that data in a predictable way. And there is overfetching for GraphQL; a mobile client usually overfetch data when there is an identical API as the web client with a RESTful API. With GraphQL, the mobile client can choose a different set of fields, so it can fetch only the information needed for what's onscreen.

In this tutorial, we will show you how to migrate your local GraphQL server to an Alibaba Cloud Elastic Compute Service (ECS) server with a solution that was used by one of our clients.

Introduction of GraphQL

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data.

A GraphQL service is created by defining types and fields on those types, then providing functions for each field on each type. For example, a GraphQL service that tells us who the logged in user is (me) as well as that user's name might look something like this:

Along with functions for each field on each type:

Once a GraphQL service is running (typically at a URL on a web service), it can be sent GraphQL queries to validate and execute. A received query is first checked to ensure it only refers to the types and fields defined, then runs the provided functions to produce a result.

For example the query:

Produce the JSON result:

https://graphql.org/learn/

Solution Process

1. Create ECS instance (with Public IP address + security Group: Http 80/ port 3000 open)
2. Log on ECS instance/prepare environment:

sudo apt install nodejs
sudo apt install npm

3. Create local directory and start to setup app server. The suggestion is to install express server and host for Graphql.

cd /home
mkdir graphql-server-turtorial
cd graphql-server-turtorial
npm install express --save
cd node_modules: then we can see it install all the dependencies automatically.

It will be easy to use Express.js as framework to build up NodeJs API server. We need to add a few routes and route handles first.

mkdir server
touch server/server.js

within Server.js:

Const express = require('express');
const app = express();
app.get('/', (req, res) => {
  res.status(200).send({
    message: 'connection to api server'
  });
});
app.listen(3000, () => {
  console.log('API server listen on port 3000');
});

then start Express Server: node server/server.js
at last curl server: curl http://localhost:3000

4. Install Graphql package into express server:

npm install graphql express-graphql --save

5. Add graphql into server middleware:

within server.js:

Const graphHttp = require ('express-graphql');
app.use(
  '/graphql',
  graphqlHTTP({
    schema: GraphQLSchema,
    graphiql: true
  })
);

In order to visualise GraphQL webUI, please set graphiql:true

6. Create QraphQL schema:

mkdir schema
touch schema/schema.js

Within in schema.js

const GraphQL = require('graphql'); 
const schema = new GraphQL.GraphQLSchema({
  query: {},
  mutation: {}
});
exports.default = schema;

Within server.js, we also need to import schema we just created.
```
Const GraphQLSchema = require ('./schema/schema').default;
```

7. Add query content:

Within schema.js:

const schema = new GraphQL.GraphQLSchema( {
  query: new GraphQL.GraphQLObjectType({
    name: 'Query',
    fields: () => ({
      user: {
        type: User,
        resolve(arg) {
          return {
            name: 'Whien',
            age: 18
          };
        }
      }
    })
  })
});

const User = new GraphQL.GraphQLObjectType({
  name: 'User',
  fields: () => ({
    name: {
      type: GraphQL.GraphQLString
    },
    age: {
      type: GraphQL.GraphQLInt
    }
  })
});

1) GraphQLSchema is the start point of schema.js.
2) Query: it is endpoint of API query.
3) Name: it is the name of field.
4) Fields: It is function for searching content.
5) Type: it is character type.
6) Resolve: return the result to Graphql to check
Backend Database will wrap the results and send to graphql to process.

8. Testing:

curl -X POST http://localhost:3000/graph -d '{"query": "query User{ user { name age } }"}' -H "content-type: application/json"

Community

How to Install Express GraphQL Server on ECS

Solution Background

Introduction of GraphQL

Solution Process

Final Result

Read previous post:

Read next post:

Alibaba Clouder

You may also like

Comments

Alibaba Clouder

Related Products

ECS(Elastic Compute Service)

API Gateway

Function Compute