GraphQL

About me

Frontend Engineer Xing

Guitar/Bass player

@matheusrocha89

@matheusrocha

Before the GraphQL

MVC

Mobile market growth.

What now?

REST

fetch('https://api.domain.com/v1/users/123');
...

{
    ...,
    data: {
        id: 123,
        firstName: '...',
        lastName: '...',
        email: '...',
        ...,
    }
}

And if we need more complex data and requests?

Create more endpoints

v1/users/123/friends
v1/users/123/posts
v1/users/123/last-posts
v1/users/123/friends/liked-pages
v1/users/123/friends/last-liked-pages
v1/users/123/friends/last-liked-pages/last-posts
v1/users/123/friends/last-liked-pages/posts-friends-liked
v1/users/123/friends/last-photos-and-pages-liked
v1/users/123/i-dont-have-any-idea-what-the-hell-is-this-anymore

Returns more data than what you really need

Now we have a serious problem

GraphQL comes up

2012

GraphQL is created and used internally by Facebook

2015

GraphQL is released Open Source by Facebook

But what is this GraphQL?

"GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data."

Advantages?

GraphQL

Client

Backend

GraphQL

Client

Backend

New mindset

Concepts

Typed

Types

Int
Float
String
Boolean
ID
Enum

But...

Nothing blocks you to create your own data types

type Character {
  name: String!
  appearsIn: [Episode]!
}

Types: Query and Mutation

Query

Mutation

type Query {
  posts: [Post]
  author(id: Int!): Author
}

type Mutation {
  upvotePost(postId: Int!): Post
}

Interfaces

interface Character {
  id: ID!
  name: String!
  friends: [Character]
  appearsIn: [Episode]!
}

type Human implements Character {
  id: ID!
  name: String!
  friends: [Character]
  appearsIn: [Episode]!
  starships: [Starship]
  totalCredits: Int
}

type Droid implements Character {
  id: ID!
  name: String!
  friends: [Character]
  appearsIn: [Episode]!
  primaryFunction: String
}

// Query

query HeroForEpisode($ep: Episode!) {
  hero(episode: $ep) {
    name
    ... on Droid {
      primaryFunction
    }
  }
}

Fragments


fragment comparisonFields on Character {
  name
  appearsIn
  friends {
    name
  }
}

{
  leftComparison: hero(episode: EMPIRE) {
    ...comparisonFields
  }
  rightComparison: hero(episode: JEDI) {
    ...comparisonFields
  }
}

Subscription

// Server
type Subscription {
  postAdded: Post
}


// Client

subscription {
  postAdded {
    id
    title
    content
  }
}

Schema

  type Author {
    id: Int!
    firstName: String
    lastName: String
    posts: [Post] # the list of Posts by this author
  }

  type Post {
    id: Int!
    title: String
    author: Author
    votes: Int
  }

  # the schema allows the following query:
  type Query {
    posts: [Post]
    author(id: Int!): Author
  }

  # this schema allows the following mutation:
  type Mutation {
    upvotePost (
      postId: Int!
    ): Post
  }

OK! I define my graph but... how does it know where to get the data?

Resolvers

Resolver's parameters

parent / root
args
context
info

import { find, filter } from 'lodash';

// example data
const authors = [
  { id: 1, firstName: 'Tom', lastName: 'Coleman' },
  { id: 2, firstName: 'Sashko', lastName: 'Stubailo' },
];
const posts = [
  { id: 1, authorId: 1, title: 'Introduction to GraphQL', votes: 2 },
  { id: 2, authorId: 2, title: 'Welcome to Meteor', votes: 3 },
];

const resolvers = {
  Query: {
    posts: () => posts,
    author: (_, { id }) => find(authors, { id: id }),
  },
  Mutation: {
    upvotePost: (_, { postId }) => {
      const post = find(posts, { id: postId });
      if (!post) {
        throw new Error(`Couldn't find post with id ${postId}`);
      }
      post.votes += 1;
      return post;
    },
  },
  Author: {
    posts: (author) => filter(posts, { authorId: author.id }),
  },
  Post: {
    author: (post) => find(authors, { id: post.authorId }),
  },
};

But...

Besides what I told

Dataloader (batching, caching).
Authorization.
Metadata that can be used.
Freedom to create pagination
Validation

Don't forget: Facebook uses GraphQL

So... it's ready

The product evolves faster

Where I can learn more

http://graphql.org/
https://www.howtographql.com/
https://services.github.com/on-demand/graphql/
https://github.com/blog/2412-learn-graphql-with-github
https://medium.com/netflix-techblog/our-learnings-from-adopting-graphql-f099de39ae5f
https://principledgraphql.com/