Introduction to using GraphQL for a bit

Transcript

1. ͪΐͬͱ࢖͍ͨ͘ͳΔ (SBQI2-ೖ໳ -BSBWFM 3FBDU 
   ୈճΏΔ͸ͪJU
   (SBQI2-ʹ͍ͭͯΏΔ͘࿩͢
   େڮ
   Ұथ!L[LPIBTIJ
2. ࣗݾ঺հ େڮ
   Ұथ!L[LPIBTIJ w '*4.גࣜձࣾ$50
   w ϓϩμΫτ։ൃ͕޷͖
   w -BSBWFM3FBDU0,3
3. ຊ೔ͷ಺༰ w (SBQI2-ΛͳΜͱͳ͘͸஌ͬͯΔঢ়ଶ͔Βͪΐͬͱ࢖ͬͯ ݟ͍ͨͳͱࢥ͑ΔΑ͏ͳ಺༰
   w ࡉ͔͍࢓༷ͷઆ໌͸͠ͳ͍ͷͰɺڵຯ͋Δํ͸
 ผ్ௐ΂ͯͶʂʂ
   w ࠓճ͋·Γઆ໌͠ͳ͍΋ͷ
 
   ϖʔδωʔγϣϯ &EHFͱ/PEF 

4. (SBQI2-ͱ͸ʁ
5. ʮεΩʔϚʯͷఆٛʹैͬͯɺΫϥΠΞϯτଆ͕ཉ͍͠৘ใΛ
   ʮΫΤϦʔʯͷܗࣜͰ౉͢ ΫΤϦʔ HSBQIRM جຊతʹ"1*ͷड͚ޱ͸ͻͱͭʂ
6. 4DIFNBͱ͸ʁ w ͲͷσʔλΛ΍ΓͱΓ͢Δ͔ ͷ಺༰ΛܾΊΔ #BDLFOEଆ
   w ϑϩϯτΤϯυͱόοΫΤϯ υͷܖ໿ type Query { hero: Hero } type Hero { name: String friends: [Friend] } type Friend { name: String age: Int address: String } ༧໿ޠʂSPVUFͷఆٛΈ͍ͨͳ΋Μ ಠࣗͷܕΛఆٛͰ͖Δ ෳ਺ฦ͢৔߹͕͋Δ৔߹͸഑ྻʹ͢Δ
7. 2VFSZͱ͸ʁ w (FUϝιουͷ࣌ར༻
   w ཉ͍͠σʔλ͚ͩهड़͢Ε͹ ͦΕ͕ฦͬͯ͘Δ { hero { name friends { name } } } ཉ͍͠ΦϒδΣΫτͷ
   ϑΟʔϧυ໊Λॻ͘ { hero(id: 1) { name friends { name } } } ˞
   εΩʔϚ͸มߋ͢Δඞཁ͋Γ ৚݅Λࢦఆ͢Δ͜ͱ΋Ͱ͖Δ
8. .VUBUJPOͱ͸ʁ extend type Mutation { createClientAccount( client_id: Int @rules(apply: ["required"]) staff_name: String @rules(apply: ["required"]) tel: String @rules(apply: ["required"]) department: String @rules(apply: ["required"]) email: String @rules(apply: ["required"]) password: String @rules(apply: ["required"]) role: Int @rules(apply: ["required"]) ): ClientAccount @create(model: "App\\Models\\ClientAccount") } w 1045165%&-&5&ϝιουͷ࣌ར༻
   w ༧໿ޠ ϝιου ܕͱόϦσʔγϣϯ
 Λࢦఆ -BSBWFM
9. *OQVUͱ͸ʁ extend type Mutation { createClientAccount2(input: CreateClientAccount): ClientAccount
 @create(model: "App\\Models\\ClientAccount", flatten: true) } input CreateClientAccount { client_id: Int @rules(apply: ["required"]) staff_name: String @rules(apply: ["required"]) tel: String @rules(apply: ["required"]) department: String @rules(apply: ["required"]) email: String @rules(apply: ["required"]) password: String @rules(apply: ["required"]) role: Int @rules(apply: ["required"]) } w .VUBUJPOͳͲͰར༻͢Δೖྗ஋Λ0CKFDUʹ·ͱΊΔ
10. &EHFͱ/PEF type InfluencerSearchPage implements Page { paginatorInfo: PaginatorInfo edges: [InfluencerSearchEdge] } type InfluencerSearchEdge implements Edge { cursor: ID! node: InfluencerSearchNode } w ϖʔδωʔγϣϯ࣌ʹ&EHFͱ/PEFͷ֓೦Λར༻
    w &EHF͸/PEFΛ΋ͪɺ/PEF͸$VSTPSΛ࣋ͭ
11. ࣮ࡍͷσʔλͷσϞ
12. -BSBWFMͰͷ࣮૷
13. ϥΠϒϥϦͷબఆ w ࠓճ͸-JHIUIPVTFΛར༻
 IUUQTHJUIVCDPNOVXBWFMJHIUIPVTF
    w (SBQI2-ϥΠΫʹεΩʔϚ͕ఆٛͰ͖Δ
    w طଘͷΞʔΩςΫνϟͰ΋͙͢ʹऔΓೖΕΒΕΔ
14. ΞʔΩςΫνϟ ɾεΩʔϚͷఆٛ
    ɾड͚ޱͷ४උ
    ɾόϦσʔγϣϯ มߋલ มߋޙ
15. εΩʔϚͷஔ͖৔ॴ w SPVUFTHSBQIRMʹఆٛ
    w ड͚ޱ͝ͱʹ༻ҙ͢Δ΄͏ ͕Αͦ͞͏
16. εΩʔϚͷఆٛ extend type Query @group(middleware: ["auth:api"]) { client_account(id: ID @eq): ClientAccount @find(model: "App\\Models\\ClientAccount") client_accounts: [ClientAccount!]! @all } type ClientAccount { id: ID! client_id: Int! staff_name: String! tel: String! department: String! email: String! role: Int! created_at: DateTime! updated_at: DateTime! } ϛυϧ΢ΣΞ͕࢖͑Δ Ϟσϧͦͷ··࢖͏ͳΒ͜͜ͰఆٛͰ͖Δ
17. ಠࣗͷఆٛ extend type Query @group(middleware: ["auth:api"]) { fetchProjects: [PrProject!]! } type PrProject { id: ID! item_id: Int! project_type: Int! name: String! media_type: Int! item_detail: String! item_image: String! hash_tags: String } .PEFMTʹఆ͕ٛͳ͍΋ͷ
18. 6TF$BTF͔Βͷฦ٫ <?php namespace App\Http\GraphQL\Queries; use App\Domains\UseCases\FetchProjectList; use GraphQL\Type\Definition\ResolveInfo; use Nuwave\Lighthouse\Support\Contracts\GraphQLContext; class FetchProjects extends BaseQuery { public function resolve($rootValue, array $args, GraphQLContext $context = null, ResolveInfo $resolveInfo) { $usecase = app(FetchProjectList::class); return $usecase($this->client_id); } } Ϩεϙϯεͷத਎͸ܕʹม׵͞ΕΔ
19. 3FBDUͰͷ࣮૷
20. ϥΠϒϥϦͷબఆ w ࠓճ͸3FBDU
    "QPMMPΛར༻
 IUUQTHJUIVCDPNBQPMMPHSBQIRMSFBDUBQPMMP
    w 'BDFCPPL
    ͕ग़͍ͯ͠ΔެࣜͷϥΠϒϥϦ3FMBZΑΓɺ
 Θ͔Γ΍ͦ͢͏ͳͷͰબ୒
21. ΞʔΩςΫνϟ "QPMMP͕৭ʑ΍ͬͯ͘ΕΔͨΊɺҎલΑΓؔ࿈͢Δॲཧ͕ඞཁͳ͍
22. ΫΤϦʔͷఆٛ const GET_SEARCH_INFLUENCER = gql` query ($page: Int!, $name: String){ query_search_influencers(page: $page, influencer_name: $name) { paginatorInfo { total count currentPage } edges { node { id influencer_name instagram_posts { id code comment_count is_video date } } } } } `;
23. ΫΤϦʔͷൃߦ render() { return ( <div className="GraphList3" style={{ width: "500px" }}> <Query query={GET_SEARCH_INFLUENCER} variables={{ page: 1, name: "ా" }} > {({ data, error, loading, client, refetch }) => { if (error) return <p>{error.toString()}</p>; let pageInfo, graphData, dataElms; if (!loading) { pageInfo = data.query_search_influencers.paginatorInfo; graphData = data.query_search_influencers.edges; dataElms = graphData && graphData.map((v) => { let data = v.node; return ( <div key={data.id}>{data.influencer_name}</div> ); }); } return ( <div className="GraphList" style={{ padding: "40px"}}> . . . 2VFSZλά಺ͰΫΤϦʔΛൃߦͰ͖Δ Ϩεϙϯεσʔλ͕དྷΔͷͰ
 ͍ͭ΋௨Γͷॲཧ
24. Α͔ͬͨࣄ
25. εΩʔϚத৺։ൃ w εΩʔϚΛڞ௨ݴޠͱ͠ɺϑϩϯτΤϯυͱόοΫΤϯυ Ͱ࢓༷ͷڞ௨Խ͕௙Γͦ͏
    w Ҏલ͔Β4XBHHFSΛ࢖͍͕ͬͯͨɺඞਢͷमਖ਼Ͱ͸ͳ͍ͨ Ί์ஔؾຯʹͳ͍ͬͯͨ
    w ૹͬͯ͸͍͚ͳ͍ΧϥϜͷνΣοΫ΋༰қʹͳΓͦ͏
26. ཉ͍͠৘ใΛཉ͍࣌͠ʹ w ϑϩϯτΤϯυ΋৘ใ͕গͳ͘ͳخ͍͠
    w αʔόʔαΠυ΋৘ใ͕গͳ͘ͳΓخ͍͠
    w Ϣʔβʔʢϒϥ΢βʣ΋৘ใ͕গͳ͘ͳΓخ͍͠
27. ͦͷଞ w QMBZHSPVOE͕ਆπʔϧ
    w -JHIUIPVTF͚ͩͰݟΕ͹։ൃ͸׆ൃ
28. ՝୊
29. ॲཧ଎౓ͷ໰୊ w όοΫΤϯυ͸-JHIUIPVTFͷม׵ʹΑΓɺdNT஗ ͘ͳΔ
    w ϑϩϯτଆ͸ࠓͷͱ͜Ζ͸໰୊ͳͦ͞͏
30. ॲཧ଎౓ͷվળํ๏ w εέʔϧΞοϓ
 
    ຊ൪ͱಉ͡؀ڥͰ͸·ͩࢼͯ͠ͳ͍ͷͰͦͷ··ɾɾ
    w ϥΠϒϥϦͷมߋ
 
    -BSBWFMͱ૬ੑ͍͍΍ͭ୳͢ͷେมͳͷͰ-JHIUIPVTFͷ· ·͕͍͍ɾɾ
    w ଞͷϛυϧ΢ΣΞͰվળ
 
    (SBQI2-ʹ͠ͳ͍৔߹Ͱ΋༗ޮͳͨΊͪ͜ΒͨΊ͢
31. վળᾇ &MBTUJD4FBSDI ࣮ࡍʹࢼͯ͠ݟͨ
    ɾdNTૣ͘ͳͬͨ
    ɾӡ༻͕େม͚ͩͲɺΑͦ͞͏
32. վળᾈ 7BSOJTI 7BSOJTIΛೖΕΔ
    ɾϨεϙϯεࣗମΛશͯΩϟογϡ༧ఆ
    ɾ"VUIपΓͷઃఆ͚ͩؾΛ͚ͭΔ
    ɾ̍ճ໨Ωϟογϡ͞ΕΔਓҎ֎͸͓ͦΒ͘ɺ ̍̌෼ͷ̍Ҏ্͸ૣ͘ͳΔͱ༧૝
33. վળᾉ "QBDI
    *HOJUF "QBDIF
    *HOJUFΛೖΕΔ
    ɾσʔλϕʔεࣗମΛ෼ࢄΩϟογϡ͢Δ
    ɾޮՌ͸͋Γͦ͏ͩ͠ɺ
 ɹ&4ΑΓӡ༻͠΍ͦ͢͏ʁ