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.

Create flexible React applications using GraphQL apis

86 views

Published on

Using restful APIs can be hard on your React applications. Before you know it, you are doing lots of parallel queries to the server. Using GraphQL instead of REST might help a lot. Instead of downloading many complete resources each component declares its own needs. Then the GraphQL client library then combines these requirements. The result is a single optimized query for the server. In this session, Maurice de Beijer is going to show you how to get started with GraphQL in your React applications.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Create flexible React applications using GraphQL apis

  1. 1. Create flexible React applications using GraphQLAPIs Maurice de Beijer - @mauricedb
  2. 2. Topics  What is GraphQL and why use it?  Using GraphQL from a React application  Optimizing GraphQL queries  Mutating data 2ABL - The Problem Solver
  3. 3.  Maurice de Beijer  The Problem Solver  Microsoft MVP  Freelance developer/instructor  Twitter: @mauricedb  Web: http://www.TheProblemSolver.nl  E-mail: maurice.de.beijer@gmail.com 3ABL - The Problem Solver
  4. 4. Skillshare 4ABL - The Problem Solver
  5. 5. Questions ABL - The Problem Solver 5
  6. 6. What isGraphQL? ABL - The Problem Solver 6
  7. 7. What is GraphQL? GraphQL is a query language for APIs Written at Facebook 7ABL - The Problem Solver
  8. 8. ABL - The Problem Solver 8
  9. 9. What is GraphQL?  A way to query hierarchical data over HTTP  The server provides a data definition  The client validates queries again this definition  The client query defines shape of data loaded  Both shape and number of records  Data sets as well as fields can be parameterized 9ABL - The Problem Solver
  10. 10. Why use GraphQL?  Only fetch data you really need  Different clients need different result shapes  Consolidate different API’s  Playground to test queries  Backed by strongly typed schema  Clear separation between queries and mutations  CQRS for the win   And many more advantages  Subscriptions for data changes  Deprecate old fields that are not used 10ABL - The Problem Solver
  11. 11. GraphQL Endpoint Clients have different requirements 11ABL - The Problem Solver
  12. 12. Consolidate different API’s GraphQL Endpoint Tips API Movies REST API Users DB 12ABL - The Problem Solver
  13. 13. GraphQL versus Rest Rest  Server decides what you get 👎  No standard schema 👎  Several flavors  No playground to test 👎  Caching using HTTP 👍 GraphQL  Server decides what is available 👍  Client decides what to load 👍  Strongly typed schema 👍  Interactive playground 👍  To test queries 13ABL - The Problem Solver
  14. 14. UsingGraphQL From a React application ABL - The Problem Solver 14
  15. 15. GraphQL Clients 15ABL - The Problem Solver
  16. 16. ABL - The Problem Solver 16
  17. 17. Getting started with Apollo  Just three NPM packages needed:  apollo-boost  react-apollo  graphql 17ABL - The Problem Solver
  18. 18. ABL - The Problem Solver 18
  19. 19. The ApolloClient class  Use the class from apollo-boost!  Comes preconfigured with sensible defaults 19ABL - The Problem Solver
  20. 20. ABL - The Problem Solver 20
  21. 21. The ApolloProvider component  Provides the rest of the application access to the ApolloClient 21ABL - The Problem Solver
  22. 22. ABL - The Problem Solver 22
  23. 23. TheGQL query  Define the data requirements  Add parameters as needed 23ABL - The Problem Solver
  24. 24. The Query component  Executes the query using the provided ApolloClient  Uses the render props syntax with the QueryResult  There is also a graphql HOC available 24ABL - The Problem Solver
  25. 25. The QueryResult 25ABL - The Problem Solver
  26. 26. Defining query fragments  Each component defines its own data requirements 26ABL - The Problem Solver
  27. 27. Using query fragments  These are combined into one single query 27ABL - The Problem Solver
  28. 28. Batching HTTP Requests  Multiple queries result in multiple HTTP request  Batch these into a single request using the BatchHttpLink  Use the ApolloClient from apollo-client  The ApolloClient from apollo-boost doesn’t support this (yet) 28ABL - The Problem Solver
  29. 29. Mutating data  Any updates can be send to the server using mutations  Calls a function on the server with the specified data 29ABL - The Problem Solver
  30. 30. TheGQL mutation  Defines the data to send to the server  And the data we want to receive on success 30ABL - The Problem Solver
  31. 31. The Mutation component  Executes the mutation using the provided ApolloClient  Uses the render props syntax with the function to mutate  There is also an graphql HOC available  Use the update function to update caches 31ABL - The Problem Solver
  32. 32. Executing the mutation  Provide the mutation parameters using the variables object 32ABL - The Problem Solver
  33. 33. Conclusion 33  GraphQL is a great way to query API’s over HTTP  The server determines what is possible  The client controls what is loaded  Queries are validated against a type system  Updates can be done using mutations ABL - The Problem Solver
  34. 34. Questions ABL - The Problem Solver 34
  35. 35. Maurice de Beijer @mauricedb 35ABL - The Problem Solver

×