Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Chucker で GraphQL の通信ログを見やすくした / Made GraphQL log easier to read on Chucker

Ryo.Nitami
August 27, 2019
810

Chucker で GraphQL の通信ログを見やすくした / Made GraphQL log easier to read on Chucker

@ potatotips #64

Ryo.Nitami

August 27, 2019
Tweet

Transcript

  1. ͜͏͍͏ऀͰ͢ • Ryo Nitami (a.k.a tummy) • Mobile App Engineer

    @ CyberAgent, Inc. • SHISHAMO ͱ͍͏όϯυΛṆѪͯ͠·͢ • ϥΠϒʹΑ͘ߦ͖·͢ɻࠓ೥ͷࢀઓ਺͕ 60 ऑʹ ͳΔ༧ఆɻ
  2. ·ͣ issue Ͱ૬ஊ • ࣮૷ํ๏ͷೝࣝΛ͢Γ߹ΘͤΔͨΊɺissue Ͱ૬ஊ • ݁Ռɺ ΤϯυϙΠϯτͷදه͸࢒ͭͭ͠ɺoperationName ͱ

    GraphQL ͷΞΠί ϯΛදࣔ͢Δܗࣜ Ͱܾఆ • operationName : Ϩεϙϯεϔομʔʹ͋ΓɺͦΕΛ࢖͏͜ͱͰͲͷϦιʔε Λࢀর͔ͨ͠൑அͰ͖Δ2 2 https://graphql.org/learn/queries/#operation-name
  3. ࣮૷ • طଘͷαϯϓϧΞϓϦͰ Retrofit ͕࢖ΘΕ͍ͯͨͷͰ retrofit-graphql Ͱ࣮૷ • ϨϏϡʔΛ͓ئ͍ͨ͠Β Change

    Request ͕ val request = QueryContainerBuilder().putVariable("first", 10) with(SampleApiService.getGraphQLInstance(getClient(this))) { getAllFilms(request.apply { setOperationName("AllFilms") }).enqueue(cb) getAllPeople(request.apply { setOperationName("AllPeople") }).enqueue(cb) getAllPlanets(request.apply { setOperationName("AllPlanets") }).enqueue(cb) getAllSpacies(request.apply { setOperationName("AllSpacies") }).enqueue(cb) getAllStarships(request.apply { setOperationName("AllStarships") }).enqueue(cb) getAllVehicles(request.apply { setOperationName("AllVehicles") }).enqueue(cb) }
  4. ࣮૷Ͱࢦఠ͞Εͨͱ͜Ζ • ͳΔ΂͘αʔυύʔςΟͷϥΠϒϥϦೖΕͳ͍ • ϥΠϒϥϦ͸ ݴޠ࢓༷ʹґଘ͢Δ΂͖ • retrofit-graphql ࡟আ •

    ఆٛͨ͠ .graphql ϑΝΠϧΛ΋ͱʹ࢖͏ΫΤϦΛࢦఆ͍͕ͯͨ͠ɺϦΫΤετΛ ૹΔ͚ͩͩͬͨΒඞཁͳ͍ʢϥΠϒϥϦͰ࢖༻͍ͯͨ͠ʣ • json Λ࡞ͬͯ POST ͯ͠΋ಉ݁͡ՌʹͳΔ • .graphql ϑΝΠϧΛ͢΂ͯ࡟আͯ͠ɺPOST ༻ͷ JSON Λผʹఆٛͯ͠࢖༻
  5. ·ͱΊ • Chucker ʹ GraphQL ͷ௨৴ϩάΛݟ΍͘͢͢Δ PR Λૹͬͨ3 • ଞݴޠͰศརͦ͏ͳπʔϧ͕͋Ε͹ɺϞόΠϧଆʹͲΜͲΜҠ২͍͖͍ͯͨ͠

    • Facebook ੡͔ͩΒ͔ɺJavaScript ͋ͨΓͷίϛϡχςΟ͕׆ൃ • ྫɿQuipper ͞Μͷσόοάπʔϧ4 4 https://quipper.hatenablog.com/entry/2019/08/13/making-tool-to-debug-graphql-client 3 https://github.com/ChuckerTeam/chucker/pull/70