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 API's

67 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 you React applications.

https://rome2018.codemotionworld.com/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Create flexible react applications using GraphQL API's

  1. 1. Create flexible React applications using GraphQL Maurice de Beijer - @mauricedb ROME - APRIL 13/14 2018
  2. 2. Topics  What is GraphQL and why use it?  Using GraphQL from a React application  Optimizing GraphQL queries  Mutating data ABL - The Problem Solver 2
  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 ABL - The Problem Solver 3
  4. 4. Skillshare Courses ABL - The Problem Solver 4
  5. 5. What is GraphQL? GraphQL is a query language for APIs Written at Facebook ABL - The Problem Solver 5
  6. 6. ABL - The Problem Solver 6
  7. 7. 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 ABL - The Problem Solver 7
  8. 8. 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 ABL - The Problem Solver 8
  9. 9. Clients have different requirements GraphQL Endpoint ABL - The Problem Solver 9
  10. 10. Consolidate different API’s GraphQL Endpoint Tips API Movies REST API Users DB ABL - The Problem Solver 10
  11. 11. 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’s available 👍  Client decides what to load 👍  Strongly typed schema 👍  Interactive playground 👍  To test queries ABL - The Problem Solver 11
  12. 12. GraphQL Clients ABL - The Problem Solver 12
  13. 13. ABL - The Problem Solver 13
  14. 14. Getting started with Apollo  Just three NPM packages needed:  apollo-boost  react-apollo  graphql ABL - The Problem Solver 14
  15. 15. ABL - The Problem Solver 15
  16. 16. The ApolloClient class  Use the class from apollo-boost!  Comes preconfigured with sensible defaults ABL - The Problem Solver 16
  17. 17. ABL - The Problem Solver 17
  18. 18. The ApolloProvider component  Provides the rest of the application access to the ApolloClient ABL - The Problem Solver 18
  19. 19. ABL - The Problem Solver 19
  20. 20. TheGQL query  Define the data requirements  Add parameters as needed ABL - The Problem Solver 20
  21. 21. 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 ABL - The Problem Solver 21
  22. 22. The QueryResult ABL - The Problem Solver 22
  23. 23. Defining query fragments  Each component defines its own data requirements ABL - The Problem Solver 23
  24. 24. Using query fragments  These are combined into one single query ABL - The Problem Solver 24
  25. 25. 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  TheApolloClient from apollo-boost doesn’t support this (yet) ABL - The Problem Solver 25
  26. 26. Mutating data  Any updates can be send to the server using mutations  Calls a function on the server with the specified data ABL - The Problem Solver 26
  27. 27. TheGQL mutation  Defines the data to send to the server  And the data we want to receive on success ABL - The Problem Solver 27
  28. 28. 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 ABL - The Problem Solver 28
  29. 29. Executing the mutation  Provide the mutation parameters using the variables object ABL - The Problem Solver 29
  30. 30. Conclusion  GraphQL is a great way to query API’s over HTTP  The server determines what is possible  The client controls what is loaded  A great way to consolidate multiple REST services  Queries are validated against a type system  Updates can be done using mutations ABL - The Problem Solver 30
  31. 31. MauricedeBeijer @mauricedb ABL - The Problem Solver 31

×