AppSync + Apollo Ͱ͸͡ΊΔGraphQL PRESENTATION BY Hiroyuki Nishi Jan 18 2019 ng-kyoto Angular Meetup #9

ࠓ೔͓࿩͢͠Δ͜ͱ • GraphQLʹ͍ͭͯͷ஌ࣝͷ੔ཧ • AWS AppSyncͱApolloͷ঺հ • DEMO: AWS AppSync + Apollo ஫ҙ • AWSͷαʔϏε༻ޠ͕ଟ͘Ͱ͖ͯ·͢ɻ

• ੢ ༔೭ @ʢ Nishi Hiroyuki ʣ • Angularͱͷ෇͖߹͍ʢ30 monthsʣ • MOTEX Inc. @ σβΠϯ՝ • AWS, Scala, DDDʹ΋खग़͢͠Δ Who am I ?

• FacebookʹΑΓ։ൃ͞ΕͨAPI༻ͷQueryݴޠ • σʔλऔಘܥͷ query ɺσʔλߋ৽ܥͷ mutation ɺΠϕϯτͷ ௨஌Ͱ͋Δ subscription ͷ3छྨ͕͋Δ GraphQLͱ͸ʁ

GraphQLͷొ৔ͨ͠എܠ • RESTͷ3ͭͷ՝୊ ϝϯςφϯε (API࢓༷ͷυΩϡϝ ϯτͱ࣮૷ͷζϨɺ υΩϡϝϯτ؅ཧ) ϥ΢ϯυτϦοϓ (1ϖʔδΛදࣔ͢Δ ͷʹෳ਺ͷAPIΛୟ͍ ͯ৘ใΛऔಘ͠ͳ͚ Ε͹ͳΒͳ͍) ΦʔόʔϑΣον (ඞཁͳ৘ใҎ֎ͷ σʔλ΋෇ਵͯ͠ฦ ͞ΕΔ) 01 02 03

• GraphQL ͳ API ͕ఏڙ͢ΔΤϯυϙΠϯτ͸ʮ/graphqlʯͷΈ • versionless APIʢAdd Only Approachʣ ैདྷͷσʔλϑΣον GraphQL {ࡾ} GET /v1/persons GET /v2/accounts POST /application POST /application POST /graphql εΩʔϚఆٛ GraphQLͷಛ௃ - REST ͱͷҧ͍-

Schema (GraphQL) • Schemaʹఆٛͨ͠ඞཁͳ৘ใ͚ͩऔಘ͞ΕΔ ैདྷͷσʔλϑΣον GraphQL {ࡾ} GET /v1/persons GET /v2/accounts POST /application POST /application POST /graphql εΩʔϚఆٛ query listApplications { listApplications { items { id company_id itunesstore_id updated } } } GraphQLͷಛ௃ - ΦʔόʔϑΣον - query listApplications { listApplications { items { id } } } શͯͷσʔλ͕ཉ͍͠৔߹ id͚ͩཉ͍͠৔߹

Schema (GraphQL) • ΫΤϦʹରͯ͠ͷܕϨϕϧͷݕূ͕Ͱ͖Δ ैདྷͷσʔλϑΣον GraphQL {ࡾ} GET /v1/persons GET /v2/accounts POST /application POST /application POST /graphql εΩʔϚఆٛ mutation createApplications($createapplicationsinput: CreateApplicationsInput!) { createApplications(input: $createapplicationsinput) { company_id id #aa itunesstore_id updated } } —————————————————————————————————————————— { "createapplicationsinput": { "company_id": ̍, "id": "Hello, world!", "itunesstore_id": "Hello, world!", "updated": "Hello, world!" } } GraphQLͷಛ௃ - ܕϨϕϧͷݕূ -

• C# / .NET - graphql-dotnet, graphql-net, Hot Chocolate • Clojure - alumbra, graphql-clj, lacinia • Elixir - absinthe, graphql-elixir • Erlang - graphql-erlang • Go - graphql-go graph-gophers/graphql-go, GQLGen… • Groovy - gorm-graphql, GQL • Java - graphql-java • JavaScript - express-graphql, GraphQL.js, apollo-server • PHP - graphql-php, Siler • Python - Graphene • Scala - Sangria • Ruby - graphql-ruby GraphQL Server Libraries • ෳ਺ͷݴޠͰαϙʔτ͞Ε͍ͯΔ

ྫ Sangria - Schemaఆٛ- ैདྷͷσʔλϑΣον GraphQL {ࡾ} GET /v1/persons GET /v2/accounts POST /application POST /application POST /graphql εΩʔϚఆٛ type Picture { width: Int! height: Int! url: String } interface Identifiable { id: String! } type Product implements Identifiable { id: String! name: String! description: String picture(size: Int!): Picture } type Query { product(id: Int!): Product products: [Product] }

ྫ Sangria - resolveͷઃఆ- ैདྷͷσʔλϑΣον GraphQL {ࡾ} GET /v1/persons GET /v2/accounts POST /application POST /application POST /graphql εΩʔϚఆٛ val Id = Argument("id", StringType) val QueryType = ObjectType("Query", fields[ProductRepo, Unit]( Field("product", OptionType(ProductType), description = Some("Return a product with specific `id`.”), arguments = Id :: Nil, resolve = c 㱺 c.ctx.product(c arg Id))), Field("products", ListType(ProductType), description = Some("Returns a list of all available products."), resolve = _.ctx.products)))

ྫ Sangria - αʔόʔͷىಈ-

GraphQLαʔό্ཱͪ͛Δͷ ͸ͦΕͳΓʹ͠ΜͲ͍… “

“

AWS AppSyncͱ͸ʁ • 2018೥ʹެ։͞ΕͨϑϧϚωʔδυͳGraphQLαʔϏε ඞཁͳσʔλͷΈ ͷऔಘ ෳ਺ͷσʔλιʔε ΁ͷΞΫηε ΞΫηε੍ޚ • DynamoDB • ElasticSearch • Lambda • 3rd Party API • Cognito • IAM Role • API Key

Client for GraphQL “

Apollo Client • GraphQLͷ ΫϥΠΞϯτϥΠϒϥϦ • ϑϨʔϜϫʔΫʹ߹Θ࣮ͤͨ૷ΛఏڙʢAngular, React, Vue.js…ʣ

ैདྷͷσʔλϑΣον GraphQL {ࡾ} GET /v1/persons GET /v2/accounts POST /application POST /application POST /graphql εΩʔϚఆٛ ᶃ Apollo Clientͷઃఆ - App Sync΁ͷ ઀ଓ - hydrated() { const appsyncClient = new AWSAppSyncClient({ disableOffline: true, url: '', region: 'ap-northeast-1', auth: { type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS, jwtToken: async () => (await Auth.currentSession()) .getIdToken() .getJwtToken() }, }); this.apollo.setClient(appsyncClient as any); return appsyncClient.hydrated(); } } ᶃ AppSyncͷURLΛࢦ ᶄ AppSyncͷϦʔδϣϯΛࢦఆ ᶅ ೝূํ๏Λࢦఆ

ैདྷͷσʔλϑΣον GraphQL {ࡾ} GET /v1/persons GET /v2/accounts POST /application POST /application POST /graphql εΩʔϚఆٛ ᶄ Service - queryఆٛ - @Injectable({ providedIn: "root" }) export class ListApplicationsGQL extends Apollo.Query< Listapplications.Query, Listapplications.Variables> { document: any = gql` query listApplications { listApplications { items { id company_id itunesstore_id updated } } } `; } ᶄ queryΛఆٛ ᶃ QueryΛܧঝ

ैདྷͷσʔλϑΣον GraphQL {ࡾ} GET /v1/persons GET /v2/accounts POST /application POST /application POST /graphql εΩʔϚఆٛ ᶅ Component constructor( private listApplicationsGQL: ListApplicationsGQL ) {} ngOnInit(): void { this.findApplications(); } private findApplications(): void { this.listApplicationsGQL.watch().valueChanges.pipe( map(x => x.data.listApplications.items) ).subscribe(res => this.dataSource = res); } ᶃ serviceΛੜ੒ ᶄ watch()Ͱݺͼग़͠

• GraphQLεΩʔϚ͔ΒఆٛϑΝΠϧΛੜ੒͢Δπʔϧ GraphQL Code Generator

• *.graphqlϑΝΠϧ͔ΒTypescriptͷίʔυΛࣗಈͰੜ੒ͯ͘͠ΕΔ Schema͔Βίʔυͷࣗಈੜ੒ ैདྷͷσʔλϑΣον GraphQL {ࡾ} GET /v1/persons GET /v2/accounts POST /application POST /application POST /graphql εΩʔϚఆٛ yarn run graphql *.graphql graphql.ts

Demo !! “

AWS AppSync Resolvers GraphQL Client Angular+AppSync POST /graphql

POST /graphql Client AppSync ⁵ Resolvers GraphQL AWS AppSync Resolvers

Resolvers Client ⁵ AppSync Client POST /graphql GraphQL AWS AppSync

·ͱΊ • AWS Ͱ GraphQL΍ΔͳΒAppSyncͳΒ؆୯ʹ࡞੒Ͱ͖Δ • Apollo Client + Code GeneratorΛ࢖͑͹ࣗಈͰService·Ͱੜ੒ ͯ͘͠Δ • ٻΊΒΕΔαʔϏεཁ݅ʹΑͬͯ༻๏༻ྔ͸ద੾ʹબ୒͠Α͏

ࠓ೥ͦ͜GraphQL͸͡ΊͯΈΑ͏ THANK YOU