GraphQL vs. (the) REST
1 like278 views
What comes to you if you want to have some fun with GraphQL? Join us for the meetup in Munich and enjoy the interesting talk about ‚GraphQL vs. (the) REST ‘. In this session our colleagues Tsvetan Nikolov (Senior Developer at coliquio) and Tom Sedlmeier (Senior Developer at coliquio) will discuss the basic concepts and how to use them. We will present you GraphQL on the backend and on the client side with Apollo.
![[DevDay 2017] Serverless Architecture - Speaker: Trung Huynh - Software Engin...](https://cdn.slidesharecdn.com/ss_thumbnails/trunghuynh-serverless-architecture-170420104031-thumbnail.jpg?width=560&fit=bounds)
![[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...](https://cdn.slidesharecdn.com/ss_thumbnails/binhphanreactjs-170420085708-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (19)
Similar to GraphQL vs. (the) REST (20)
Ad
Recently uploaded (20)
![Pixologic ZBrush Crack Plus Activation Key [Latest 2025] New Version](https://cdn.slidesharecdn.com/ss_thumbnails/fashionevolution2-250322112409-f76abaa7-250428124909-b51264ff-250504160528-fc2bb1c5-thumbnail.jpg?width=560&fit=bounds)
Ad
GraphQL vs. (the) REST
- 2. GRAPHQL VS. (THE) REST TSVETAN NIKOLOV TOM SEDLMEIER
- 3. WHAT IS THIS ABOUT
- 4. LET’S TRY TO DESIGN AND BUILD MVP PROJECT TOGETHER
- 8. GET /articles?limit=10 GET /leagues/3 GET /leagues/4 GET ………
- 9. LET’S MAKE A LIST OF ALL CHALLENGES SO FAR • Documentation? - No need. It’s just an MVP • Multiple server requests •What about overfetching data • What if we need device specific data?
- 10. Web version Mobile version
- 11. MEET
- 12. DEMO TIME!
- 13. INGREDIENTS • Running data store • Scheme • Resolvers • Use Graphiql to explore your data
- 14. PROS • statically typed • no over/under fetching • language & HTTP agnostic • completely decouples frontend from backend • documentation comes at no extra cost • can save bandwidth
- 15. CONS • not easy to implement network caching • working with file uploads is tricky • sometimes error reporting can be a bit cryptic • frontend team must switch to a GraphQL stack
- 16. HOW DOES GRAPHQL FIT SO FAR?
- 17. FIRST STEPS WITH A GRAPHQL CLIENT
- 18. HOW DO WE DEAL WITH DATA FETCHING IN THE FRONTEND?
- 19. ‣ results in a lot of API endpoints ‣ „chatty“ ‣ overfetching: often you don’t need the complete data set ‣ care about client caching and normalization ‣ frontend & backend (deploy) strongly correlated REST API ARCHITECTURE
- 20. GRAPHQL CLIENT
- 23. THE APOLLO CLIENT ‣ universal ‣ cares about caching and normalization ‣ cares about loading state tracking + error handling ‣ version 2 is much smaller, better package management, less deps
- 26. query {…} Structured data returned and injected in UI 2 Request from UI your specific data 1
- 31. TWO FLAVORS HOW TO WRITE GRAPHQL
- 32. ES6 template literal .graphql files with webpack preproc. OR
- 33. THERE’S MORE THAN A QUERY ‣ mutations for changing data ‣ subscriptions for listening on updates
- 34. IN THE REACT WORLD
- 36. MORE QUERIES IN ONE COMPONENT ‣ compose it (works like higher-order functions) ‣ Apollo will merge all together
- 38. APOLLO CLIENT FETCH POLICIES cache-first Only fetch if data isn’t in the cache cache-and-network Cache first, then always fetch network-only Always fetch, never use cache cache-only Never fetch, try reading from cache
- 39. EXTEND IT
- 40. LINKS ‣ chainable plugin system ‣ Apollo links ‣ community links ‣ write you own! ‣ https://www.apollographql.com/docs/link
- 41. QUERY LOCAL STATE ‣ apollo-link-state ‣ can replace Redux ‣ query and mutate data in the local state ‣ use @client directive
- 44. OPTIMISTIC UI PATTERN ‣ no place for a spinner anymore ‣ write your mutation as usual ‣ your future response goes in the optimisticResponse param
- 45. APOLLO HAS A BIG ECOSYSTEM ‣ links ‣ GraphiQL interface for API inspection & documentation ‣ Apollo browser dev tools ‣ Apollo codegen for flow + type script ‣ eslint-plugin-graphql ‣ IDE support
- 46. REST API ARCHITECTUREREVIEW ‣ results in a lot of API endpoints ‣ „chatty“ ‣ overfetching: often you don’t need the complete data set ‣ care about client caching and normalization ‣ frontend & backend (deploy) strongly correlated
- 47. CONCLUSION & RECOMMENDATION ‣ much less effort than with REST ‣ GraphQL / Apollo Client documentation is fantastic ‣ give it a try, write your first simple query using Star Wars API http://graphql.org/swapi-graphql ‣ use „ apollo-boost“ for quick-start and first steps ‣ we are still at the beginning, there’s coming more
- 48. THANK YOU
- 49. TIME FOR Q&A & FEEDBACK !