Create flexible react applications using GraphQL API's
Download as pptx, pdf0 likes226 views
![Maurice De Beijer [MVP]](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1733403303)
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/
![[Portland 365Sat] PCF Custom Controls](https://cdn.slidesharecdn.com/ss_thumbnails/gettingstartedwithpcf-191121022521-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to Create flexible react applications using GraphQL API's (20)
More from Maurice De Beijer [MVP] (20)
Recently uploaded (20)
Create flexible react applications using GraphQL API's
- 1. Create flexible React applications using GraphQL Maurice de Beijer - @mauricedb ROME - APRIL 13/14 2018
- 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. Maurice de Beijer The Problem Solver Microsoft MVP Freelance developer/instructor Twitter: @mauricedb Web: http://www.TheProblemSolver.nl E-mail: [email protected] ABL - The Problem Solver 3
- 4. Skillshare Courses ABL - The Problem Solver 4
- 5. What is GraphQL? GraphQL is a query language for APIs Written at Facebook ABL - The Problem Solver 5
- 6. ABL - The Problem Solver 6
- 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. 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. Clients have different requirements GraphQL Endpoint ABL - The Problem Solver 9
- 10. Consolidate different API’s GraphQL Endpoint Tips API Movies REST API Users DB ABL - The Problem Solver 10
- 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. GraphQL Clients ABL - The Problem Solver 12
- 13. ABL - The Problem Solver 13
- 14. Getting started with Apollo Just three NPM packages needed: apollo-boost react-apollo graphql ABL - The Problem Solver 14
- 15. ABL - The Problem Solver 15
- 16. The ApolloClient class Use the class from apollo-boost! Comes preconfigured with sensible defaults ABL - The Problem Solver 16
- 17. ABL - The Problem Solver 17
- 18. The ApolloProvider component Provides the rest of the application access to the ApolloClient ABL - The Problem Solver 18
- 19. ABL - The Problem Solver 19
- 20. TheGQL query Define the data requirements Add parameters as needed ABL - The Problem Solver 20
- 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. The QueryResult ABL - The Problem Solver 22
- 23. Defining query fragments Each component defines its own data requirements ABL - The Problem Solver 23
- 24. Using query fragments These are combined into one single query ABL - The Problem Solver 24
- 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. 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. 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. 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. Executing the mutation Provide the mutation parameters using the variables object ABL - The Problem Solver 29
- 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. MauricedeBeijer @mauricedb ABL - The Problem Solver 31