Navigate back to the homepage
Try our GraphQL Dashboard

Hacker News GraphQL API

ApiFacade Team
February 4th, 2020 · 2 min read

We describe here how to create an GraphQL API for the well known Hacker News based on AWS AppSync and Amplify and publish it on ApiFacade Marketplace.

AWS AppSync Amplify vs Firebase

Amazon AWS Amplify (+ AppSync) are the AWS response to Google Firebase proposal to create web and mobile applications in a server-less way. Firebase started first as a realtime database and evolved in a multitude of services for developing, based on Google cloud infrastructure. Even if Firebase has a big advance in front of Amplify, because it was the first in this field, Amplify and AppSync are becoming an alternative, and will have a big future because of the AWS infrastructure. And AWS is the winner in the cloud.

/images/Screenshot_2020-02-04_at_20.51.01.png

The services offered by Amplify and Firebase are very various: realtime database, security, hosting, storage, cloud functions, message queues, analytics, AI etc. You can relay on these services entirely when you are building your mobile or Web application.

Why AWS Amplify and AppSync

But the main service offered from both vendors is of course the realtime database the original Firebase Realtime built on Netty (+ Firestore) for Google and AppSync for Amazon. These services are based on non blocking calls which make possible to have millions of parallel calls from your app, and also are bidirectional client server conversations with web-sockets - that’s way we name them realtime databases.

/images/Screenshot_2020-02-04_at_20.50.12.png

AppSync is interesting for us because it uses GraphQL as the communication standard. This is a very interesting move for AWS and AppSync is now the main option to build a server-less GraphQL APIs in a simple way. And you can use the rest of Amplify services to build your Web or mobile app in a completely server-less way on AWS cloud.

The original Hacker News API is implemented in Firebase. We will create the AppSync version with GraphQL wrapping the original Firebase implementation. We will make the service public on apifacade.com.

First steps

You can follow this tutorial to create a GaphQL API.

You have to create an AWS account first and to install the Amplify CLI on your machine:

1npm install -g @aws-amplify/cli

Configure your amplify account

1amplify configure
2Follow these steps to set up access to your AWS account:
3
4Sign in to your AWS administrator account:
5https://console.aws.amazon.com/
6Press Enter to continue
7
8Specify the AWS Region
9? region: eu-central-1
10Specify the username of the new IAM user:
11? user name: amplify-user
12Complete the user creation using the AWS console
13Press Enter to continue

Then to create a project and the environment.

1amplify init
2Note: It is recommended to run this command from the root of your app directory
3? Enter a name for the project hacker-news
4? Enter a name for the environment dev
5? Choose your default editor: IntelliJ IDEA
6? Choose the type of app that you're building javascript
7Please tell us about your project
8? What javascript framework are you using none
9? Source Directory Path: src
10? Distribution Directory Path: dist
11? Build Command: npm run-script build
12? Start Command: npm run-script start
13Using default provider awscloudformation
14
15
16For more information on AWS Profiles, see:
17https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
18
19? Do you want to use an AWS profile? Yes
20? Please choose the profile you want to use default
21Adding backend environment dev to AWS Amplify Console app: dn3mou1peh19i
22⠧ Initializing project in the cloud...
23
24✔ Successfully created initial AWS cloud resources for deployments.
25✔ Initialized provider successfully.
26Initialized your environment successfully.
27
28Your project has been successfully initialized and connected to the cloud!

And finally to create the GraphQL API.

1amplify add api
2? Please select from one of the below mentioned services: GraphQL
3? Provide API name: hackernews
4? Choose the default authorization type for the API API key
5? Enter a description for the API key: hackernews
6? After how many days from now the API key should expire (1-365): 365
7? Do you want to configure advanced settings for the GraphQL API No, I am done.
8? Do you have an annotated GraphQL schema? No
9? Do you want a guided schema creation? Yes
10? Press enter to continue

We will add an entity named Item according with the Hacker News exposed api:

1type Item {
2 id: ID!
3 deleted: Boolean
4 type: String
5 by: String
6 time: AWSDateTime
7 text: String
8 dead: Boolean
9 parent: Int
10 poll: Int
11 kids: [Int]
12 url: String
13 score: Int
14 title: String
15 parts: [Int]
16 descendants: Int
17}

Push the config to the cloud

1amplify push
2✔ Successfully pulled backend environment dev from the cloud.
3
4Current Environment: dev
5
6| Category | Resource name | Operation | Provider plugin |
7| -------- | ------------- | --------- | ----------------- |
8| Api | hackernews | Create | awscloudformation |
9? Are you sure you want to continue? Yes
10
11The following types do not have '@auth' enabled. Consider using @auth with @model
12 - Todo
13Learn more about @auth here: https://aws-amplify.github.io/docs/cli-toolchain/graphql#auth
14
15
16GraphQL schema compiled successfully.
17
18? Do you want to generate code for your newly created GraphQL API Yes
19? Choose the code generation language target typescript
20? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.ts
21? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
22? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
23? Enter the file name for the generated code src/API.ts
24⠴ Updating resources in the cloud. This may take a few minutes...

/images/Screenshot_2020-02-04_at_20.48.05.png

Now an entire GraphQL schema is generated for us with queries, mutations and subscriptions.

/images/Screenshot_2020-02-04_at_20.48.30.png

A table in Dynamo DB is used as backend.

/images/Screenshot_2020-02-04_at_20.48.44.png

And now the simple part - we add the API to apifacade.com

/images/Screenshot_2020-02-04_at_20.49.45%201.png

Join our email list and get notified about new content

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.

More articles from ApiFacade

GraphQL For The REST of Us

The REST problems are resolved in a elegant way by GraphQL. GraphQL it assumes from the beginning that the data from the server side is exposed as a rich data graph not just a set of isolated resources like in the REST definition.

January 5th, 2020 · 4 min read

Awesome GraphQL

We present here a list of awesome GraphQL resources. We present here GraphQL IDEs, clients, servers, tools, tutorials and other awesome list.

January 2nd, 2020 · 1 min read

Link to $https://twitter.com/apifacadeLink to $https://github.com/apifacade