Introduction to the AWS Amplify using GraphQL Client

In the fast-growing GraphQL program there are several popular GraphQL clients available today including Apollo Client, URQL, and Lokka.
In the process of building a more flexible operating system with AWS GraphQL hosted AWS AppSync, the AWS team has created a new GraphQL client.
Because it works well with almost any GraphQL API or service, and they decided to open it. The AWS Amplify GraphQL client provides a simple API, designed to get up and running quickly with minimal configuration.
The AWS Amplify GraphQL client has been released from React Amsterdam as well as the regular availability of AWS AppSync.
The AWS Amplify GraphQL client supports conversions, registrations, and queries and is actively developed.

We still support our AppSync Apollo SDK with advanced use cases such as temporary storage and offline support. If you are interested in those features, check out the Apollo Client for General GraphQL APIs or the AWS AppSync Apollo SDK for use with the AWS AppSync API.

Let’s take a look on the API.

Setup

To start, you will need to install the AWS Amplify library first:

Next step is, you have to add your GraphQL endpoint:

If you want to set custom headers as per your requirements, you can just add this code to the configure method :

Setting up a GraphQL API

If you do not already have one, setting up the GraphQL API can be done in a few minutes with AWS AppSync, including introducing sample schema. Check out Quickstart here: https://docs.aws.amazon.com/appsync/latest/devguide/quickstart.html

When you set up a client with AppSync, you will need the following configuration instead:

Queries

To make a query, you have to do 2 things:

First one is to define the query, and perform the GraphQL operation.

  1. Defining the query using template literals as shown below:

2. Now, Perform the GraphQL operation as told before:

Now Adding parameters or options:

Mutations

To create a straightforward transition, we still need only two modes from Amplify: graphqlOperation & API.graphql
Explaining GraphQL conversion using template texts:

Applying the GraphQL operation: