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

Transcript

1. Chucker Ͱ GraphQL ͷ௨৴ϩάΛݟ΍ͨ͘͢͠

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

   @ CyberAgent, Inc. • SHISHAMO ͱ͍͏όϯυΛṆѪͯ͠·͢ • ϥΠϒʹΑ͘ߦ͖·͢ɻࠓ೥ͷࢀઓ਺͕ 60 ऑʹ ͳΔ༧ఆɻ

3. tl;dr • issue: https://github.com/ChuckerTeam/chucker/issues/69 • pull request: https://github.com/ChuckerTeam/chucker/pull/70

4. Chucker ͱ͸ʁ • OkHttp ͷ௨৴ϩάΛऔͬͯҰཡͰදࣔͯ͘͠ΕΔπʔϧ • jgilfelt/chuck ͕͢Ͱʹ͋Δ͕ɺ2 ೥Ҏ্ߋ৽͞Ε͍ͯͳ͍ͷͰ fork

   ͞ΕɺผϦ ϙδτϦͰߋ৽͞Ε࢝Ίͨ

5. Chucker ͷ͍͍ͱ͜Ζ • OkHttp 4 ରԠࡁΈ • Ϩεϙϯεͷதʹը૾͕͋Δ৔߹ɺͪΌΜͱදࣔͯ͘͠ΕΔ ʢόΠφϦܗࣜʹͳ Βͳ͍ʣ

   • ςΩεταʔνͨ͠ͱ͖ʹҾ͔͔ͬͬͨจࣈྻ͕ ϋΠϥΠτ͞ΕΔ Α͏ʹͳͬͨ

6. Chucker ͷ͍·͍ͪͩͬ ͨͱ͜Ζ • GraphQL ͷ௨৴ϩά͕͢΂ͯ 200 POST / <endpoint-name>

   ʹͳΔ •ͳͥ͜͏ͳΔͷ͔ʁ

7. GraphQL ͸ ୯ҰΤϯυϙΠϯτ͕ਪ঑ ͞Ε͍ͯΔ1 1 https://graphql.org/learn/serving-over-http/#uris-routes

8. ϓϧϦΫΛ౤͛Δ͜ͱʹͨ͠

9. ·ͣ issue Ͱ૬ஊ • ࣮૷ํ๏ͷೝࣝΛ͢Γ߹ΘͤΔͨΊɺissue Ͱ૬ஊ • ݁Ռɺ ΤϯυϙΠϯτͷදه͸࢒ͭͭ͠ɺoperationName ͱ

   GraphQL ͷΞΠί ϯΛදࣔ͢Δܗࣜ Ͱܾఆ • operationName : Ϩεϙϯεϔομʔʹ͋ΓɺͦΕΛ࢖͏͜ͱͰͲͷϦιʔε Λࢀর͔ͨ͠൑அͰ͖Δ2 2 https://graphql.org/learn/queries/#operation-name

10. ࣮૷ • طଘͷαϯϓϧΞϓϦͰ 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) }

11. ࣮૷Ͱࢦఠ͞Εͨͱ͜Ζ • ͳΔ΂͘αʔυύʔςΟͷϥΠϒϥϦೖΕͳ͍ • ϥΠϒϥϦ͸ ݴޠ࢓༷ʹґଘ͢Δ΂͖ • retrofit-graphql ࡟আ •

    ఆٛͨ͠ .graphql ϑΝΠϧΛ΋ͱʹ࢖͏ΫΤϦΛࢦఆ͍͕ͯͨ͠ɺϦΫΤετΛ ૹΔ͚ͩͩͬͨΒඞཁͳ͍ʢϥΠϒϥϦͰ࢖༻͍ͯͨ͠ʣ • json Λ࡞ͬͯ POST ͯ͠΋ಉ݁͡ՌʹͳΔ • .graphql ϑΝΠϧΛ͢΂ͯ࡟আͯ͠ɺPOST ༻ͷ JSON Λผʹఆٛͯ͠࢖༻

12. ͜͏ͳΓ·ͨ͠ ·ͩमਖ਼தͰ͕͢ɺ3.1.0 Ͱ͜͏ͳΔ༧ఆͰ͢ɻ

13. ·ͱΊ • 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