GraphQL:

Евгений Шкодин

Фронтенд-разработчик @ Злые Марсиане

основы и

эмоции

Frontend

GraphQL:

101 & 💜

Frontend

Евгений Шкодин

Фронтенд-разработчик @ Злые Марсиане

Open Source

Фронтенд

Open Source

Бэкенд

Facebook мобильные платформы, 2011

История

Facebook нативные приложения, 2012

RESTful API

FQL

GraphQL для внутреннего пользования, 2012

Публичный релиз спецификации GraphQL,

Июль 2015

Наши дни

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 запросы

GET /user/:id/main_view

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

Over-fetching

RESTful API и AdHoc запросы

Under-fetching

RESTful API и AdHoc запросы

Преобразование данных

RESTful API и AdHoc запросы

Непредсказуемость

RESTful API и AdHoc запросы

Сложность поддержки кроссплатформенности

RESTful API и AdHoc запросы

Как мы мыслим?

Объекты

Свойства

Взаимоотношения

(о данных)

Что такое GraphQL?

Язык запросов

Что такое GraphQL?

Движок обработки запросов

Что такое GraphQL?

Основные понятия

{
  me {
    name
  }
}

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

Hello, world!

Основные понятия

Query

Mutation

Subscription

Точки входа

Основные понятия

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

Точки входа

Основные понятия

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














 }
}

author {
  name
  avatar_url(size: 40)
}

body

id

date

...

Точки входа

Основные понятия

Query

Mutation

Subscription

subscription FEED_UPDATES {
 postAdded {










 }
}

author {
  name
  avatar_url(size: 40)
}

body

id

date

...

Директива

Основные понятия

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

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

Query

Mutation

Subscription

Схема

Основные понятия

GraphQL SDL —

язык описания схемы

Основные понятия

Строгая типизация

Корневые типы

Типизация

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!

Скалярные типы+

Типизация

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

Резольверы

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

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

**/* Перерыв */**

**/* Перерыв */**

✨ Интроспекция ✨

запросить у GraphQL схемы всю информацию о мутациях и запросах, которые она поддерживает

🔮 GraphiQL 🔮

Внутребраузерное IDE для исследования GraphQL API

(демо)

https://github.com/graphql/graphiql

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

⚙️ GraphQL CLI ⚙️

Инструмент командной строки для разработки с GraphQL

(демо)

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

Command	Description
graphql create [directory]	Cоздать по шаблону новый GraphQL проект
graphql get-schema	Скачать схему
graphql schema-status	Показать источник и временную отметку схемы
graphql query <file>	Выполнить запрос/мутацию
graphql diff	Показать различие между двумя схемами

⚙️ GraphQL CLI ⚙️

💡GraphQL расширение💡 для VSСode

Интроспекция 💜 IDE

(демо)

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

Автодополнение

GraphQL расширение для VSCode

Линтинг и валидация

GraphQL расширение для VSCode

Сниппеты

GraphQL расширение для VSCode

Подсветка синтаксиса

GraphQL расширение для VSCode

🧠 GraphQL Faker 🧠

Расширь GraphQL API fake-данными без единой строчки кода

(demo)

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

🧠 GraphQL Faker 🧠

POLLO

Client

Server

Engine

https://www.apollographql.com/

🚀 Apollo Boost 🚀

Apollo Boost — самый простой, zero-config, способ начать использовать 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 ⚖️

Конвертация GraphQL типов в TypeScript интерфейсы (и Flow-аннотации)

(demo)

https://github.com/avantcredit/gql2ts

⏱Директива defer⏱

Загрузка важных данных в первую очередь

(demo)

https://github.com/avantcredit/gql2ts

⏱Директива defer⏱

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
}

Доклады и статьи

Доклады

Статьи

Полезные ссылки

cultofmartians.com

Вопросы?

@evilmartians_ru

graphql-basics-and-emotions-ru

By iffjey

graphql-basics-and-emotions-ru

541

iffjey