Labba med AppSync

Använd era ccxxxx_lambda_dev-användare i dessa labbar.

Utvecklarguider för AppSync finns på AWS AppSync Developer Guide. Bl.a kan Resolver Mapping Template Reference vara användbar.

Labb 1: Skapa ett API i AWS Console

I den här labben ska vi bygga ett AppSync-API som är en proxy för JSON placeholder, vilken är ett fejkat REST-API som finns online.

Logga in på AWS Management Console.

Eftersom AppSync inte finns i regionen EU Stockholm måste vi byta till regionen EU Frankfurt

Gå till meny Services och sök fram AWS AppSync. Här finns en knapp Create API, skapa ett nytt AppSync API genom att trycka på knappen Create API.

Välj Build from scratch i panelen Customize your API or import from Amazon DynamoDB och tryck på Start:

Ge den ett namn som börjar med ditt signum (ccxxxx) och gå vidare så öppnas den skapade AppSync-resursen.

Tryck på Edit Schema

Då öppnas schema-editorn

Definiera följande schema i Schema-panelen till vänster:

type Address {
	street: String!
	suite: String
	city: String!
	zipcode: String!
	geo: GeographicPositon
}

type Company {
	name: String!
	catchPhrase: String
	bs: String
}

type GeographicPositon {
	lat: Float!
	lng: Float!
}

type GetUser {
	userById(id: ID!): User
	users: [User!]!
}

type User {
	id: ID!
	name: String!
	username: String!
	email: String
	address: Address
	phone: String
	website: String
	company: Company
}

schema {
	query: GetUser
}

I panelen Resolvers, på högersidan, kan man sedan koppla en resolver till respektive fält i schemat. Nu ska vi koppla en resolver till userById-queryn.

Leta fram GetUser och under den userById(...): User och tryck på knappen Attach.

Nu måste man lägga till en datakälla och då skall vi lägga till JSON placeholder som datakälla.

Ange JSON_placeholder som namn, typen HTTP endpoint samt ange https://jsonplaceholder.typicode.com som bas-URL och tryck sedan på Create.

När källan är skapad kan man backa tillbaka till resolvern och välja att koppla den nya JSON_placeholder-datakällan och sedan skapa resolvern.

Nu öppnas en vy där man kan konfigurera anropsmallen (Configure the request mapping template): Denna beskriver hur GraphQL-frågan skall översättas till ett HTTP-anrop. Klicka på info-länken för att få information om vad som syns.

Byt värdet för "resourcePath" från "/" till "/users/$ctx.args.id" och spara sedan resolvern.

Gör även Attach på queryn users: [User!]!. Här behöver man endast sätta "resourcePath" till "/users". Spara resolvern.

Hoppa sedan ut till schemat (klicka på schemanamnet i vänstermenyn) och öppna sedan Run a query

Lägg till nedanstående fråga i vänstra panelen

query GetUser1 {
  userById(id:1) {
    id
    name
  }
}

• Kör sedan frågan, vilket skall ge svaret

{
  "data": {
    "userById": {
      "id": "1",
      "name": "Leanne Graham"
    }
  }
}

• Prova samma sak med

query GetAllUsers {
  users {
    id
    name
  }
}

Så, nu har du skapat en GraphQL-proxy, baserad på AppSync, mot ett externt REST-API!

Labb 2: Implementera en React-klient mot AppSync

Här bygger vi en minimal React-applikation som inte bygger på AWS Amplify.

Labben är inspirerad av Starter App (React) som finns bland exemplena på AWS AppSync Resources.

Vi kommer att bygga en React-applikation från grunden. Applikationen skall lista upp alla användare hämtade från users i schemat från föregående labb.

Skapa en React-applikation:

# Skapa react-applikationen
npx create-react-app my-appsync-client --typescript
cd my-appsync-client
# Installera paket för AWS och GraphQL
npm i -S aws-appsync@2 aws-appsync-react@2 graphql graphql-tag react-apollo@2 

För att undvika att man råkar checka in sin API-nyckel är det lämpligt att lägga till aws-exports.* i .gitignore (vi kommer att lägga till filen aws-exports.js längre ner).

Nu ska vi först modifiera src/App.tsx (vi är lite lata och lägger alla komponenter i en och samma fil) så att vi kopplar ihop den med GraphQL

Börja med att starta applikationen:

npm start

och öppna den i browsern.

Rensa upp i filen så att App blir minimal:

import React from 'react';

// Fancy app
const App: React.FC = () => {
  return (
    <div>App is up...</div>
  );
}

// Observera att App är default-export
export default App;

Nu skall man bara se en sida med texten App is up... i browsern.

Ladda ner AppSync-konfigurationsfilen från AWS: Öppna AWS AppSync under Services i AWS Management Console. Öppna där schemat du skapade i Labb 1. Öppna fliken JavaScript i panelen Integrate with your app:

Klicka där på knappen Download Config och spara filen i src-katalogen i react-applikationen. Den filen anger GraphQL-endpoint, region och API-nyckel för den specifika AppSync-resursen.

Lägg sedan till import av konfigurationen samt initiering av AWSAppSyncClient (vilken kommer att användas nedan för initiering av Apollo):

import React from 'react'
import awsconfig from './aws-exports.js'
import AWSAppSyncClient, {AUTH_TYPE} from 'aws-appsync/lib'

// Här skapar vi en klient för AWS AppSync
const appSyncClient = new AWSAppSyncClient({
  url: awsconfig.aws_appsync_graphqlEndpoint,
  region: awsconfig.aws_appsync_region,
  auth: {
    type: AUTH_TYPE.API_KEY, // or type: awsconfig.aws_appsync_authenticationType,
    apiKey: awsconfig.aws_appsync_apiKey,
  }
})

// Fancy app
const App: React.FC = () => {
  return (
    <div>App is up...</div>
  )
}

// Observera att App är default-export
export default App

Man ser fortfarande sidan med texten App is up... i browsern.

Skapa en react-komponent WithApollo, vilken kommer att:

• Skapa en Apollo-provider kopplad till AWSAppSyncClient skapad ovanför
• Dessutom lägga till AWS-specifik hantering med Rehydrated (instantiering av in-memory-objekt för Apollo-cachen)
• Wrappa App
• Observera att vi nu exporterar WithApollo som default, detta innebär att det nu är den komponenten som renderas i src/index.tsx istället för App

import React from 'react'
import awsconfig from './aws-exports.js'
import AWSAppSyncClient, {AUTH_TYPE} from 'aws-appsync/lib'
import {ApolloProvider} from 'react-apollo'
import {Rehydrated} from 'aws-appsync-react/lib'

// Här skapar vi en klient för AWS AppSync
const appSyncClient = new AWSAppSyncClient({
  url: awsconfig.aws_appsync_graphqlEndpoint,
  region: awsconfig.aws_appsync_region,
  auth: {
    type: AUTH_TYPE.API_KEY, // or type: awsconfig.aws_appsync_authenticationType,
    apiKey: awsconfig.aws_appsync_apiKey,
  }
})

// Fancy app
const App: React.FC = () => {
  return (
    <div>App is up...</div>
  )
}

// Komponent som kopplar ihop med Apollo och AppSync
const WithApollo: React.FC = () => {
  return (
    <ApolloProvider client={appSyncClient}>
      <Rehydrated>
        <App/>
      </Rehydrated>
    </ApolloProvider>
  )
}

// Observera att vi nu bytt till WithApollo som default-export
export default WithApollo

OK, vi har fortfarande inte fått in någon fråga än, men nu blir det plain Apollo:

• vi lägger till en GraphQL-fråga för att läsa users
• dessutom lägger vi till en komponent för att visa resultatet
• till slut kopplar vi ihop komponenten med GraphQL-klienten

import React from 'react'
import awsconfig from './aws-exports.js'
import AWSAppSyncClient, {AUTH_TYPE} from 'aws-appsync/lib'
import {ApolloProvider, DataProps, graphql} from 'react-apollo'
import {Rehydrated} from 'aws-appsync-react/lib'
import gql from 'graphql-tag'

// Här skapar vi en klient för AWS AppSync
export const appSyncClient = new AWSAppSyncClient({
  url: awsconfig.aws_appsync_graphqlEndpoint,
  region: awsconfig.aws_appsync_region,
  auth: {
    type: AUTH_TYPE.API_KEY, // or type: awsconfig.aws_appsync_authenticationType,
    apiKey: awsconfig.aws_appsync_apiKey,
  }
})

// GraphQL-query för att läsa users
const usersQuery = gql`query GetUsers {
    users {
        id
        name
    }
}`

// Komponent för att visa users-resultat
const Users: React.FC<Partial<DataProps<any>>> = ({data}) => {
  return (
    <ul>
      {((data && data.users) || []).map((u: any) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  )
}

// Koppla ihop komponenten ovan med graphql-klienten
const UsersGraphQL = graphql(usersQuery)(Users)

// Fancy app
const App: React.FC = () => {
  return (
    <div>
      <UsersGraphQL/>
    </div>
  )
}

// Komponent som kopplar ihop med Apollo och AppSync
const WithApollo: React.FC = () => {
  return (
    <ApolloProvider client={appSyncClient}>
      <Rehydrated>
        <App/>
      </Rehydrated>
    </ApolloProvider>
  )
}

// Observera att vi nu bytt till WithApollo som default-export
export default WithApollo

Nu skall browsern visa en lista med användare hämtade från AppSync-resursen i backend:

Wop, du är nu fullfjädrad AppSync-ninja!!!