© 2021 GraphQL, Inc. Page | 1
GraphQL Fundamentals
© 2021 GraphQL.
.
Page | 2
Senior Software Engineer at BORN Group
Virbhadra S. Ankalkote
© 2021 GraphQL Page | 3
Agenda
© 2021 GraphQL Page | 4
Agenda
{
graphql:{
what
who
why
how
}
}
© 2021 GraphQL Page | 5
What ?
© 2021 GraphQL Page | 6
“GraphQL is a query language
for APIs, and a runtime for
fulfilling those queries with
existing data ”
© 2021 GraphQL Page | 7
Who ?
© 2021 GraphQL Page | 8
“In 2012, Facebook develop the
GraphQL technology for their
native mobile app”
.
© 2021 GraphQL Page | 9
.
2012 2015 2017..2018...2020
Development Started Open Source Evolving Specification.
Timeline
© 2021 GraphQL Page | 10
Why?
© 2021 GraphQL Page | 11
Application Programming Interface (API)
© 2021 GraphQL Page | 12
REST Flow
© 2021 GraphQL Page | 13
Principles of REST API Design
© 2021 GraphQL Page | 14
© 2021 GraphQL Page | 15
GraphQL Flow
© 2021 GraphQL Page | 16
© 2021 GraphQL Page | 17
Browser Tools
© 2021 GraphQL Page | 18
© 2021 GraphQL Page | 19
GraphQL Playground
© 2021 GraphQL Page | 20
How?
© 2021 GraphQL Page | 21
© 2021 GraphQL Page | 22
© 2021 GraphQL Page | 23
© 2021 GraphQL Page | 24
© 2021 GraphQL Page | 25
Limitations
© 2021 GraphQL Page | 26
© 2021 GraphQL Page | 27
Reading Data
© 2021 GraphQL Page | 28
© 2021 GraphQL Page | 29
© 2021 GraphQL Page | 30
© 2021 GraphQL Page | 31
© 2021 GraphQL Page | 32
Writing Data ( Mutation )
© 2021 GraphQL Page | 33
© 2021 GraphQL Page | 34
© 2021 GraphQL Page | 35
© 2021 GraphQL Page | 36
GraphQL Variables
© 2021 GraphQL Page | 37
• In GraphQL, you can use variables to reuse the same query/mutations written by
the client, with different arguments.
• When we start working with variables, we need to do three things:
– Replace the static value in the query with $variableName
– Declare $variableName as one of the variables accepted by the query
– Pass variableName: value in the separate, transport-specific (usually JSON)
variables dictionary
© 2021 GraphQL Page | 38
GraphQL Fragments
© 2021 GraphQL Page | 39
• A GraphQL fragment is a piece of logic that a client can share between multiple
queries and mutations.
• In GraphQL, you often need to query for the same data fields in different queries.
• By reusing this code, we can be more efficient with our time and reuse these piece
of queries
© 2021 GraphQL Page | 40
© 2021 GraphQL Page | 41
Pain Points of GraphQL
© 2021 GraphQL Page | 42
Almost impossible to solve
● Query In Indefinite Depth
– GraphQL cannot query in indefinite depth, so if you have a tree and want to
return a branch without knowing the depth, you’ll have to do some
pagination
● Specific Response Structure
– In GraphQL the response matches the shape of the query, so if you need to
respond in a very specific structure, you'll have to add a transformation layer
to reshape the response.
© 2021 GraphQL Page | 43
Hard to solve
● Cache at Network Level
– Because of the commonly way GraphQL is used over HTTP (A POST in a
single endpoint), cache at network level becomes hard. A way to solve it is to
use Persisted Queries.
● Handling File Upload
– There is nothing about file upload in the GraphQL specification and
mutations doesn’t accept files in the arguments. To solve it you can upload
files using other kind of APIs (like REST) and pass the URL of the uploaded file
to the GraphQL mutation, or inject the file in the execution context, so you’ll
have the file inside the resolver functions.
© 2021 GraphQL Page | 44
Questions ?
© 2021 GraphQL Page | 45
Thank You

GraphQL Fundamentals

  • 1.
    © 2021 GraphQL,Inc. Page | 1 GraphQL Fundamentals
  • 2.
    © 2021 GraphQL. . Page| 2 Senior Software Engineer at BORN Group Virbhadra S. Ankalkote
  • 3.
    © 2021 GraphQLPage | 3 Agenda
  • 4.
    © 2021 GraphQLPage | 4 Agenda { graphql:{ what who why how } }
  • 5.
    © 2021 GraphQLPage | 5 What ?
  • 6.
    © 2021 GraphQLPage | 6 “GraphQL is a query language for APIs, and a runtime for fulfilling those queries with existing data ”
  • 7.
    © 2021 GraphQLPage | 7 Who ?
  • 8.
    © 2021 GraphQLPage | 8 “In 2012, Facebook develop the GraphQL technology for their native mobile app” .
  • 9.
    © 2021 GraphQLPage | 9 . 2012 2015 2017..2018...2020 Development Started Open Source Evolving Specification. Timeline
  • 10.
    © 2021 GraphQLPage | 10 Why?
  • 11.
    © 2021 GraphQLPage | 11 Application Programming Interface (API)
  • 12.
    © 2021 GraphQLPage | 12 REST Flow
  • 13.
    © 2021 GraphQLPage | 13 Principles of REST API Design
  • 14.
    © 2021 GraphQLPage | 14
  • 15.
    © 2021 GraphQLPage | 15 GraphQL Flow
  • 16.
    © 2021 GraphQLPage | 16
  • 17.
    © 2021 GraphQLPage | 17 Browser Tools
  • 18.
    © 2021 GraphQLPage | 18
  • 19.
    © 2021 GraphQLPage | 19 GraphQL Playground
  • 20.
    © 2021 GraphQLPage | 20 How?
  • 21.
    © 2021 GraphQLPage | 21
  • 22.
    © 2021 GraphQLPage | 22
  • 23.
    © 2021 GraphQLPage | 23
  • 24.
    © 2021 GraphQLPage | 24
  • 25.
    © 2021 GraphQLPage | 25 Limitations
  • 26.
    © 2021 GraphQLPage | 26
  • 27.
    © 2021 GraphQLPage | 27 Reading Data
  • 28.
    © 2021 GraphQLPage | 28
  • 29.
    © 2021 GraphQLPage | 29
  • 30.
    © 2021 GraphQLPage | 30
  • 31.
    © 2021 GraphQLPage | 31
  • 32.
    © 2021 GraphQLPage | 32 Writing Data ( Mutation )
  • 33.
    © 2021 GraphQLPage | 33
  • 34.
    © 2021 GraphQLPage | 34
  • 35.
    © 2021 GraphQLPage | 35
  • 36.
    © 2021 GraphQLPage | 36 GraphQL Variables
  • 37.
    © 2021 GraphQLPage | 37 • In GraphQL, you can use variables to reuse the same query/mutations written by the client, with different arguments. • When we start working with variables, we need to do three things: – Replace the static value in the query with $variableName – Declare $variableName as one of the variables accepted by the query – Pass variableName: value in the separate, transport-specific (usually JSON) variables dictionary
  • 38.
    © 2021 GraphQLPage | 38 GraphQL Fragments
  • 39.
    © 2021 GraphQLPage | 39 • A GraphQL fragment is a piece of logic that a client can share between multiple queries and mutations. • In GraphQL, you often need to query for the same data fields in different queries. • By reusing this code, we can be more efficient with our time and reuse these piece of queries
  • 40.
    © 2021 GraphQLPage | 40
  • 41.
    © 2021 GraphQLPage | 41 Pain Points of GraphQL
  • 42.
    © 2021 GraphQLPage | 42 Almost impossible to solve ● Query In Indefinite Depth – GraphQL cannot query in indefinite depth, so if you have a tree and want to return a branch without knowing the depth, you’ll have to do some pagination ● Specific Response Structure – In GraphQL the response matches the shape of the query, so if you need to respond in a very specific structure, you'll have to add a transformation layer to reshape the response.
  • 43.
    © 2021 GraphQLPage | 43 Hard to solve ● Cache at Network Level – Because of the commonly way GraphQL is used over HTTP (A POST in a single endpoint), cache at network level becomes hard. A way to solve it is to use Persisted Queries. ● Handling File Upload – There is nothing about file upload in the GraphQL specification and mutations doesn’t accept files in the arguments. To solve it you can upload files using other kind of APIs (like REST) and pass the URL of the uploaded file to the GraphQL mutation, or inject the file in the execution context, so you’ll have the file inside the resolver functions.
  • 44.
    © 2021 GraphQLPage | 44 Questions ?
  • 45.
    © 2021 GraphQLPage | 45 Thank You