TypeScript + CDK で理解する AppSync: はじめの一歩

$ git clone git@github.com:53ningen/CDK-AppSync.git

# backend/src/graphql/schema.graphql
type Query {
　　　　sayHello: String!
}

schema {
　　　　query: Query
}

// backend/lib/hello-appsync-stack.ts
import {
  AuthorizationType,
  GraphqlApi,
  MappingTemplate,
  Schema,
} from '@aws-cdk/aws-appsync'
import * as cdk from '@aws-cdk/core'

export class HelloAppSyncStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props)

    const api = new GraphqlApi(this, 'HelloAppSyncApi', {
      name: 'HelloAppSync',
      schema: Schema.fromAsset('src/graphql/schema.graphql'),
      authorizationConfig: {
        defaultAuthorization: {
          authorizationType: AuthorizationType.API_KEY,
        },
      },
    })
    const sayHelloDataSoruce = api.addNoneDataSource('SayHelloDataSoruce', {})
    const sayHelloResolver = sayHelloDataSoruce.createResolver({
      typeName: 'Query',
      fieldName: 'sayHello',
      requestMappingTemplate: MappingTemplate.fromString(
        JSON.stringify({
          version: '2018-05-29',
          payload: 'Hello, World!',
        })
      ),
      responseMappingTemplate: MappingTemplate.fromString(
        '$util.toJson($context.result)'
      ),
    })
    new CfnOutput(this, 'ApiUrl', { value: api.graphqlUrl })
    new CfnOutput(this, 'Apikey', { value: api.apiKey || '' })
  }
}

// Query
query MyQuery {
  sayHello
}

// Response
{
  "data": {
    "sayHello": "Hello, World!"
  }
}

// リクエストマッピングテンプレート
{
  "version": "2018-05-29",
  "payload": "
}

// レスポンスマッピングテンプレート
"Hello, World!"

# backend/src/graphql/schema.graphql
type Query {
  sayHello: String!
  sayHelloLambda(yourName: String!): String!
}

schema {
  query: Query
}

// backend/src/lambda/hello.ts
import 'source-map-support/register'

type HelloInput = {
  arguments: {
    yourName: string
  }
}

type HelloOutput = String

export async function handler(
  input: HelloInput,
  _: object
): Promise<HelloOutput> {
  console.log(`input: ${JSON.stringify(input)}`)
  return `Hello, ${input.arguments.yourName}!`
}

// backend/lib/hello-appsync-stack.ts
    const sayHelloDataSoruce = api.addNoneDataSource('SayHelloDataSoruce', {})
    const sayHelloResolver = sayHelloDataSoruce.createResolver({
      typeName: 'Query',
      fieldName: 'sayHello',
      requestMappingTemplate: MappingTemplate.fromString(JSON.stringify({
        "version": "2018-05-29",
        "payload": "
      })),
      responseMappingTemplate: MappingTemplate.fromString('"Hello, World!"')
    })

    const sayHelloLambdaFunction = new NodejsFunction(this, 'SayHelloLambdaFunction', {
      entry: 'src/lambda/hello.ts',
      timeout: Duration.seconds(3),
      memorySize: 128,
      bundling: {
        sourceMap: true,
        sourceMapMode: SourceMapMode.DEFAULT,
      }
    }

// Query
query MyQuery {
  sayHelloLambda(yourName: "Takashi")
}

// Response
{
  "data": {
    "sayHelloLambda": "Hello, Takashi!"
  }
}

#if($ctx.error)
     $util.error($ctx.error.message, $ctx.error.type, $ctx.result)
#end
$util.toJson($ctx.result)

$ cat ./src/etc/hello.sh
#!/bin/sh

API_URL=$(cat ../outputs.json | jq -r '.HelloAppSyncStack.ApiUrl')
API_KEY=$(cat ../outputs.json | jq -r '.HelloAppSyncStack.ApiKey')

curl -s -H "x-api-key: $API_KEY" \
    -d '{ "query": "query MyQuery { sayHello }" }' $API_URL | jq
curl -s -H "x-api-key: $API_KEY" \
    -d '{ "query": "query MyQuery { sayHelloLambda(yourName: \"Ken\") }" }' $API_URL | jq

$ ./src/etc/hello.sh
{
  "data": {
    "sayHello": "{sayHello!=Hello, World}"
  }
}
{
  "data": {
    "sayHelloLambda": "Hello, Ken!"
  }
}

// backend/src/etc/hello.ts
import fetch from 'node-fetch'
import Outputs = require('../../../outputs.json')

const apiUrl = Outputs.HelloAppSyncStack.ApiUrl
const apiKey = Outputs.HelloAppSyncStack.Apikey
const query = `
{
  sayHelloLambda(yourName: "Ken")
}
`

const main = async () => {
  const res = await fetch(apiUrl, {
    method: 'POST',
    headers: {
      'x-api-key': apiKey,
    },
    body: JSON.stringify({ query }),
  })
  const data = await res.json()
  console.log(JSON.stringify(data))
}

main().then((_) => {})

$ ts-node src/etc/hello.ts | jq
{
  "data": {
    "sayHelloLambda": "Hello, Ken!"
  }
}

$ yarn add graphql
$ yarn add -D \
    @graphql-codegen/cli \
    @graphql-codegen/typescript \
    @graphql-codegen/typescript-operations \
    @graphql-codegen/typescript-graphql-request

# src/graphql/sayHelloLambda.graphql
query sayHelloLambda($yourName: String!) {
  sayHelloLambda(yourName: $yourName)
}

# codegen.yml
overwrite: true
schema: src/graphql/schema.graphql
documents: src/graphql/**/*.graphql
generates:
  src/generated/graphql.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-graphql-request

// backend/src/etc/hello-with-generated-code.ts
import { GraphQLClient } from 'graphql-request'
import { getSdk } from '../generated/graphql'
import Outputs = require('../../../outputs.json')

const apiUrl = Outputs.HelloAppSyncStack.ApiUrl
const apiKey = Outputs.HelloAppSyncStack.Apikey

const cli = new GraphQLClient(apiUrl, {
  headers: {
    'x-api-key': apiKey,
  },
})
const sdk = getSdk(cli)

const main = async () => {
  const res = await sdk.sayHelloLambda({ yourName: 'Ken' })
  console.log(res.sayHelloLambda)
}

main().then((_) => {})

$ yarn add graphql graphql-request
$ yarn add --dev @graphql-codegen/typescript

# backend/codegen.yml
overwrite: true
schema: src/graphql/schema.graphql
documents: src/graphql/**/*.graphql
generates:
  src/generated/graphql.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-graphql-request
  ../frontend/hello/src/generated/graphql.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-graphql-request

// frontend/hello/src/Hello.tsx
import { GraphQLClient } from 'graphql-request'
import React, { useEffect, useState } from 'react'
import './App.css'
import { getSdk } from './generated/graphql'
import Outputs from './outputs.json'

const apiUrl = Outputs.HelloAppSyncStack.ApiUrl
const apiKey = Outputs.HelloAppSyncStack.Apikey

const cli = new GraphQLClient(apiUrl, {
  headers: {
    'x-api-key': apiKey,
  },
})
const sdk = getSdk(cli)

export const Hello = () => {
  const [name, setName] = useState('')
  const [message, setMessage] = useState('')

  useEffect(() => {
    const fetchMessage = async () => {
      const result = await sdk.sayHelloLambda({ yourName: name })
      setMessage(result.sayHelloLambda)
    }
    const timer = setTimeout(() => {
      console.log(name)
      if (name === '') {
        setMessage('INPUT YOUR NAME')
      } else {
        fetchMessage()
      }
    }, 500)
    return () => clearTimeout(timer)
  }, [name])
  return (
    <p>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>{message}</p>
    </p>
  )
}

// frontend/hello/src/App.tsx
import React from 'react'
import './App.css'
import { Hello } from './Hello'
import logo from './logo.svg'

export const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer">
          Learn React
        </a>
        <Hello />
      </header>
    </div>
  )
}