Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Apollo and GraphQL Stack


Published on

GraphQL is a wonderful abstraction for describing and querying data. Apollo is an ambitious project to help you build apps with GraphQL. In this talk, we'll go over how all the parts—Client, Server, Dev Tools, Codegen, and more—create an end-to-end experience for building apps on top of any data.

## Detailed description

In today's development ecosystem, there are tons of options for almost every part of your application development process: UI rendering, styling, server side rendering, build systems, type checking, databases, frontend data management, and more. However, there's one part of the stack that hasn't gotten as much love in the last decade, because it usually falls in the cracks between frontend and backend developers: Data fetching.

The most common way to load data in apps today is to use a REST API on the server and manage the data manually on the client. Whether you're using Redux, MobX, or something else, you're usually doing everything yourself—deciding when to load data, how to keep it fresh, updating the store after sending updates to the server, and more. But if you're trying to develop the best user experience for your app, all of that gets in the way; you shouldn't have to become a systems engineer to create a great frontend. The Apollo project is based on the belief that data loading doesn't have to be complicated; instead, you should be able to easily get the data you want, when you want it, and it should be managed for you just like React manages updating your UI.

Because data loading touches both the frontend and backend of your app, GraphQL and Apollo have to include many parts to fulfill that promise of being able to seamlessly connect your data together. First, we need client libraries not only for React and JavaScript, but also for native iOS and Android. Then, we must bring server-side support for GraphQL queries, mutations, and most recently subscriptions to every server technology and make those servers easier to write. And finally, we want not only all of the tools that people are used to with REST APIs, but many more thanks to all of the capabilities enabled by GraphQL.

In this talk, we'll go over all of the parts of a GraphQL-oriented app architecture, and how different GraphQL and Apollo technologies come together to solve all of the parts of data loading and management for React developers.

Published in: Software
  • Login to see the comments

The Apollo and GraphQL Stack

  1. 1. The Apollo and GraphQL stack How everything fits together Sashko Stubailo Open Source Lead, Apollo @stubailo
  2. 2. The goal of the Apollo team and community: Make building great applications simpler and more straightforward, with GraphQL.
  3. 3. Today's apps can be complex: ● Multiple frontends for different platforms ● Multiple backends where data lives ● Need for team coordination across different languages, technologies, and contexts In this presentation, I'd like to show you how Apollo and GraphQL can address these concerns. Let's set the stage... React Android iOS Angular MongoDB Oracle Salesforce PostgreSQL Microservice
  4. 4. What is GraphQL? Schema definition Query language Community of tools
  5. 5. Why does GraphQL have so many benefits? GraphQL organizes the mess of ad-hoc, underspecified endpoints.
  6. 6. What is Apollo? A set of projects designed to leverage GraphQL and work together to create a great workflow. Client-side tooling ● Apollo Client ● Apollo iOS ● Apollo Android ● Dev tools ● apollo-codegen ● eslint-plugin-graphql Server-side tooling ● Apollo Server ● Graphql-tools ○ Schema creation ○ Mocking ○ Stitching ● Apollo Optics
  7. 7. Core benefits from Apollo + GraphQL 1. Easy, fast, and simple development 2. Better maintenance, security, and coordination, especially between teams 3. Ultimate understanding into how your app data works Let's look at them one by one.
  8. 8. 1. Easy, fast, and simple development
  9. 9. GraphQL is easier than ever before Apollo Client Apollo Server BackendBackend Backend React Existing REST API ● Today, it's just as fast and easy to build with GraphQL as any other API technology. ● Huge benefits from a flexible and declarative approach to data. ● Save time by describing what you need, not how to get it
  10. 10. A GraphQL API in just a few lines of code
  11. 11. Easily attach GraphQL data to React
  12. 12. Adding new features to your app ● This is where GraphQL really shines ● In the UI, just add a new component ● Use the existing fields in a new way, or add a few, but no need to create an entire new endpoint ● You can build on the work you've already done ● GraphQL is like a component-based API
  13. 13. Migrating an existing app
  14. 14. Spend less time managing data ● Less time worrying about data: ○ Loading state tracking ○ Normalizing and storing data ○ Error handling ○ Async request management ● Less time building new endpoints: ○ Just build the types and fields you need
  15. 15. What's the Apollo team's goal here? ● We want to make sure the best option is also the easiest ● You shouldn't have to decide between simple and complicated ● Huge focus on documentation to make things easy ● Constant improvement: Apollo Client 2.0 is 5x faster and 2x smaller
  16. 16. 2. Safety and coordination
  17. 17. Check your API calls ahead of time + Use the interaction between GraphQL schema and queries.
  18. 18. Great article by Zach Silviera:
  19. 19. eslint-plugin-graphql
  20. 20. apollo-codegen
  21. 21. Validating code across the stack ● Validate your frontend code is correct as you write it, using eslint-plugin-graphql and static type generation with apollo-codegen ● Use a CI setup to check against newly deployed schemas to ensure your frontend remains valid ● Find breaking changes in the schema with @entria/graphql-findbreakingchanges. Extra useful when you don't have the frontend code.
  22. 22. Mocking and Schema Stitching in graphql-tools chema-stitching-8944064904a5
  23. 23. New workflows ● "GraphQL-First" - develop the schema in parallel with the frontend using mocking, then connect them ● Using schema stitching, develop different parts of your API in isolation, and combine with mocking to achieve a hybrid mocked/real API ● Eliminate unneeded blockers across teams
  24. 24. Why GraphQL? ● GraphQL is the only technology that combines a strongly-typed static schema with a specific query language ● No "select * from users" ● Queries more often live next to UI code, not somewhere in a totally different place, making it easier to connect UI+queries
  25. 25. 3. Understanding your data
  26. 26. Understand the data available ● Same system for building and validating the API makes it complete reliable ● Opt-in systems like Swagger, or manually maintained API docs, are often incomplete or out of date
  27. 27. Query language ● No way to select * in GraphQL ● You know exactly which fields are being accessed ● GraphQL is the only tech I know of that combines a description of the API with a requirement to ask for specific fields
  28. 28. Track API field usage with Optics
  29. 29. What to do with this information? ● Know which fields to target for deprecation ● Know where to start optimizing ● Move from fields to operations to see what is affected
  30. 30. Fine-grained data requirements ● Without GraphQL, all similar requests for data blend together ● It's hard to trace back to UI performance ● You want to see information per query, not per endpoint
  31. 31. Optics and devtools Similar information, across the stack: The future of Apollo
  32. 32. Per-field performance
  33. 33. Easy to know where to fix the problem ● Client side: Avoid fetching fields, split up queries, @defer ● Server side: Make the server faster, do better caching So what's the next step for GraphQL insights?
  34. 34. Apollo Tracing
  35. 35. Broad server support ● Node ● Ruby ● Scala (Sangria) ● Java ● Elixir ● OCaml ● Even Wordpress →
  36. 36. My hopes for the Apollo Tracing standard ● Performance data built into every GraphQL server ● Visualize data in more places, such as GraphiQL or Apollo Client Devtools ● Support more kinds of information, for example underlying backend timing ● Support for schema stitching Let's work together on it!
  37. 37. Zooming out
  38. 38. The "Apollo Platform" Apollo Optics Apollo Client Apollo Server Backend Backend Backend React, etc Developer tools, code analysis, and more Apollo iOS/Android Swift, Java
  39. 39. The future of the Apollo platform ● Continue to prioritize incremental adoption and integrate with every technology imaginable ● More tools and features that take advantage of GraphQL across the whole stack ● Build on more community-driven standards, like Tracing
  40. 40. Core benefits from Apollo + GraphQL 1. Easy, fast, and simple development 2. Better maintenance, security, and coordination, especially between teams 3. Ultimate understanding into how your app data works Now we see how using all of the tools together gets us these benefits. Important: We can choose which ones we want.
  41. 41. Let's help people use GraphQL, together! Talk to me if you have ideas about Apollo or GraphQL. Sashko Stubailo @stubailo REACTBRAZIL for 25% off