GraphQL:

Evgenii Shkodin

Front-end developer @ Evil Martians

basics and

emotions

GraphQL:

Evgenii Shkodin

Front-end developer @ Evil Martians

101 & 💜

Open-source

Front-end

Open-source

Back-end

Facebook mobile, 2011

History

Facebook native mobile, 2012

RESTful API

FQL

GraphQL for internal use, 2012

Public release of GraphQL specification, July 2015

Present day

RESTful API

GET /photos?top=3

{
  description
  src
  img_src
  comments
  likes
}

GET /friends?top=3

{
  name
  url
  avatar_url
  city
  job_title
  job_company
}

AdHoc requests

GET /user/:id/main_view

{
  name
  avatar_url
  bio
  photos(3) {
    src
  }
  friends(3) {
    name
    avatar_url
  }
}

Over-fetching

RESTful API and AdHoc requests

Under-fetching

RESTful API and AdHoc requests

Data mapping

RESTful API and AdHoc requests

Unpredictability

RESTful API and AdHoc requests

Difficult cross-platform support

RESTful API and AdHoc requests

How we think?

Objects

Properties

Relations

What is GraphQL?

Query language

What is GraphQL?

Execution engine

What is GraphQL?

Basic concepts

{
  me {
    name
  }
}

{
  "me": {
    "name": "Evgenii Shkodin"
  }
}

Hello, world!

Basic concepts

Query

Mutation

Subscription

Entry points

Basic concepts

query GET_MAIN_DATA {
  me {














  }
}

name

bio

avatarLg: avatar_url(size: 168)

avatarSm: avatar_url(size: 40)

socials {
  url
}

photos(limit: 3) {
  src
}

friends(limit: 3) {
  name
  avatar_url(size: 100)
}

Query

Mutation

Subscription

Entry points

Basic concepts

mutation CREATE_POST($value: String!) {
 createPost(value: $value) {














 }
}

author {
  name
  avatar_url(size: 40)
}

body

id

date

...

Entry points

Basic concepts

Query

Mutation

Subscription

subscription FEED_UPDATES {
 postAdded {










 }
}

author {
  name
  avatar_url(size: 40)
}

body

id

date

...

Directive

Basic concepts

query getUser($withFriends: Boolean) {
  me {
    name
    friends @include(if: $withFriends) {
      name
    }
  }
}

schema: {
  query: Query
  mutation: Mutation
  subscription: Subscription
}

Query

Mutation

Subscription

Schema

Basic concepts

GraphQL SDL — schema definition language

Basic concepts

Strong typing

Root types

Type checking

type Query {
  

}

me: User

user(id: ID!): User

type Mutation {



}

type Subscription {
  
}

createPost(input: PostInput!): Post!

editPost(id: ID!, input: PostInput!): Post!

deletePost(id: ID!): ID!

postAdded: Post!

Scalar types+

Type checking

type User {
  id: ID!
  name String
  balance: Float!
  friends(limit: Int! = 10): [User!]
  friends_count: Int
  bio: String
  isPremium: Boolean!
}

Resolvers

Query: {
  user(obj, args, context, info) {
    return context.db.loadUserByID(args.id)
  }
}

User: {
  name(obj, args, context, info) {
    return obj.name
  }
}

**/* Intermission */**

cute animals gif therapy

**/* Intermission */**

✨ Introspection ✨

ask a GraphQL schema for information about what queries it supports

🔮 GraphiQL 🔮

An in-browser IDE for exploring GraphQL.

(demo)

https://github.com/graphql/graphiql

https://developer.github.com/v4/explorer/

⚙️ GraphQL CLI ⚙️

Command line tool for common GraphQL development workflows

(demo)

https://github.com/graphql-cli/graphql-cli

Command	Description
graphql create [directory]	Bootstrap a new GraphQL project
graphql get-schema	Download schema from endpoint
graphql schema-status	Show source & timestamp of local schema
graphql query <file>	Run query/mutation
graphql diff	Show a diff between two schemas

⚙️ GraphQL CLI ⚙️

💡GraphQL extension💡 for VS code

Introspection 💜 IDE

(demo)

https://github.com/kumarharsh/graphql-for-vscode

Autocompletion

GraphQL extension for VS code

Query validation

GraphQL extension for VS code

Snippets

GraphQL extension for VS code

Syntax highlighting

GraphQL extension for VS code

🧠 GraphQL Faker 🧠

Mock or extend your GraphQL API with faked data. No coding required.

(demo)

https://github.com/APIs-guru/graphql-faker

🧠 GraphQL Faker 🧠

POLLO

Client

Server

Engine

https://www.apollographql.com/

🚀 Apollo Boost 🚀

Apollo Boost is a zero-config way to start using Apollo Client

https://github.com/apollographql/apollo-client/tree/master/packages/apollo-boost

npm install apollo-boost graphql graphql-tag

import ApolloClient from "apollo-boost";
import gql from "graphql-tag";

const client = new ApolloClient({
  uri: "/graphql"
});

client
  .query({
    query: gql`
      {
        character(id: "1") {
          name
        }
      }
    `
  })
  .then(result => console.log(result));

🚀 Apollo Boost 🚀

⚖️ gql2ts ⚖️

Generate TypeScript (and Flow) type interfaces from GraphQL types and query definitions.

(demo)

https://github.com/avantcredit/gql2ts

⏱Defer directive ⏱

load relevant data first

(demo)

https://github.com/avantcredit/gql2ts

⏱Defer directive ⏱

query GET_FEED($page: Int!) {
 me {
  feed(page: $page) {









  }
 }
}

author {
  name
  avatar_url(size: 40)
}

body

...

date

id

comments @defer {
  author {
    name
    avatarUrl(size: 40)
  }
  text
  likes
}

Talks & Articles

Talks

Articles

Useful links

cultofmartians.com

Questions?

@evilmartians_ru