GraphQLを活用するツールやライブラリ / graphql-libraries

Transcript

1. GraphQLΛ׆༻͢ΔϥΠϒϥϦ&πʔϧ
2. πʔϧ
3. GraphQL Playground
4. GraphQL Playground ▸ GraphQLΛ࣮ߦ͢ΔΞϓϦ ▸ ϒϥ΢βͰಈ͘ ▸ όοΫΤϯυͷϥΠϒϥϦ ʹ૊Έࠐ·ΕͯΔ͜ͱ΋
5. Insomnia
6. Insomnia ▸ GraphQLΛ࣮ߦ͢ΔΞϓϦ(2) ▸ POSTMANͷGraphQL൛Έ͍ͨ ͳ΋ͷ ▸ POSTMAN΋ࠓGraphQLରԠ ͕βஈ֊ ▸ GraphQLͷIntrospectionʹରԠ ͓ͯ͠Γɺೖྗʹ༧ଌ͕ೖΔͨ Ίૢ࡞͠΍͍͢
7. ϥΠϒϥϦ
8. LightHouse
9. LightHouse ▸ LaravelϓϥάΠϯ ▸ ΈΜͳେ޷͖PHP ▸ GraphQLͷType͕EloquentͷϞσϧͱͳΔ ▸ @hasMany ΍ @belongToͷEloquentͷRelationShipΛ FieldͷDirectiveͱͯ͠࢖ ༻Ͱ͖Δ
10. ίʔυ LightHouse type User { id: ID! name: String! email: String posts: [Post!]! @hasMany } type Post { title: String! content: String! author: User @belongsTo } type Query { me: User @auth posts: [Post!]! @paginate } type Mutation { createPost( title: String @rules(apply: ["required", "min:2"]) content: String @rules(apply: ["required", "min:12"]) ): Post @create } ςʔϒϧʹͳΔ
11. ೝূػೳ LightHouse type Query { me: User @auth } LaravelͷAPI Authenticationͱ࿈ܞ͠ɺࣗ෼ͷUserϞσϧΛฦ͢ίʔ υɺAPIΛࣗಈੜ੒͢Δ
12. ϖʔδωʔγϣϯ LightHouse type Query { posts: [Post!]! @paginate }
13. ಠࣗDirectiveͷ࡞੒ LightHouse <?php namespace App\GraphQL\Directives; use Closure; use GraphQL\Type\Definition\ResolveInfo; use Nuwave\Lighthouse\Schema\Values\FieldValue; use Nuwave\Lighthouse\Support\Contracts\Directive; use Nuwave\Lighthouse\Support\Contracts\FieldMiddleware; use Nuwave\Lighthouse\Support\Contracts\GraphQLContext; class UpperCaseDirective implements Directive, FieldMiddleware { public function name(): string { return 'upperCase'; } public function handleField(FieldValue $fieldValue, Closure $next): FieldValue { // FieldʹDirectiveΛهࡌͨ͠ͱ͖ͷڍಈ } } LightHouseͷDirective ʹՃ͑ͯPHPͰ ಠࣗDirectiveΛ࡞੒Ͱ͖Δ ֦ுੑ͕ແݶ
14. AWS AppSync
15. AWS AppSync ▸ GraphQLΛ࢖༻ͨ͠APIαʔόΛߏங͢ΔϚωʔδυܕαʔϏε ▸ GraphQLͷSchemaͷFieldʹAttach͢ΔResolverʹΑͬͯɺAWSͷ֤αʔϏε ͱ࿈ܞ͢Δ ▸ DynamoDB ▸ Lambda ▸ Amazon RDS ▸ Cognitoʢೝূج൫ʣ
16. Resolverઃఆ AWS AppSync Resolver Schema Workspaceͷranksऔಘ࣌ʹ DynamoDBͷRankTableΛࢀর͢Δ
17. RankTableͷResolver AWS AppSync ▸ϦΫΤετΛड͚औͬͯDynamoDBͷΫΤϦΛ࣮ߦ͢Δ Request Mapping Template ▸࣮ߦ݁ՌΛϨεϙϯεͱ͢ΔResponse Mapping Template ▸VTL(Velocity Template Language)Ͱॻ͘
18. RankTableͷRequestMappingTemplateʢVTLʣ AWS AppSync
19. RankTableͷRequestMappingTemplate AWS AppSync ݟͨ໨গͭ͠Βͦ͏ͳײ͚ͩ͡Ͳࣗಈੜ੒Ͱ͖Δ ଟগෳࡶͳΫΤϦΛ࢖༻͢ΔͱͳΔͱVTLॻ͘ඞཁ͸ग़ͯ͘Δ
20. AWS AppSync ▸ Cognito࿈ܞʹΑͬͯೝূपΓʹ΄΅ؾΛ࢖Θͳͯ͘Α͍ ▸ VTL͚ͩͰ͸Ͳ͏ʹ΋ͳΒͳ͍ෳࡶͳϩδοΫΛ࣮ߦ͍ͨ͠৔߹ɺResolverΛ LambdaʹAttach͢Δ͜ͱͰίʔυΛॻ͘͜ͱ΋Մೳ
21. ͍Ζ͍Ζͳπʔϧ͕͋ͬͯศར