The AJAX, The REST and The GraphQL

The AJAX, The REST & The GraphQL Ivan Chernov, July
2017

About me • Python developer @ Ostrovok.ru • Maintain and
develop: ◦ Site backend ◦ Email marketing platform ◦ Booking service

About me • Python developer @ Ostrovok.ru • Maintain and
develop: ◦ Site backend ◦ Email marketing platform ◦ Booking service • Past three month also work on frontend (:

What’s the problem? { "status": "error", "error": "status" }

It’s simple! { "status": "error", # request status "error": "status"
# wrong status in DB }

Agenda • Brief history • REST • GraphQL ◦ Overview
◦ Comparison to REST ◦ Practical notes

First attempt <html> <body> <h1>Hello world!</h1> <p>Who did this in
notepad.exe?</p> </body> </html>

Asynchronous Javascript And XML Browser UI Javascript Web server Database
Server side

REST is an architecture pattern • Client-Server • Layered System
• Stateless • Cacheability • Uniform Interface

REST applied to Web service • Two URL type ◦
https://my.cool.blog/posts/ ◦ https://my.cool.blog/posts/1/ • HTTP verbs for manipulation ◦ Read - GET ◦ Create/Update/Delete - POST/PUT/DELETE

GraphQL • Query language for your API

GraphQL • Query language for your API ◦ Backend defines
scheme & queries

scheme & queries ◦ Client sends a request with the queries

scheme & queries ◦ Client sends a request with the queries ◦ And gets the data in single response

type User { id: ID username: String avatarUrl: String }
type Comment { post: Post text: String rating: Int author: User createdAt: Date } Describe your schema type Post { id: ID title: String body: String preview: String author: User comments: [Comment] }

pip install graphene-django

Django graphene I # app/blog/schema.py import graphene from graphene_django.types import
DjangoObjectType from .models import Post class PostType(DjangoObjectType): class Meta: model = Post

Django graphene II class Query(graphene.AbstractType): post = graphene.Field(PostType, id=graphene.Int(required=True)) def
resolve_post(self, args, context, info): return Post.objects.prefetch_related(“comments”).filter(id=args[“id”])

GraphQL - get post title Request { post(id: 1) {
title } } Response { “post”: { “title”: “Hello!” } }

REST - get post title Request GET /posts/1/ Response {
“post”: { “title”: “Hello!”, “body”: “...”, “user_id”: 1, ... } }

REST - get post title Request GET /posts/1/?fields=title Response {
“post”: { “title”: “Hello!” } }

GraphQL - post & comments Request { post(id: 1) {
title comments { text } } } Response { “post”: { “title”: “Hello!”, “comments”: [{ “text”: “Hi!” }] } }

REST - post & comments Request GET /posts/1/?fields=title Response {
“post”: { “title”: “Hello!” } }

REST - post & comments Request GET /posts/1/comments/ Response {
“comments”: [{ “text”: “Hi!” }] }

REST - post & comments Request GET /posts/1/?with=comment s Response
{ “post”: { “title”: “Hello!”, “comments”: [{ “text”: “Hi!” }] } }

Django graphene III class Query(graphene.AbstractType): post = graphene.Field(PostType, id=graphene.Int(required=True)) me
= graphene.Field(UserType) def resolve_post(self, args, context, info): return Post.objects.prefetch_related(“comments”).filter(id=args[“id”]) def resolve_me(self, args, context, info): # context is same as request if context.user.is_authenicated(): return context.user

GraphQL - profile, post & comments Request { me {
username }, post(id: 1) { ... } } Response { “me”: { “username”: “Ivan” }, “post”: { ... } }

REST - profile, post & comments Request GET /posts/1/?with=comment s
Response { “post”: { “title”: “Hello!”, “comments”: [{ “text”: “Hi!” }] } }

REST - profile, post & comments Request GET /me/ Response
{ “me”: { “username”: “Ivan” } }

Query language (Query def) Request query PostAndComments($postId: Int) { post(id:
$postId) { title comments { text } } Variables { “postId”: 1 }

Query language (other features) • Defer/Stream

Query language (other features) • Defer/Stream • Subscriptions

Query language (other features) • Defer/Stream • Subscriptions • Mutations

Practical notes I • Libraries are not good ◦ No
stable libs for some langs (golang) ◦ Not all features are implemented (python)

Practical notes II • If you have microservices ◦ Don’t
implement GraphQL in each of them ◦ Do API gateway with GraphQL to REST ▪ Apollo Server (node.js)

Practical notes III • GraphQL schema != database schema ◦
Database schema describes how you store the data

Database schema describes how you store the data ◦ GraphQL schema describes how clients use the data

Database schema describes how you store the data ◦ GraphQL schema describes how clients use the data ◦ P.S. blog was an example

GraphQL Summary Pros Cons

GraphQL Summary Pros 1. Strongly typed Cons

GraphQL Summary Pros 1. Strongly typed 2. Automated docs Cons

GraphQL Summary Pros 1. Strongly typed 2. Automated docs 3.
Flexible Cons

Flexible Cons 1. Lack of control

Flexible Cons 1. Lack of control 2. Query optimization

Flexible Cons 1. Lack of control 2. Query optimization 3. Rate limit

Links 1. Read a. http://graphql.org b. http://docs.graphene-python.org/en/latest/ c. http://engineering.remind.com/graphql-initiative-at-remind/ d.
https://developer.github.com/v4/guides/intro-to-graphql/ 2. Try a. https://github.com/vanadium23/mp-graphql-blog/ b. https://developer.github.com/v4/explorer/

Questions? P.S. follow me → @vanadium23

The AJAX, The REST and The GraphQL

The AJAX, The REST and The GraphQL

More Decks by Moscow Python Meetup

Other Decks in Programming

Featured

Transcript