A talk about practical usage of GraphQL and production supporting of REST and GraphQL simultaneously

1. Migration
microservices to
GraphQL

2. API

3. function getUser(name: string): User {
return db.getUserByName(name);
}
Typed request argumentes
Type of response

4. RPC (1960s, CORBA, XML, JSON, Thrift)
SOAP (WSDL, XML)
REST (HTTP)

5. REST
+ People got sick of SOAP
+ HTTP 1/1
+ Extra simplicity = fast development
+ Good for CRUD

6. Resources
POST /users
{name: "Homer"}
OPTIONS /users
Access-Control-Request-Method:POST

7. Resources
GET /users?name=??
GET /users?name=Homer,Marge
GET /users?name=..&limit&offcet
GET /users?name&limit&token
• 1 nesting level
• Characters escaping
• 2048 characters

8. Resources
PUT/PATCH /users/1
{name: "Homer2"}
{
"name": "Homer",
"children": [
{
"name": "Bart",
},
{
"name": "Lisa"
}
]
}

9. Backend
app.post((req, res) => {
const user = getUser(req.headers.user_id);
const user = getUser(req.query.user_id);
const user = getUser(req.path.user_id);
const user = getUser(req.body.user);
});

10. function getUser(name: string): User {
return db.getUserByName(name);
}
Typed request argumentes
Type of response

11. We are at wrong level
of abstraction

12. GraphQL
• Get what you really need
• Client specific
• Transport agnostic
• Rich type system
• A lot of web features

13. REST GraphQL
Auto
documented
+/-
Swagger,
ApiDoc,
Blueprint
+
Easy to use +/- +
Easy to
develop
- +
Flexible - +
Powerful - +

14. But REST is still an
industry standart

15. const QueryType = new GraphQLObjectType({
name: 'DataQuery',
fields: () => ({
post: {
type: PostType,
args: {
id: {
name: 'id',
type: GraphQLInt
},
journal: {
name: 'journal',
description: 'The journal slug',
type: GraphQLString
},
post: {
name: 'post',
description: 'The post slug',
type: GraphQLString
}
},
resolve: (user, {id, journal, post}) => {
return Post.authorise(user, {id, journal, post})
.then(post => post && post.toJSON());
}
}
})

17. • JSON Schema
• Good specification
• Bad ecosystem

18. "/users/findByName": {
"get": {
"description": "Multiple status values can be provided with
comma separated strings",
"operationId": "findUsersByStatus",
"produces": ["application/xml", "application/json"],
"parameters": [{
"name": "name",
"in": "query",
"description": "User name",
"required": true,
"type": "array",
"items": {"type": "string"},
}],
"responses": {
"200": {
"description": "successful operation",
"schema": {"type": "array", "items": {"$ref":
"#/definitions/User"}}
}, "400": {"description": "Invalid status value"}
},
"security": [{"store_auth": ["read:users"]}]

19. Building types

20. new GraphQLSchema({
query: new GraphQLObjectType({
name: 'Query',
fields: () => ({
get_user_id: {
type: UserType,
args: {
id: {
name: 'id',
type: GraphQLInt
}
},
resolve: (id) => buildRequestWithSwagger()
}
})
})
});
GET /user/123
Swagger parameters

21. Mutations
x-mutation
POST/PUT/DELETE

22. Gateway
GQL request
Adapter
ms1
ms2
REST request
GQL/REST
GQL/REST
function getUser(name: string): User {
return db.getUserByName(name);
}

23. Frontend
Smart caching:
GET /users
GET /user/123
Helpful tools and debugging
(Client knows about our schema and types
Get only data that you need

24. Frontend
• Cursor connections
• Subscriptions
• Batching
• Defered delivering
• Fragments composition

25. Precautions
No GraphQL types namespaces
campaigns_get_campaigns_shop_shop_id_products_id
No validation for input types
lokka
React
Apollo
Vanila

26. Thanks
github.com/yarax/typelint
twiitter.com/raxpost
yarax.ru