Download to read offline
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1756998088)
Uploaded byMaurice De Beijer [MVP]
Create flexible react applications using GraphQL API's
The document discusses using GraphQL with React applications, covering its advantages such as precise data fetching, schema definition, and the ability to consolidate multiple APIs. It provides a guide to setting up Apollo Client for managing GraphQL queries and mutations effectively. Ultimately, it highlights GraphQL's potential as a robust alternative to REST APIs for structured and validated data interactions.
More Related Content
![[Portland 365Sat] PCF Custom Controls](https://cdn.slidesharecdn.com/ss_thumbnails/gettingstartedwithpcf-191121022521-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Create flexible react applications using GraphQL API's
More from Maurice De Beijer [MVP]
Create flexible react applications using GraphQL API's
- 1. Create flexible Reactapplications using GraphQL Maurice de Beijer - @mauricedb ROME - APRIL 13/14 2018
- 2. Topics What isGraphQL and why use it? Using GraphQL from a React application Optimizing GraphQL queries Mutating data ABL - The Problem Solver 2
- 3. Maurice deBeijer 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. Skillshare Courses ABL - TheProblem Solver 4
- 5. What is GraphQL? GraphQL isa query language for APIs Written at Facebook ABL - The Problem Solver 5
- 6. ABL - TheProblem Solver 6
- 7. What is GraphQL? Away 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? Onlyfetch 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 Serverdecides 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 - TheProblem Solver 12
- 13. ABL - TheProblem Solver 13
- 14. Getting started with Apollo Justthree NPM packages needed: apollo-boost react-apollo graphql ABL - The Problem Solver 14
- 15. ABL - TheProblem Solver 15
- 16. The ApolloClient class Use theclass from apollo-boost! Comes preconfigured with sensible defaults ABL - The Problem Solver 16
- 17. ABL - TheProblem Solver 17
- 18. The ApolloProvider component Provides therest of the application access to the ApolloClient ABL - The Problem Solver 18
- 19. ABL - TheProblem Solver 19
- 20. TheGQL query Define thedata requirements Add parameters as needed ABL - The Problem Solver 20
- 21. The Query component Executes thequery 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 - TheProblem Solver 22
- 23. Defining query fragments Each componentdefines its own data requirements ABL - The Problem Solver 23
- 24. Using query fragments These arecombined into one single query ABL - The Problem Solver 24
- 25. Batching HTTP Requests Multiple queriesresult 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 updatescan 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 thedata to send to the server And the data we want to receive on success ABL - The Problem Solver 27
- 28. The Mutation component Executes themutation 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 Providethe mutation parameters using the variables object ABL - The Problem Solver 29
- 30. Conclusion GraphQL isa 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 - TheProblem Solver 31