Create flexible React applications using GraphQL apis
•Download as PPTX, PDF•
0 likes•441 views
![Maurice De Beijer [MVP]](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1696317804)
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Create flexible React applications using GraphQL apis
Similar to Create flexible React applications using GraphQL apis (20)
More from Maurice De Beijer [MVP]
More from Maurice De Beijer [MVP] (20)
Recently uploaded
Recently uploaded (20)
Create flexible React applications using GraphQL apis
- 1. Create flexible React applications using GraphQLAPIs Maurice de Beijer - @mauricedb
- 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. 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. Skillshare 4ABL - The Problem Solver
- 5. Questions ABL - The Problem Solver 5
- 6. What isGraphQL? ABL - The Problem Solver 6
- 7. What is GraphQL? GraphQL is a query language for APIs Written at Facebook 7ABL - The Problem Solver
- 8. ABL - The Problem Solver 8
- 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. 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. GraphQL Endpoint Clients have different requirements 11ABL - The Problem Solver
- 12. Consolidate different API’s GraphQL Endpoint Tips API Movies REST API Users DB 12ABL - The Problem Solver
- 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. UsingGraphQL From a React application ABL - The Problem Solver 14
- 15. GraphQL Clients 15ABL - The Problem Solver
- 16. ABL - The Problem Solver 16
- 17. Getting started with Apollo Just three NPM packages needed: apollo-boost react-apollo graphql 17ABL - The Problem Solver
- 18. ABL - The Problem Solver 18
- 19. The ApolloClient class Use the class from apollo-boost! Comes preconfigured with sensible defaults 19ABL - The Problem Solver
- 20. ABL - The Problem Solver 20
- 21. The ApolloProvider component Provides the rest of the application access to the ApolloClient 21ABL - The Problem Solver
- 22. ABL - The Problem Solver 22
- 23. TheGQL query Define the data requirements Add parameters as needed 23ABL - The Problem Solver
- 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. The QueryResult 25ABL - The Problem Solver
- 26. Defining query fragments Each component defines its own data requirements 26ABL - The Problem Solver
- 27. Using query fragments These are combined into one single query 27ABL - The Problem Solver
- 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. 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. TheGQL mutation Defines the data to send to the server And the data we want to receive on success 30ABL - The Problem Solver
- 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. Executing the mutation Provide the mutation parameters using the variables object 32ABL - The Problem Solver
- 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. Questions ABL - The Problem Solver 34
- 35. Maurice de Beijer @mauricedb 35ABL - The Problem Solver
Editor's Notes
- https://raw.githubusercontent.com/sogko/graphql-shorthand-notation-cheat-sheet/master/graphql-shorthand-notation-cheat-sheet.png
- https://www.flickr.com/photos/krupptastic/4738992473