AppSync_Apollo_GraphQL.pdf

AppSync + ApolloではじめるGraphQL

1. AppSync + Apollo Ͱ͸͡ΊΔGraphQL PRESENTATION BY Hiroyuki Nishi Jan 18 2019 ng-kyoto Angular Meetup #9
2. ࠓ೔͓࿩͢͠Δ͜ͱ • GraphQLʹ͍ͭͯͷ஌ࣝͷ੔ཧ • AWS AppSyncͱApolloͷ঺հ • DEMO: AWS AppSync + Apollo ஫ҙ • AWSͷαʔϏε༻ޠ͕ଟ͘Ͱ͖ͯ·͢ɻ
3. • ੢ ༔೭ @ʢ Nishi Hiroyuki ʣ • Angularͱͷ෇͖߹͍ʢ30 monthsʣ • MOTEX Inc. @ σβΠϯ՝ • AWS, Scala, DDDʹ΋खग़͢͠Δ Who am I ?
4. • FacebookʹΑΓ։ൃ͞ΕͨAPI༻ͷQueryݴޠ • σʔλऔಘܥͷ query ɺσʔλߋ৽ܥͷ mutation ɺΠϕϯτͷ ௨஌Ͱ͋Δ subscription ͷ3छྨ͕͋Δ GraphQLͱ͸ʁ
5. GraphQLͷొ৔ͨ͠എܠ • RESTͷ3ͭͷ՝୊ ϝϯςφϯε (API࢓༷ͷυΩϡϝ ϯτͱ࣮૷ͷζϨɺ υΩϡϝϯτ؅ཧ) ϥ΢ϯυτϦοϓ (1ϖʔδΛදࣔ͢Δ ͷʹෳ਺ͷAPIΛୟ͍ ͯ৘ใΛऔಘ͠ͳ͚ Ε͹ͳΒͳ͍) ΦʔόʔϑΣον (ඞཁͳ৘ใҎ֎ͷ σʔλ΋෇ਵͯ͠ฦ ͞ΕΔ) 01 02 03
6. • GraphQL ͳ API ͕ఏڙ͢ΔΤϯυϙΠϯτ͸ʮ/graphqlʯͷΈ • versionless APIʢAdd Only Approachʣ ैདྷͷσʔλϑΣον GraphQL {ࡾ} GET /v1/persons GET /v2/accounts POST /application POST /application POST /graphql εΩʔϚఆٛ GraphQLͷಛ௃ - REST ͱͷҧ͍-
7. 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͚ͩཉ͍͠৔߹
8. 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ͷಛ௃ - ܕϨϕϧͷݕূ -
9. • 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 • ෳ਺ͷݴޠͰαϙʔτ͞Ε͍ͯΔ
10. ྫ 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] }
11. ྫ 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)))
12. ྫ Sangria - αʔόʔͷىಈ-
13. GraphQLαʔό্ཱͪ͛Δͷ ͸ͦΕͳΓʹ͠ΜͲ͍… “
14. “
15. AWS AppSyncͱ͸ʁ • 2018೥ʹެ։͞ΕͨϑϧϚωʔδυͳGraphQLαʔϏε ඞཁͳσʔλͷΈ ͷऔಘ ෳ਺ͷσʔλιʔε ΁ͷΞΫηε ΞΫηε੍ޚ • DynamoDB • ElasticSearch • Lambda • 3rd Party API • Cognito • IAM Role • API Key
16. Client for GraphQL “
17. Apollo Client • GraphQLͷ ΫϥΠΞϯτϥΠϒϥϦ • ϑϨʔϜϫʔΫʹ߹Θ࣮ͤͨ૷ΛఏڙʢAngular, React, Vue.js…ʣ
18. ैདྷͷσʔλϑΣον 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: '<API 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ͷϦʔδϣϯΛࢦఆ ᶅ ೝূํ๏Λࢦఆ
19. ैདྷͷσʔλϑΣον 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Λܧঝ
20. ैདྷͷσʔλϑΣον 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()Ͱݺͼग़͠
21. • GraphQLεΩʔϚ͔ΒఆٛϑΝΠϧΛੜ੒͢Δπʔϧ GraphQL Code Generator
22. • *.graphqlϑΝΠϧ͔ΒTypescriptͷίʔυΛࣗಈͰੜ੒ͯ͘͠ΕΔ Schema͔Βίʔυͷࣗಈੜ੒ ैདྷͷσʔλϑΣον GraphQL {ࡾ} GET /v1/persons GET /v2/accounts POST /application POST /application POST /graphql εΩʔϚఆٛ yarn run graphql *.graphql graphql.ts
23. Demo !! “
24. AWS AppSync Resolvers GraphQL Client Angular+AppSync POST /graphql
25. POST /graphql Client AppSync ⁵ Resolvers GraphQL AWS AppSync Resolvers
26. Resolvers Client ⁵ AppSync Client POST /graphql GraphQL AWS AppSync
27. ·ͱΊ • AWS Ͱ GraphQL΍ΔͳΒAppSyncͳΒ؆୯ʹ࡞੒Ͱ͖Δ • Apollo Client + Code GeneratorΛ࢖͑͹ࣗಈͰService·Ͱੜ੒ ͯ͘͠Δ • ٻΊΒΕΔαʔϏεཁ݅ʹΑͬͯ༻๏༻ྔ͸ద੾ʹબ୒͠Α͏
28. ࠓ೥ͦ͜GraphQL͸͡ΊͯΈΑ͏ THANK YOU