GraphQL

https://goo.gl/xwJSxY

About me

Formado em Sistemas de Informação
Mantenedor do ng-cordova-oauth, Ionic Flat Colors
Fullstack no Saúde Vianet
Software Engineer Jusbrasil
Software Engineer CW (Mobile)
Frontend Engineer Xing.com
Guitarrista e baixista nas horas vagas

@matheusrocha89

@matheusrocha

React Salvador: Matheus (Brian)

Antes do GraphQL

MVC

Cresce o mercado mobile.

E agora?

REST

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

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

E se precisarmos de dados mais complexos?

Criamos mais 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

Retorna mais dados do que você realmente precisa

Agora temos um sério problema

Surge o GraphQL

2012

GraphQL é criado e usado internamente pelo Facebook

2015

GraphQL é liberado Open Source pelo Facebook

Mas o que era esse tal de 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."

Quais as vantagens disso?

GraphQL

Client

Backend

GraphQL

Client

Backend

Novo mindset

Conceitos

Tipagem

Tipos

Int
Float
String
Boolean
ID
Enum

Mas...

Nada impede de você criar os seus próprios tipos de dados

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

Tipos Query e 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

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

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

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! Eu defino meu grafo mas... como ele sabe buscar esses dados?

Resolvers

Parâmetros do Resolver

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 }),
  },
};