Introduction to using GraphQL for a bit

by Kazuki Ohashi

Slide 1

Slide 1 text

ͪΐͬͱ࢖͍ͨ͘ͳΔ (SBQI2-ೖ໳ -BSBWFM3FBDU ୈճΏΔ͸ͪJU(SBQI2-ʹ͍ͭͯΏΔ͘࿩͢ େڮҰथ!L[LPIBTIJ

Slide 2

Slide 2 text

ࣗݾ঺հ େڮҰथ!L[LPIBTIJ w '*4.גࣜձࣾ$50 w ϓϩμΫτ։ൃ͕޷͖ w -BSBWFM3FBDU0,3

Slide 3

Slide 3 text

ຊ೔ͷ಺༰ w (SBQI2-ΛͳΜͱͳ͘͸஌ͬͯΔঢ়ଶ͔Βͪΐͬͱ࢖ͬͯ ݟ͍ͨͳͱࢥ͑ΔΑ͏ͳ಺༰ w ࡉ͔͍࢓༷ͷઆ໌͸͠ͳ͍ͷͰɺڵຯ͋Δํ͸  ผ్ௐ΂ͯͶʂʂ w ࠓճ͋·Γઆ໌͠ͳ͍΋ͷ  ϖʔδωʔγϣϯ &EHFͱ/PEF  

Slide 4

Slide 4 text

(SBQI2-ͱ͸ʁ

Slide 5

Slide 5 text

ʮεΩʔϚʯͷఆٛʹैͬͯɺΫϥΠΞϯτଆ͕ཉ͍͠৘ใΛ ʮΫΤϦʔʯͷܗࣜͰ౉͢ ΫΤϦʔ HSBQIRM جຊతʹ"1*ͷड͚ޱ͸ͻͱͭʂ

Slide 6

Slide 6 text

4DIFNBͱ͸ʁ w ͲͷσʔλΛ΍ΓͱΓ͢Δ͔ ͷ಺༰ΛܾΊΔ #BDLFOEଆ w ϑϩϯτΤϯυͱόοΫΤϯ υͷܖ໿ type Query { hero: Hero } type Hero { name: String friends: [Friend] } type Friend { name: String age: Int address: String } ༧໿ޠʂSPVUFͷఆٛΈ͍ͨͳ΋Μ ಠࣗͷܕΛఆٛͰ͖Δ ෳ਺ฦ͢৔߹͕͋Δ৔߹͸഑ྻʹ͢Δ

Slide 7

Slide 7 text

2VFSZͱ͸ʁ w (FUϝιουͷ࣌ར༻ w ཉ͍͠σʔλ͚ͩهड़͢Ε͹ ͦΕ͕ฦͬͯ͘Δ { hero { name friends { name } } } ཉ͍͠ΦϒδΣΫτͷ ϑΟʔϧυ໊Λॻ͘ { hero(id: 1) { name friends { name } } } ˞εΩʔϚ͸มߋ͢Δඞཁ͋Γ ৚݅Λࢦఆ͢Δ͜ͱ΋Ͱ͖Δ

Slide 8

Slide 8 text

.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

Slide 9

Slide 9 text

*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ʹ·ͱΊΔ

Slide 10

Slide 10 text

&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Λ࣋ͭ

Slide 11

Slide 11 text

࣮ࡍͷσʔλͷσϞ

Slide 12

Slide 12 text

-BSBWFMͰͷ࣮૷

Slide 13

Slide 13 text

ϥΠϒϥϦͷબఆ w ࠓճ͸-JHIUIPVTFΛར༻  IUUQTHJUIVCDPNOVXBWFMJHIUIPVTF w (SBQI2-ϥΠΫʹεΩʔϚ͕ఆٛͰ͖Δ w طଘͷΞʔΩςΫνϟͰ΋͙͢ʹऔΓೖΕΒΕΔ

Slide 14

Slide 14 text

ΞʔΩςΫνϟ ɾεΩʔϚͷఆٛ ɾड͚ޱͷ४උ ɾόϦσʔγϣϯ มߋલ มߋޙ

Slide 15

Slide 15 text

εΩʔϚͷஔ͖৔ॴ w SPVUFTHSBQIRMʹఆٛ w ड͚ޱ͝ͱʹ༻ҙ͢Δ΄͏ ͕Αͦ͞͏

Slide 16

Slide 16 text

εΩʔϚͷఆٛ 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! } ϛυϧ΢ΣΞ͕࢖͑Δ Ϟσϧͦͷ··࢖͏ͳΒ͜͜ͰఆٛͰ͖Δ

Slide 17

Slide 17 text

ಠࣗͷఆٛ 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ʹఆ͕ٛͳ͍΋ͷ

Slide 18

Slide 18 text

6TF$BTF͔Βͷฦ٫ client_id); } } Ϩεϙϯεͷத਎͸ܕʹม׵͞ΕΔ

Slide 19

Slide 19 text

3FBDUͰͷ࣮૷

Slide 20

Slide 20 text

ϥΠϒϥϦͷબఆ w ࠓճ͸3FBDU"QPMMPΛར༻  IUUQTHJUIVCDPNBQPMMPHSBQIRMSFBDUBQPMMP w 'BDFCPPL͕ग़͍ͯ͠ΔެࣜͷϥΠϒϥϦ3FMBZΑΓɺ  Θ͔Γ΍ͦ͢͏ͳͷͰબ୒

Slide 21

Slide 21 text

ΞʔΩςΫνϟ "QPMMP͕৭ʑ΍ͬͯ͘ΕΔͨΊɺҎલΑΓؔ࿈͢Δॲཧ͕ඞཁͳ͍

Slide 22

Slide 22 text

ΫΤϦʔͷఆٛ 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 } } } } } `;

Slide 23

Slide 23 text

ΫΤϦʔͷൃߦ render() { return (

{({ data, error, loading, client, refetch }) => { if (error) return

{error.toString()}

; 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 (

{data.influencer_name}

); }); } return (

. . . 2VFSZλά಺ͰΫΤϦʔΛൃߦͰ͖Δ Ϩεϙϯεσʔλ͕དྷΔͷͰ  ͍ͭ΋௨Γͷॲཧ

Slide 24

Slide 24 text

Α͔ͬͨࣄ

Slide 25

Slide 25 text

εΩʔϚத৺։ൃ w εΩʔϚΛڞ௨ݴޠͱ͠ɺϑϩϯτΤϯυͱόοΫΤϯυ Ͱ࢓༷ͷڞ௨Խ͕௙Γͦ͏ w Ҏલ͔Β4XBHHFSΛ࢖͍͕ͬͯͨɺඞਢͷमਖ਼Ͱ͸ͳ͍ͨ Ί์ஔؾຯʹͳ͍ͬͯͨ w ૹͬͯ͸͍͚ͳ͍ΧϥϜͷνΣοΫ΋༰қʹͳΓͦ͏

Slide 26

Slide 26 text

ཉ͍͠৘ใΛཉ͍࣌͠ʹ w ϑϩϯτΤϯυ΋৘ใ͕গͳ͘ͳخ͍͠ w αʔόʔαΠυ΋৘ใ͕গͳ͘ͳΓخ͍͠ w Ϣʔβʔʢϒϥ΢βʣ΋৘ใ͕গͳ͘ͳΓخ͍͠

Slide 27

Slide 27 text

ͦͷଞ w QMBZHSPVOE͕ਆπʔϧ w -JHIUIPVTF͚ͩͰݟΕ͹։ൃ͸׆ൃ

Slide 28

Slide 28 text

՝୊

Slide 29

Slide 29 text

ॲཧ଎౓ͷ໰୊ w όοΫΤϯυ͸-JHIUIPVTFͷม׵ʹΑΓɺdNT஗ ͘ͳΔ w ϑϩϯτଆ͸ࠓͷͱ͜Ζ͸໰୊ͳͦ͞͏

Slide 30

Slide 30 text

ॲཧ଎౓ͷվળํ๏ w εέʔϧΞοϓ  ຊ൪ͱಉ͡؀ڥͰ͸·ͩࢼͯ͠ͳ͍ͷͰͦͷ··ɾɾ w ϥΠϒϥϦͷมߋ  -BSBWFMͱ૬ੑ͍͍΍ͭ୳͢ͷେมͳͷͰ-JHIUIPVTFͷ· ·͕͍͍ɾɾ w ଞͷϛυϧ΢ΣΞͰվળ  (SBQI2-ʹ͠ͳ͍৔߹Ͱ΋༗ޮͳͨΊͪ͜ΒͨΊ͢

Slide 31

Slide 31 text

վળᾇ &MBTUJD4FBSDI ࣮ࡍʹࢼͯ͠ݟͨ ɾdNTૣ͘ͳͬͨ ɾӡ༻͕େม͚ͩͲɺΑͦ͞͏

Slide 32

Slide 32 text

վળᾈ 7BSOJTI 7BSOJTIΛೖΕΔ ɾϨεϙϯεࣗମΛશͯΩϟογϡ༧ఆ ɾ"VUIपΓͷઃఆ͚ͩؾΛ͚ͭΔ ɾ̍ճ໨Ωϟογϡ͞ΕΔਓҎ֎͸͓ͦΒ͘ɺ ̍̌෼ͷ̍Ҏ্͸ૣ͘ͳΔͱ༧૝

Slide 33

Slide 33 text

վળᾉ "QBDI*HOJUF "QBDIF*HOJUFΛೖΕΔ ɾσʔλϕʔεࣗମΛ෼ࢄΩϟογϡ͢Δ ɾޮՌ͸͋Γͦ͏ͩ͠ɺ  ɹ&4ΑΓӡ༻͠΍ͦ͢͏ʁ