AppSync_Apollo_GraphQL.pdf

A743088c939f61a0d1f3103b63ef3b8e?s=47 hiroyuki.nishi
January 19, 2019
630

 AppSync_Apollo_GraphQL.pdf

AppSync + ApolloではじめるGraphQL

A743088c939f61a0d1f3103b63ef3b8e?s=128

hiroyuki.nishi

January 19, 2019
Tweet

Transcript

  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. AWS AppSyncͱ͸ʁ • 2018೥ʹެ։͞ΕͨϑϧϚωʔδυͳGraphQLαʔϏε ඞཁͳσʔλͷΈ ͷऔಘ ෳ਺ͷσʔλιʔε ΁ͷΞΫηε ΞΫηε੍ޚ •

    DynamoDB • ElasticSearch • Lambda • 3rd Party API • Cognito • IAM Role • API Key
  15. Client for GraphQL “

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

  17. ैདྷͷσʔλϑΣον 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ͷϦʔδϣϯΛࢦఆ ᶅ ೝূํ๏Λࢦఆ
  18. ैདྷͷσʔλϑΣον 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Λܧঝ
  19. ैདྷͷσʔλϑΣον 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()Ͱݺͼग़͠
  20. • GraphQLεΩʔϚ͔ΒఆٛϑΝΠϧΛੜ੒͢Δπʔϧ GraphQL Code Generator

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

    POST /application POST /application POST /graphql εΩʔϚఆٛ yarn run graphql *.graphql graphql.ts
  22. Demo !! “

  23. AWS AppSync Resolvers GraphQL Client Angular+AppSync POST /graphql

  24. POST /graphql Client AppSync ⁵ Resolvers GraphQL AWS AppSync Resolvers

  25. Resolvers Client ⁵ AppSync Client POST /graphql GraphQL AWS AppSync

  26. ·ͱΊ • AWS Ͱ GraphQL΍ΔͳΒAppSyncͳΒ؆୯ʹ࡞੒Ͱ͖Δ • Apollo Client + Code

    GeneratorΛ࢖͑͹ࣗಈͰService·Ͱੜ੒ ͯ͘͠Δ • ٻΊΒΕΔαʔϏεཁ݅ʹΑͬͯ༻๏༻ྔ͸ద੾ʹબ୒͠Α͏
  27. ࠓ೥ͦ͜GraphQL͸͡ΊͯΈΑ͏ THANK YOU