Build a GraphQL API on Function Compute and API Gateway
By Suenaga Ryota, Alibaba Cloud MVP
What Is GraphQL?
GraphQL is an open-source query language for APIs, originally developed by Facebook. GraphQL can be used in conjunction with Alibaba Cloud Function Compute and API Gateway. For more information, about GraphQL, visit the official GraphQL site. We will not go into the details of GraphQL as this article is meant to be a quick and simple tutorial.
We got a result by throwing POST request to one endpoint. The curl command below is an example to get messages.
$ curl -H "Content-Type: application/json" -X POST -d '
{
"query": "{ messages { name body } }"
}
' http://xxxxxxxxxxxxxxxxxx-cn-shanghai.alicloudapi.com/
{"data":{"messages":[{"body":"Hello","name":"asmsuechan"},{"body":"World","name":"suechan"}]}}Minimum Code for GraphQL to Work on Function Compute
I wrote the bare minimum GraphQL code and made it work on Function Compute.
I expected the combination of query and return value below:
Query: "{ hello }"
Return Value: { data: { hello: "world" } }This sample below came from GraphQL’s Official GitHub.
// index.js
const { hook } = require('fc-helper');
const {
graphql,
GraphQLSchema,
GraphQLObjectType,
GraphQLString
} = require('graphql');const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: 'RootQueryType',
fields: {
hello: {
type: GraphQLString,
resolve() {
return 'world';
}
}
}
})
});const query = '{ hello }';module.exports.handler = (event, context, callback) => {
graphql(schema, query).then((result) => {
callback(null, { statusCode: 200, body: result });
});
});
It’s easy. Just execute graphql() in the handler function.
More Detailed API
Next, I made some improvements to the API. I expected a more complex combination of queries and return values below:
Query: "{ messages { name body } }"
Return value: {"data":{"messages":[{"body":"Hello","name":"asmsuechan"},{"body":"World","name":"suechan"}]}}I defined a type named message to get plural message.
// index.js
const { hook } = require('fc-helper');
const {
graphql,
GraphQLSchema,
GraphQLObjectType,
GraphQLList,
GraphQLString
} = require('graphql');
const atob = require('atob');const messages = [
{
name: 'asmsuechan',
body: 'Hello'
},
{
name: 'suechan',
body: 'World'
}
];const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: 'RootQueryType',
fields: {
messages: {
type: GraphQLList(
new GraphQLObjectType({
name: 'message',
fields: {
name: { type: GraphQLString },
body: { type: GraphQLString },
},
}),
),
resolve() {
return messages;
}
}
}
})
});module.exports.handler = (event, context, callback) => {
const request = JSON.parse(event.toString('utf8'))
const query = JSON.parse(atob(request["body"]))["query"]
graphql(schema, query).then((result) => {
callback(null, { statusCode: 200, body: result });
});
};
To check whether this API works well, I executed curl.
$ curl -H "Content-Type: application/json" -X POST -d '
{ "query": "{ messages { name body } }"}
'http://xxxxxxxxxxxxxxxxxx-cn-shanghai.alicloudapi.com/{"data":{"messages":[{"body":"Hello","name":"asmsuechan"},{"body":"World","name":"suechan"}]}}
Conclusion
I am very happy to be able to use GraphQL instead of REST API on Alibaba Cloud Function Compute and API Gateway because we can create complex APIs without using so many API Gateways.
However, I haven’t tested this on a production environment. You may try this yourself by referring to my code repository of this article: https://github.com/asmsuechan/fc_graphql_api
Article originally published here.
