GraphQL is an open-source query language and runtime for APIs. It was developed by Facebook to address the limitations of traditional RESTful APIs. GraphQL allows clients to request and retrieve precisely the data they need from the server, reducing over-fetching and under-fetching of data. It features a hierarchical query structure and a strong type system for precise data validation. GraphQL supports real-time updates through subscriptions and provides a flexible approach to data fetching, simplifying development and improving efficiency. Overall, GraphQL offers a modern and scalable solution for building APIs.

1. GraphQl
Harutyun
Abgaryan
@abg_harut
abgaryanharutyun

2. What do we have?
● RestFul backend Api
● Client App

3. What do we need?
Integration of a new type of client how use our data.

4. What can we do?
● Use existing endpoint
● Create new endpoint for each new client type
● Create custom/internal endpoints
● Refactor existing API
● Find a better solution

5. Data
API 1
Web Client
API 2
Mobile Client

6. Main problems
● Web and mobile use different data and different endpoints
● Too many request from old existing api (over-fetching/ under-fetching)
● Data types

7. Introducing GraphQl

8. What is GraphQL?
● A query language for your API (A data query language)
● Runtime for queries. (Spec/ specification)

9. POST /graphql

10. Hello GraphGL
{
product{
name,
description
}
}
Selection set
Fields

11. Hello GraphQL
Query {
product{
name,
description
}
}
{
product: {
name: Apple,
description: “good devices”
}
}

12. Hello GraphQl
query MyProduct($id: ID!) {
product($id: $id) {
name,
description
devices {
name,
model
}
}
}
{
product {
Name: “apple”
Description: “Good device”
devices: [
{name: “iPhone”, model: “x”},
{name: “iPad”, model: “Pro”}
]
}
}

13. Type Definition and Resolvers
type Product {
id: ID!
name: STRING
description: STRING
devices: [Device]
}

14. The Schema
type Query {
product(id: ID!): Product
products: [Product]
device(id: ID!): Device
devices: [Device]
}
type Mutation {
addProduct(id: ID!): Product
updateDevice(id: ID!): Device
}

15. The Resolvers
const Resolvers = {
products: () => db.products.list,
product: (parent, { id }) => db.products.findByPk(id)
}

16. Problems
● N+1 queries
● Growing query complexity
● Error handling
● HTTP caching

17. Data
Backend
Web Client
GraphQL
Mobile Client

18. console.log(“Thank you!”)