Переход от REST API к GraphQL на примере реальных проектов

Инструменты для документации (swagger и тд)

Процесс внедрения нового свойства в сущность товара

ВНЕДРЕНИЕ GRAPHQL РАЗРАБОТКА С МИКРОСЕРВИСАМИ

ВНЕДРЕНИЕ GRAPHQL ОПТИМИЗАЦИЯ РАЗРАБОТКИ

4.82M

Categories:

internet

database

Переход от REST API к GraphQL на примере реальных проектов

1. Переход от REST API к GraphQL на примере реальных проектов

Антон Морев, Wormsoft

2. Антон Морев

Приложения
Сайты
Системы автоматизации (CRM, ERP)
Маркетинг
Сопровождение проектов
IT-Директор
Оптимизация процессов разработки
Review ключевых проектов

3.

Взаимодействие с сервером
DATABASE
CACHE
OTHER API
API
КЛИЕНТ
СЕРВЕР
QUEUE
… ETC

4.

Стандартное решение на REST
GET /goods
POST /order

5. ДОКУМЕНТАЦИЯ

6.

№1
БЕЛЫЙ ЛИСТ
“Я не хочу писать
документацию,
я хочу писать код”
© “Senior” Developer

7.

№2
МУДРЕЦ
в каком поле у нас
текущий статус?
спроси у Ивана - он
знает где у нас это

8.

№3
WORD, EXСEL ,
GOOGLEDOC
«Мы храним документацию
в docx файлах под git
со всеми JSON ответами и
запросами»

9. Инструменты для документации (swagger и тд)

№4
Инструменты для документации
(swagger и тд)

10. РАЗГРАНИЧЕНИЕ ДАННЫХ

11.

Количество запросов
HEADER
getHeaderData
PRODUCT CARD
getFooterData
getProductCardData
REVIEWS
CONNECTED
PRODUCTS
FOOTER
getReviewsData
getDeliveryData

12.

КАТАЛОГ
ТОВАРОВ
КОРЗИНА
ТОВАР
ИСТОРИЯ
ЗАКАЗОВ
ОТЗЫВЫ
КАРТОЧКА
ТОВАРА

GET /allRoundProduct?id=123
{
"connectedProducts": [],
"id": 123,
"photos": [],
"title": "Bentley For Men",
"countInBasket": 3,
"price": 100,
"reviews": [],
"description": "Лучшие духи",
"brand": "Bentley",
"variants": []
}

14. СВОЯ МОДЕЛЬ НА КАЖДУЮ СИТУАЦИЮ

15.

{
"id": 123,
"title": "",
"price": "",
GET /product/card?id=123
"description": "",
"brand": "",
"photos": []
}

16.

[
{
"id": 123,
"title": "",
GET /product/connected?id=123
"price": 100,
"photo": {}
}
]

17.

[
{
"id": 123,
"title": "",
GET /product/list
"photo": [],
"rating": 3,
"price": 100
}
]

18.

ИЕРАРХИЧЕСКАЯ
МОДЕЛЬ
{
"commonInfo": {},
"cardInfo": {},
GET /product/full?id=123
"listInfo": {},
"basketInfo": {}
}

19. Интернет-магазин Решения на REST

Интернет-магазин
Решения
на на
REST
Интернет-магазин.
Решения
REST
product/full?id=1&fields=cardInfo,basketInfo
ЯЗЫК ЗАПРОСОВ
API
только cardInfo и basketInfo

20.

getModel?id=1&fields=title,
description,price
getModel?id=1&fields=title,price,
connectedProducts.title,
connectedProducts.description
getModel?id=1&fields= title,description,
rating,price, reviews.user.name,reviews.
user.id,reviews.date,reviews.text,
photos.src,photos.alt,
connectedProducts.title,
connectedProducts.price,
connectedProducts.rating,
dicsount.rate,discount.amount

21.

Интернет-магазин. Решения на REST
МНОГО
ЗАПРОСОВ
(удобно)
ОДИН
ЗАПРОС
(неудобно)

22. Интернет-магазин Желаемое решение

Интернет-магазин
Интернет
магазин. Желаемое
Желаемоерешение
решение
Автоматическая
документация
Можно выбирать что
именно мы хотим
получить
Несколько сущностей
в одном запросе

23. РЕАЛИЗАЦИЯ НА GRAPHQL

24.

ОПИСАНИЕ
СХЕМЫ
type Product {
id: ID!
title: String
description: String
}
type Query {
product (id: ID!): Product
}

25.

ЗАПРОС
25
query {
product (id: 123)
title
description
}
}
{

26.

{
"product": {
"title": "Духи",
"description":"Описание товара…"
}
ОТВЕТ
}

27.

ВАРИАНТЫ
ТОВАРА
type Product {
id: ID
title: String
description: String
variants: [ProductVariant]
}

28.

ПОЛУЧЕНИЯ
ПОЛЯ VARIANTS
query {
product (id: 123) {
title
variants {
id
title
}
}
}

29.

{
"title": "Chanel Chance Eau Tendre",
"variants": [
{
"id": 1,
"title": "Подарок, 200мл"
},
{
"id": 2,
"title": "Пробник, 1.5мл "
}
]
ОТВЕТ
}

30.

type ProductVariant {
ИНТЕРНЕТ-МАГАЗИН
РЕШЕНИЯ НА
GRAPHQL
id: ID
title: String
price: Float
priceDiscount: Float
image: ImageModel
}

31.

ЗАПРОС ДЛЯ
СТРАНИЦЫ
query {
header {
#header fields
}
product (id: 123) {
#product fields
}
footer {
#footer fields
}
}

32.

33.

Процесс внедрения нового свойства
в сущность товара
Выбор/Создание запроса
BACKEND
ДО
Добавление нужного
поля в response
Расширение документации
Реализация логики
получения поля

34. Процесс внедрения нового свойства в сущность товара

Процесс
внедрения
нового
свойства
в сущность товара
Выбор/Создание запроса
BACKEND
ПОСЛЕ
Добавление нужного
поля в тип
Расширение документации
Реализация логики
получения поля

35. Внедрение GraphQL Интернет-магазин

Процесс
внедрения
нового свойства
в сущность товара
Выяснение в каком запросе
было обновление
FRONTEND
ДО
Изучение документации
Новый endpoint/расширение
старого
Использование поля

36.

Процесс внедрения нового свойства
в сущность товара
Добавление нужного поля в
GQL запрос за сущностью
FRONTEND
ПОСЛЕ
Изучение документации
Новый endpoint/расширение
старого
Использование поля

37. ВНЕДРЕНИЕ GRAPHQL РАЗРАБОТКА С МИКРОСЕРВИСАМИ

38.

Банк криптовалюты
ЯДРО СИСТЕМЫ
Интерфейс
WALLET RPC
КРИПТОВАЛЮТНЫЕ
БИРЖИ

39.

ИНТЕРФЕЙС
REST
PHP Yii2
API Module
Email module
Wallet RPC (C++)
Payments module
Deposit module
Auth module
Exchange API

40.

class TransactionsController extends Controller
{
public function actionIndex($page = 1, $type = null)
{
$userId = Yii::$app->user->id;
return $this->transactionsRepository
->getTransactions($userId, $page, $type);
}
}

41.

Docs
Docs
Email service
(GoLang)
Money module
(PHP)
Docs
Интерфейс
API Core Server
(PHP Yii2)
Docs
Exchanges Services
(PHP, NodeJS)
Chat service
(NodeJS)

42.

'resolve' => function($value, $args, $context, ResolveInfo $info) {
//Получение любой информации
}
ПРЯМОЙ ЗАПРОС В БД
'resolve' => function($value, $args, $context, ResolveInfo $info) {
return DB::getInstance()->select('SELECT * from products');
},
СОБСТВЕННЫЙ РЕПОЗИТОРИЙ
'resolve' => function($value, $args, $context, ResolveInfo $info) {
return $context->productRepository->getProducts($args['page']);
}

43.

query {
user {
payments {
GET /user/payments/list
list {
id
amount
}
}
}
}

44.

GET /user/payments /list
GET /user /info
GET /user /system /status
GET /user /notifications /list
query {
user {
payments {
list {
id
amount
}
}
info {
name
money
}
system {
status
}
notifications {
list {
id
text
}
}
}
}

45. ВНЕДРЕНИЕ GRAPHQL ОПТИМИЗАЦИЯ РАЗРАБОТКИ

46.

Внедрение GraphQL. Админ-панель
API Server
SITE
сбор данных с API
сервера
отображение данных
Frontend логика
сущности
бизнес логика
обработка заявок
система оповещений
Admin Panel
управление
примитивными
CRUD сущностями
управления бизнес
логикой (формы)

47.

Внедрение GraphQL. Админ-панель
Описание
сущности
автоформирование
GraphQL схема
resolvers для
каждого поля
каждой сущности
интерфейс админпанели

48.

{
“type”: “input_text”,
“label”: “Название”
“name”: “title”
}
metro {
list {
items {
title
}
}
}

49.

query {
offices {
title
photoSrc
address
metro {
list {
title
}
}
shortDescription
price {
month
}
}
}

50.

Изменение в процессе добавления/
изменения примитивной сущности
BACKEND
ДО
ПОСЛЕ
Разработка
Логики хранения
данных
Разработка
логики
CRUD
Разработка
интерфейса
управления
Добавление/
расширение
запроса
Обновление
документаци
и API
Обновление
конфигурации
Разработка
логики
CRUD
Разработка
интерфейса
управления
Добавление/
расширение
запроса
Обновление
документаци
и API

51.

Изменение в процессе добавления/
изменения примитивной сущности
FRONTEND
ДО
Изучение
документации
Добавление нового
запроса
Обработка данных
ПОСЛЕ
Изучение
документации
Расширение Query
Обработка данных

52. ОБНОВЛЕНИЕ ДАННЫХ ЧЕРЕЗ GRAPHQL

53.

GraphQL. Мутации
mutation {
office {
update (id:123, model: {title: "newTitle"})
}
}

54.

GraphQL. Обновление данных
{
taskModule {
task (id: 123) {
mainInfo (
title: “title”,
description: “description”
)
}
}
POST /taskModule/task/mainInfo?id=123
{
title: “title”,
description: “description”
}
}

55. 56. ОСОБЕННОСТИ GRAPHQL

57.

Обычный запрос в REST
API
Запрос
Парсинг
запроса
Получение
результата
Определение
контроллера
Запуск
контроллера
Ответ

58.

Как работать с GraphQL. Асинхронность
Ответ
Запрос
API
Парсинг запроса
Определение резолверов
Запуск резолвера
Запуск резолвера
…
Подготовка ответа
Запуск резолвера

59.

За чем следить в GraphQL?
N+1
Сложность
запросов
Сложность
контроля
Кэширование
Асинхронность
Порог
вхождения

60.

Особенности GraphQL. N+1
query {
task {
list {
id
title
}
}
}

61.

Особенности GraphQL. N+1
query {
task {
list {
id
title
subtask {
title
}
}
}
}

62.

Особенности GraphQL. N+1
'resolve' => function ($root) {
Loader::add($root->id);
return new Deferred(
function () use ($root) {
Loader::prepareData();
return Loader::get($root->id);
}
);
},
]

63.

Как работать с GraphQL. Сложность
запроса
task {
subTask {
subTask {
subTask {
subTask {
id
}
}
}
}
}

64.

ОГРАНИЧЕНИЕ
ГЛУБИНЫ ЗАПРОСА
Query Depth < 4
1. task {
2. subTask {
3. subTask {
4. subTask {
5. subTask {
6. id
}
}
}
}
}

65.

1. task {
3*i subTask {
3*i subTask {
3*i subTask {
3*i subTask {
3*i id
}
}
}
}
}
2
ОГРАНИЧЕНИЕ
СЛОЖНОСТИ ЗАПРОСА
3
4
5
6
Query Complexity < 40

66.

Как работать с GraphQL. Кэширование
Кэширование на уровне web-сервера
GET /api/info
cache
КЛИЕНТ
Приложение

67.

Как работать с GraphQL. Кэширование
Кэширование на уровне web-сервера
POST /graphql
КЛИЕНТ
Приложение
Кешировать на основании body

68.

Как работать с GraphQL. Кэширование
Кэширование на уровне web-сервера
GET /api/info
cache
Клиент
public function actionInfo()
Приложение
{
$query = ''; //фиксированный запрос
return GraphQLHandler::handleQuery($query);
}

69.

Внедрение GraphQL. Сложность
адаптации
Зачем GraphQL,
если и так сойдет?

70.

Внедрение GraphQL. Сложность
адаптации
А почему не
GraphQL?

71.

Как работать с GraphQL. Асинхронность
Запрос
Ответ
API
Парсинг запроса
Определение резолверов
1
Запуск резолвера
22
Запуск резолвера
Подготовка ответа
…
N
Запуск резолвера