Skip to content
Sandny Blog
  • Home
  • Java
  • JavaScript
  • AWS
  • Embedded
  • About
Use AWS GraphQL for react native app AppSync

Use AWS GraphQL for React Native Message App

  • June 28, 2018September 3, 2018
  • by Coder Kai

Recently I came up with a react native app which needs to integrate AWS GraphQL. Its actually provided with AWS App Sync and a very convenient way if you want a quick pub-sub. The problem was I had to do mutations as a background asynchronous process and wanted to update the app state from that. When I went through the documents I found the AWSAppSyncClient which is an Apollo Client. Although it was promising the react native examples were more focusing towards react or react-native Components which was really making a mess.

  1. The Views will have the logic of mutations and even if we move the code it wont be compact and easy to read.
  2. No way to call mutations asynchronously and since the state is maintained with redux, using component state for data is not good.

So I went through all the docs and used the Apollo Client documentation to come up with a plan like following

Configure AWSAppSyncClient to access AWS GraphQL URL

import AWSAppSyncClient from "aws-appsync";
import { Rehydrated } from 'aws-appsync-react';
import { AUTH_TYPE } from "aws-appsync/lib/link/auth-link";
import { graphql, ApolloProvider, compose } from 'react-apollo';

const client = new AWSAppSyncClient({
  url: amplifyConfig.API.graphqlEndpoint, // https://##################.appsync-api.##-####-#.amazonaws.com/graphql
  region: amplifyConfig.API.region,   // us-east-#
  auth: { 
    type: AUTH_TYPE.API_KEY,
    apiKey: amplifyConfig.API.apiKey,  //da2-##############
  },
  disableOffline: true,
});


Here I have used the API_KEY authentication since its easy for the first time configuration. Note that this auth key is expired after 7 days. Check the source code for the AWSAppSyncClient from the source https://github.com/awslabs/aws-mobile-appsync-sdk-js

The AWSAppSyncClient is a wrapper around the Apollo Client which is widely used as a Graphql client. The source for it can be found here https://github.com/awslabs/aws-mobile-appsync-sdk-js/blob/master/packages/aws-appsync/src/client.ts in case you need some understanding.

And the api reference regarding the Apollo Client can be found here https://www.apollographql.com/docs/react/api/apollo-client.html

Create a schema on AWS GraphQL, AWS App Sync

Login to the AppSync of AWS and create the schema with type message. (Note that you can change the data types as you want. I just wanted to use String here)

type Message {
  id: String!
  message: String!
  createdTime: String!
  createdUser: String!
}

Message Type to add message details- AWS GraphQL

Then click on the Create Resource

Create Resource Button AWS - AWS GraphQL

After that enter the details as in the image and create the data resource. It will create the DynamoDB table and resolvers to get the data. That way it’s a one-click creation. But you will often need to change the fields and queries to get the data that you require.

Graphql Resource Parameters - AWS GraphQL

Resource is being created - AWS GraphQL

After creating the resource you will see the following schema.

input CreateMessageInput {
  id: String!
  message: String!
  createdTime: Int!
  createdUser: String!
}

input CreatePositionInput {
  userId: String!
  placeId: String!
  updatedTime: String!
}

input DeleteMessageInput {
  id: String!
  createdUser: String!
}

input DeletePositionInput {
  userId: String!
}
type Message {
  id: String!
  message: String!
  createdTime: Int!
  createdUser: String!
}

type MessageConnection {
  items: [Message]
  nextToken: String
}

type Mutation {
  createMessage(input: CreateMessageInput!): Message
  updateMessage(input: UpdateMessageInput!): Message
  deleteMessage(input: DeleteMessageInput!): Message
}

type Query {
        getMessage(id: String!, createdUser: String!): Message
  listMessages(first: Int, after: String): MessageConnection
}

type Subscription {
  onCreateMessage(
    id: String,
    message: String,
    createdTime: Int,
    createdUser: String
  ): Message
    @aws_subscribe(mutations: ["createMessage"])
  onUpdateMessage(
    id: String,
    message: String,
    createdTime: Int,
    createdUser: String
  ): Message
    @aws_subscribe(mutations: ["updateMessage"])
  onDeleteMessage(
    id: String,
    message: String,
    createdTime: Int,
    createdUser: String
  ): Message
    @aws_subscribe(mutations: ["deleteMessage"])
}

schema {
  query: Query
  mutation: Mutation
  subscription: Subscription
}

Then save the schema and let’s code schema for the client to send message data

Query for schema from Client

Now we have to create the client schema. For that first what we need is a create mutation. And then subscribe to new messages created. The createMessage mutation schema looks like follows. And I have used this as Message.schema.js in next Message service

export const CreatePosition = gql`mutation CreateMessage($id: String!, $message: String!, $createdTime: String!, $createdUser: String!) {
  createMessage(input: {id: $id, message: $message, createdTime: $createdTime, createdUser: $createdUser }) {
   id
   message
   createdTime
   createdUser
  }
}`;


export const SubscribeToMessage = gql`subscription OnUpdateMessage($createdUser: String!) {
 onUpdateMessage(createdUser: $createdUser) {
   id
   message
   createdTime
   createdUser
 }
}`;

Create an object that could execute this query using apollo client as follows. I named it as Message.subscription.js

import gql from 'graphql-tag';
import { CreateMessage, SubscribeToMessage } from './schema/Message.schema';

export class MessageSubscription {

  constructor() {
    this.initialized = false;
  }

  init({ store, client }) {
    this.store = store;
    this.client = client;
    this.initialized = true;
  }

  checkInitialized() {
    if (!this.initialized) {
      throw "Subscription Not initialized";
    }
  }

  createMessage(message) {
    const result = client.mutate({
      mutation: CreateMessage,
      variables: message,
    }).then(result => {
      store.dispatch(Actions.messageCreated(result))
    }).catch(e => {
        // check and retry for attempts or send an error message
    });
  }

  subscribeToMessages(userId, force = false) {
    if (userId === this.userId && !force) {
      return;
    }

    const { dispatch } = this.store;
      client.subscribe({ query: SubscribeToMessage, variables: {
        createdUser: userId,
      }}).subscribe({
          next: (data) => {
            dispatch(Actions.messageRecieved(data));
          },
          //complete: subscribe again or notify
          //error: console.log,
        });
  }
}

export default new MessageSubscription();

Now your client service is ready. To integrate it with the app, initialize the service when creating the store

MessageSubscription.init({ store, client });

Now you can dispatch any action and invoke the create Message and subscription as you want. Whether you want to access it through react components or redux actions with redux state.

The important thing to remember is that you need to consider the primary key and Validation errors which could occur with DynamoDB.
Feel free to add any comment if you want code or any other clarfications.

How to use antd components without the whole library
How to mutate AWS GraphQL using AWS Lambda
Coder Kai
A humble developer
apollo client aws aws app sync aws graphql dynamodb graphql javascript pubsub react.js subscribe

Related articles

Multiple refs for an array of React Elements
Using multiple refs for an…
Immutable and Mutable Values in Javascript
07. Immutable and Mutable Values…
wrapper objects in javascript
06. Wrapper objects in Javascript
globals undefined and null values in javascript
05 Global, null and undefined…
Javascript Booleans and Equality
04. Javascript Guide Booleans and…
How to add Chakra UI Animations
Chakra UI Animations
Copy files from S3 to PostgreSQL RDS
How to copy files from…
SSL Websocket using Nginx Proxy
SSL Websocket proxy with Nginx…
Change python version correctly
Python is not setting correct…
optimize React.js load time
How to optimize React.js app…
Multiple refs for an array of React Elements
How to use IntersectionObserver to…
Multiple refs for an array of React Elements
How to dismiss dropdowns when…
Javascript guide Strings
03. Javascript Guide – Strings
How to fetch data with useEffect
How to fetch data with…
add styles to stripe elements
How to add styles to…
Typescript
How to use Typescript with…
how to optimize react-native map view
How to optimize react-native map…
debounce with react hooks
Avoid multiple clicks using debounce…
Numbers inJavascript
02. Javascript Guide – Numbers
Introduction to Javascript
01. Javascript Guide – Introduction…

Categories

  • android 3
  • Apollo Client 1
  • AWS 8
    • AppSync 5
    • EC2 1
    • EKS 1
    • Route53 1
    • S3 1
  • AWS Amplify 1
  • Chakra UI 1
  • Docker 1
  • Embedded 1
  • EmberJS 1
  • FCM 1
  • Godaddy 1
  • GraphQL 3
  • ios 1
  • Jasper 1
  • Java 10
    • Java 11 1
    • Java 14 1
  • JavaEE 2
  • JavaScript 39
    • Express.js 4
    • Javascript Guide 7
    • Node.js 3
    • react-native 4
    • React.js 17
    • Typescript 1
  • Kubernetes 1
  • machine learning 1
  • Maven 2
  • OCaml 3
  • PostgreSQL 1
  • Python 2
  • react-native 4
  • ReactJS 3
  • sass 1
  • Server 6
  • spark 1
  • Terraform 2
  • Ubuntu 4
  • Uncategorized 1
  • webpack 2

Recent Comments

  • binance register on Chakra UI Animations
  • binance account on SSL Websocket proxy with Nginx for Graphql Subscriptions
  • Binance Pag-signup on How to fetch data with useEffect

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Archives

  • October 2022 3
  • September 2022 7
  • May 2022 1
  • December 2021 1
  • August 2021 1
  • July 2021 6
  • June 2021 3
  • February 2021 1
  • July 2020 1
  • December 2019 5
  • November 2019 6
  • October 2019 3
  • August 2019 1
  • March 2019 1
  • February 2019 1
  • January 2019 2
  • December 2018 1
  • September 2018 2
  • August 2018 1
  • June 2018 1
  • February 2018 1
  • November 2017 2
  • October 2017 5
  • September 2017 1
  • June 2017 1
  • May 2017 10
Sandny Blog space
Theme by Colorlib Powered by WordPress