An Introduction to GraphQL
on ASP.NET Core

Michael Staib

{
  me {
    name
  }
}
{
  "me": {
    "name": "Michael Staib"
  }
}
{
  me {
    name
  }
}
{
  me {
    name
    image {
      width
      height
      url
    }
  }
}
{
  "me": {
    "name": "Michael Staib",
    "image": {
      "width": 200,
      "height": 300,
      "url": "http://some/images/123.png"          
    }
  }
}
{
  me {
    name
    image {
      width
      height
      url
    }
  }
}
{
  me {
    name
    lastSeen
    friends {
      name
      lastSeen
    }
  }
}
{
  "me": {
    "name": "Michael Staib",
    "lastSeen": "2018-05-19T18:45",
    "friends": [
      {
        "name": "Rafael Staib",
        "lastSeen": "2018-05-24T12:37"
      },
      {
        "name": "Pascal Senn",
        "lastSeen": "2018-06-07T17:13"
      }
    ]
  }
}
{
  me {
    name
    lastSeen
    friends {
      name
      lastSeen
    }
  }
}
{
  "me": {
    "name": "Michael Staib",
    "lastSeen": "2018-05-19T18:45",
    "friends": [
      {
        "name": "Rafael Staib",
        "lastSeen": "2018-05-24T12:37"
      },
      {
        "name": "Pascal Senn",
        "lastSeen": "2018-06-07T17:13"
      }
    ]
  }
}
{
  me {
    ... PersonInfo
    friends {
      ... PersonInfo
    }
  }
}
fragment PersonInfo on Person {
  name
  lastSeen
}


Demo

  • One Endpoint
  • One Request
  • No over- or under-fetching
  • Type System
  • Predictable
  • real-time

GET
https://webservices.amazon.com/onca/xml?

Service=AWSECommerceService&

AWSAccessKeyId=mY-Sup3r-s3cr3!-k3y&

AssociateTag=12345&  

Operation=ItemLookup&

ItemId=0316067938&

ResponseGroup=Reviews&

TruncateReviewsAt=256&

IncludeReviewsSummary=False&

Version=2013-08-01&

Timestamp=[YYYY-MM-DDThh:mm:ssZ]&

Signature=[Request Signature]

What is GraphQL?

GraphQL

Business Layer

Storage Layer

GraphQL

Rest
Services

gRPC
Services

...

Client

GraphQL gives clients the power to ask for exactly what they need and nothing more.

Backend Engineer: Hmm. So you’re saying this “GraphQL” will allow any web or native engineer to arbitrarily query basically any field in any backend service, recursively, however they want, without any backend engineers involved?
 

Frontend Engineer: Yeah, right? It’s amazing!
 

[…silence…]
 

Backend Engineer: Guards, seize this person.

type Project {
  name: String!
  tagline: String
  contributors: [User] 
    @cost(complexity: 10)
}

Describe your data

Operation

GraphQL

REST

Read

Query

GET

Write

Mutation

PUT, POST, PATCH, DELETE

Events

Subscription

N/A

What is GraphQL not?

  • Graph Database Query Language

  • Bound to a specific data source

  • Facebooks version of OData

  • Good solution for binary streams

  • Limited to HTTP

  • Limited to the JavaScript world


Demo

What about
Entity Framework?


Demo
 

Lets make it real-time


Demo

Conclusion

  • Iterate faster.

  • Request what you need get exactly that.

  • Fetch data more efficiently.

  • Takes away the complexity of data-fetching.

https://chillicream.com

https://github.com/chillicream/hotchocolate

Internet Briefing 2021 - Hot Chocolate: An Introduction to GraphQL on ASP.NET Core

By Michael Ingmar Staib

Internet Briefing 2021 - Hot Chocolate: An Introduction to GraphQL on ASP.NET Core

  • 464