Shift Remote: WEB - GraphQL and React – Quick Start - Dubravko Bogovic (Infobip)
Download as PPTX, PDF0 likes108 views
The document provides an overview of GraphQL, highlighting its features, drawbacks, and usage by major companies like Facebook and Netflix. It discusses various components such as queries, mutations, and subscriptions, and introduces the Hasura GraphQL engine for PostgreSQL integration. Additionally, it mentions tools like Apollo Client for connecting to GraphQL servers and resources for further exploration of GraphQL technologies.
![Enter GraphQL
• A query language for your API - https://graphql.org/
• Flexible data acquisition
‣ Get only what you need
‣ Multiple resources at once
‣ Filter or sort the data
‣ Change the requirements easily
Describe your data
type Project {
name: number;
tagline: number;
contributors:[User];
}
Ask for what you want
{
project(where: {
name: {_eq: "GraphQL" }
}) {
tagline
}
}
Get predictable results
{
"project": {
"tagline": "A query language for APIs"
}
}](https://image.slidesharecdn.com/dubravkobogovic-200714150200/85/Shift-Remote-WEB-GraphQL-and-React-Quick-Start-Dubravko-Bogovic-Infobip-4-320.jpg)
Shift Remote: WEB - GraphQL and React – Quick Start - Dubravko Bogovic (Infobip)
- 1. GraphQL and React Quick Start #graphql #hasura #simple #fun #magic Dubravko Bogović, 14.07.2020 SHIFT REMOTE 2020
- 2. The good old REST API
- 4. Enter GraphQL • A query language for your API - https://graphql.org/ • Flexible data acquisition ‣ Get only what you need ‣ Multiple resources at once ‣ Filter or sort the data ‣ Change the requirements easily Describe your data type Project { name: number; tagline: number; contributors:[User]; } Ask for what you want { project(where: { name: {_eq: "GraphQL" } }) { tagline } } Get predictable results { "project": { "tagline": "A query language for APIs" } }
- 5. GraphQL Features • Drawbacks: ‣ No file upload in specification ‣ Returns only JSON ‣ Caching must be custom built ‣ Complex queries can be slow ‣ Slower learning curve • Features: ‣ Flexible data acquisition ‣ Built-in introspection ‣ Strongly typed ‣ Client-driven ‣ Rapid application development ‣ Code sharing ‣ Detailed error messages ‣ Fine grain permission ‣ Data subscriptions ‣ Combining schemas (APIs)
- 6. Who Uses GraphQL? • Developed internally by Facebook • https://graphql.org/users/ • A Google search revels even more and much bigger users (link) ‣ Shopify ‣ GitHub ‣ Medium ‣ Docker ‣ Twitter ‣ IBM (technical blog post) ‣ Netflix (technical blog post) ‣ Sainsbury (technical blog post) ‣ Yelp ‣ Infobip ‣ … Netflix IBM
- 7. GraphQL Operations – quick overview Mutations • Fragments ‣ Reusable code fragments • Directives ‣ Allow dynamic changes to the query structure GraphQL flavors • Data management action mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) { createReview(episode: $ep, review: $review) { stars commentary } } Variables: { "ep": "JEDI", "review": { "stars": 5, "commentary": "This is a great movie!" } } Result: { "data": { "createReview": { "stars": 5, "commentary": "This is a great movie!" } } } Queries • Data fetch actions • Elements ‣ Operation type ‣ Operation name ‣ Variables ‣ Variable type query UserData($alignment: String = "good") { user(id: 1, alignment: $alignment) { name: full_name title home_planet { name sector } } } ‣ Default value ‣ Entity name ‣ Arguments ‣ Fields ‣ Alias fragment userFields on User { name: full_name title } query Hero($withFriends: Boolean!) { hero { name friends @include(if: $withFriends) { name } } } • Subscriptions ‣ Queries with real time data
- 8. Hasura GraphQL Engine • GraphQL engine that can easily be added to an existing PostgreSQL database • Features: ‣ Realtime data with GraphQL subscriptions ‣ Dynamic access control that integrates with your auth ‣ Allow-list for GraphQL queries ‣ Merge remote GraphQL schemas ‣ Trigger webhooks on database events ‣ Schema migrations ‣ Query performance analysis
- 9. Apollo React.js client • For our current projects we use the Apollo client to connect to our Hasura GraphQL server • Components we use: ‣ apollo-link-http ‣ apollo-link-ws ‣ subscriptions-transport-ws ‣ apollo-link-context ‣ apollo-client ‣ apollo-cache-inmemory
- 10. Demo Todo application Github - https://github.com/AvronNet/GraphQL_quickStart
- 11. Going beyond • https://gramps.js.org/ - GrAMPS (GraphQL Apollo Microservice Pattern Server) ‣ GraphQL at massive scale: GraphQL as the glue in a microservice architecture • GraphQL server libraries in many languages - https://graphql.org/code/ ‣ GraphQL DotNet • https://github.com/graphql-dotnet/graphql-dotnet • Building a GraphQL API with ASP.NET Core 2 and Entity Framework Core ‣ GraphQL Java - https://www.graphql-java.com/ • OpenAPI to GraphQL - https://github.com/ibm/openapi-to-graphql ‣ https://developer.ibm.com/open/projects/openapi-to-graphql/ (great short video) • Top 5 GraphQL Predictions for 2019 – GraphQL adoption will grow • A bundle of useful links about GraphQL - https://wiki.nikitavoloboev.xyz/networking/graphql
- 12. May GraphQL be with you dubravko.bogovic@gmail.com