AWS Amplify for React/React Native Development — Pt 3 Integrating GraphQL with AWS AppSync

So what is AppSync and how does it help us?

Getting Started

amplify add api
I chose single object like a to-do list
  1. We are making a GraphQL API. I chose GraphQL because I am currently just trying to learn more about using GraphQL in general. The way that AppSync functions, it is made very easy for beginners.
  2. Named it “myapp”
  3. For authorization purposes (think like JWT tokens to get the info!) I chose Amazon Cognito User Pool because we already set it up in the previous post. This way we can continue integrating all the things we have already been using. You can use whichever authentication you would like.
  4. Advanced settings? This is a super beginner setup so no way Jose
  5. We don’t already have a schema
  6. We choose single object with fields to keep this super straightforward.
We have an Auth from before and our new API!
amplify push
✔ All resources are updated in the cloudGraphQL endpoint: https://f4xha3yjf5dcdaz2ez47p5sysu.appsync-api.us-east-1.amazonaws.com/graphql

Check it out on the Console

  • Schema
  • Data Sources
  • Functions
  • Queries
  • Caching
  • Settings
  • Monitoring
Oh look — you get back a whole lot of nothing..

Rendering our API into our React App

const listTodos = `       query MyQuery {            listTodos {                items {                   id                   name                   description                 }            }        }`
import React, (useState, useEffect} from 'react';
import {API, graphqlOperation, Amplify} from 'aws-amplify';

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store