Shift Remote: WEB - GraphQL and React – Quick Start - Dubravko Bogovic (Infobip)

Shift Remote: WEB - GraphQL and React – Quick Start - Dubravko Bogovic (Infobip)

• 1.
  GraphQL and React QuickStart #graphql #hasura #simple #fun #magic Dubravko Bogović, 14.07.2020 SHIFT REMOTE 2020
• 2.
  The good oldREST API
• 4.
  Enter GraphQL • Aquery 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 bewith you dubravko.bogovic@gmail.com