$30 off During Our Annual Pro Sale. View Details »

Debugging Apollo iOS with Apollo Client Developer Tools

Debugging Apollo iOS with Apollo Client Developer Tools

Presentation for GraphQL Tokyo Meetup #9 Guest talk and lightning talks held on Dec. 2019.
https://www.meetup.com/ja-JP/GraphQL-Tokyo/events/266668493/

Ryosuke Ito

December 06, 2019
Tweet

More Decks by Ryosuke Ito

Other Decks in Programming

Transcript

  1. Debugging Apollo iOS with Apollo Client Developer Tools @manicmaniac

  2. Ryosuke Ito • iOS software engineer • Working for Quipper

    Ltd. @manicmaniac
  3. I’ve written a blog post related to this slide. https://bit.ly/2Y1sUDv

  4. ى What’s Apollo iOS?

  5. None
  6. Strongly typed Apollo generates Swift source code from query definitions

    (.graphql)
  7. query { posts { id title author { name }

    } } query { posts { title } } Smart cache If you already have queried You can query in cache • Even without Internet! • Even selections changed! ˠ
  8. ঝ What’s difficult?

  9. Networking is opaque There was no convenient way to see

    each query and its response. Fortunately Apollo introducedHTTPNetworkTransportDelegatesince0.15.0
 https://github.com/apollographql/apollo-ios/pull/257 But we still need some configurations to see them.
  10. Cache is opaque There’s no convenient way to see the

    cache tree.
  11. Hard to debug • We need a debugger to know

    the internal state of Apollo. • We need frequent communication with server-side developers.
  12. Web devs: When does the app perform this query? Me:

    Ah, let me see the code… Web devs: I got a weird error. Do you know why? Me: Can you lend me the device?
 Then tell me how to reproduce the problem.
  13. స How does Apollo JS client solve problems?

  14. None
  15. None
  16. Features • Embedded GraphiQL • Real-time query recording • Visualize

    cache tree • Full-text search in cache and more…
  17. How can I use this in iOS?

  18. open Apollo Client Developer Tools Apollo Client Request data
 via

    function call
  19. establish HTTP server and expose endpoints to get data open

    Apollo Client Developer Tools JavaScript object pretending Apollo client Request data
 via function call Request data via AJAX
  20. 1 week later

  21. https://github.com/manicmaniac/ApolloDeveloperKit

  22. None
  23. ݁ Have problems been solved?

  24. Easy to debug • We don’t need a debugger to

    know the internal state of Apollo. • We don’t need frequent communication with server-side developers.
  25. Web devs: When does the app perform this query? Me:

    You can see it in your browser. Web devs: I got a weird error. Do you know why? Me: You can see the reason in your browser.
  26. Thank you for listening!