Have you ever wondered if there's a way to create simple real time apps? Were you ever tired of creating numerous APIs for your CRUD operations or just some simple aggregated data? There is a simple, fast way to do just that, GraphQL. Well look into what GraphQL can do for us, how to create a simple opensource GraphQL server on top of Postgres and how to use the data in our front end apps.

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