Використання BFF з GraphQL

текст перекладу
Концепція Backend for Frontend (BFF) виникла для задоволення зростаючих вимог до користувацьких досвідів на різних пристроях і платформах. Вона виділяється як швидке і ефективне рішення для побудови сучасних додатків, особливо в архітектурах, що базуються на мікросервісах.

GraphQL — це мова запитів для API і середовище виконання для виконання цих запитів на основі визначеної схеми даних. Розроблений Facebook у 2012 році та відкритий для публіки в 2015 році, GraphQL був створений для подолання деяких обмежень стандарту REST, пропонуючи більше гнучкості та ефективності.

Найкращі друзі назавжди. Джерело Freepik

Що таке BFF?

BFF (“Backend for Frontend”) — це архітектурний стандарт, де ви створюєте спеціалізований бекенд для кожного фронтенду (користувацького інтерфейсу). Замість одного універсального бекенду для всіх клієнтів, BFF адаптується до специфічних потреб кожного інтерфейсу, таких як:

• Мобільні додатки
• Веб-додатки
• Інтернет-пристрої (IoT)

Кожен фронтенд має свій окремий BFF, який слугує як проміжний шар між ним і мікросервісами, забезпечуючи ефективне задоволення специфічних вимог до даних, формату та робочих процесів.

Як використовувати GraphQL:

GraphQL дозволяє клієнтам запитувати лише ті дані, які їм потрібні, і нічого більше. Він працює на основі схеми, яка визначає доступні типи даних та операції, які можна виконувати.

Переваги BFF:

1. Кастомізація

BFF дозволяє кожному фронтенду отримувати дані саме в тому форматі та обсязі, які йому потрібні, усуваючи непотрібну обробку на клієнтській стороні.

2. Спрощення фронтенду

Фронтенди можуть делегувати складну логіку та виклики до API BFF, роблячи код інтерфейсу більш чистим і легким для підтримки.

3. Покращення користувацького досвіду

Завдяки швидшим та оптимізованим відповідям, BFF зменшує затримки, які сприймає кінцевий користувач.

4. Ізоляція змін

Оновлення на одному фронтенді чи зміни в мікросервісах не впливають на інші системи, поки BFF зберігає свої відповідальності.

5. Безпека

BFF слугує як шар абстракції та контролю, дозволяючи реалізовувати аутентифікацію та авторизацію для кожного клієнта.

Коли використовувати BFF?

Типові сценарії для впровадження BFF:

1. Мультиплатформні додатки: Коли у вас є кілька клієнтів (веб, мобільний, IoT), які використовують одні й ті ж дані, але з різними вимогами до формату або логіки.
2. Складність фронтендів: Якщо фронтенд виконує багато бізнес-логіки або викликає кілька API, BFF може спростити цей процес.
3. Кастомізація робочих процесів: Коли різні клієнти потребують оптимізованих бізнес-процесів для своїх специфічних потреб.
4. Покращення користувацького досвіду: Для зменшення затримок і покращення сприйнятої продуктивності, об’єднуючи та оптимізуючи виклики до мікросервісів.
5. Інтеграція з застарілими системами: BFF може бути адаптаційним шаром між сучасними фронтендами та застарілими системами.

Практичний приклад:

Уявіть, що ви будуєте платформу для електронної комерції з наступними фронтендами:

• Веб-додаток
• Мобільний додаток

Обидва клієнти споживають інформацію про продукти та замовлення, але з суттєвими відмінностями:

1. Веб: Потрібні повні списки продуктів з додатковими деталями, такими як відгуки та рекомендації.
2. Мобільний: Потрібна компактна версія продуктів, з акцентом на основну інформацію через обмежений розмір екрану та використання мобільних даних.

Рішення з BFF

Тут я рекомендую створити два BFF:

1. BFF для Web

• Збирає детальну інформацію з мікросервісів "Продукти", "Відгуки" і "Рекомендації".
• Повертає дані у форматі, який відповідає макету сайту.

2.

текст перекладу

BFF для мобільного додатку

• Додає лише основні дані з мікросервісів, такі як назва, ціна та зображення продукту.
• Застосовує стиснення або кешування для економії пропускної здатності.

Тут ми також можемо додати ще один інструмент, а саме GraphQL, і завдяки цьому отримаємо гнучкість у запитах до даних, де фронтенди можуть запитувати саме ті дані, які їм потрібні, що усуває потребу в створенні кількох конкретних REST endpoint в BFF. Це зменшує складність розробки та уникає проблем з overfetching (завантаженням зайвих даних) або underfetching (недостатнім завантаженням даних).

Запит для WEB:

query {  
 products {  
 id  
 name  
 price  
 reviews {  
 user  
 comment  
 }  
 recommendations {  
 id  
 name  
 }  
 }  
}

Запит для Mobile:

query {  
 products {  
 id  
 name  
 price  
 imageUrl  
 }  
}

Різниця між REST і GraphQL

REST:

• Запит 1: GET /products
• Запит 2: GET /products/{id}/reviews
• Запит 3: GET /users/{id}

GraphQL:

query {  
 products {  
 id  
 name  
 reviews {  
 user {  
 name  
 }  
 comment  
 }  
 }  
}

Потік викликів

1. Клієнт (веб або мобільний) робить один запит до BFF.
2. BFF використовує резолвери для консолідації даних з різних мікросервісів.
   3.
   текст перекладу
   ## BFF повертає лише запитувані дані для фронтенду оптимізованим чином.

Frontend (Web/Mobile) → BFF → Мікросервіси

Практичний приклад:

Уявіть електронну комерцію, де потрібно відображати продукти, відгуки та інформацію про користувачів:

Примітка: Моя основна стек технологій — це Java та Spring, тому я буду використовувати цей приклад.

Додайте ці залежності до проєкту:

 org.springframework.boot  
 spring-boot-starter-web  




 com.graphql-java-kickstart  
 graphql-spring-boot-starter  
 11.1.0  




 com.graphql-java-kickstart  
 graphql-java-tools  
 11.1.0  




 org.projectlombok  
 lombok  
 1.18.28  
 provided  

Визначення схеми GraphQL

Створіть файл schema.graphqls в каталозі src/main/resources:

type Product {  
 id: ID  
 name: String  
 price: Float  
}  

type Query {  
 products: [Product]  
}

Сутність Product

Створіть клас Product в пакеті com.example.graphql.model:

package com.example.graphql.model;  

import lombok.AllArgsConstructor;  
import lombok.Data;  

@Data  
@AllArgsConstructor  
public class Product {  
 private String id;  
 private String name;  
 private Double price;  
}

Сервісний шар

Імплементуйте бізнес-логіку в класі ProductService в пакеті com.example.graphql.service:

package com.example.graphql.service;  

import com.example.graphql.model.Product;  
import org.springframework.stereotype.Service;  

import java.util.List;  

@Service  
public class ProductService {  
 public List getAllProducts() {  
 return List.of(  
 new Product("1", "Ноутбук", 2500.00),  
 new Product("2", "Смартфон", 1500.00),  
 new Product("3", "Навушники", 200.00)  
 );  
 }  
}

Resolver для GraphQL

Створіть resolver ProductQueryResolver в пакеті com.example.graphql.resolver:

package com.example.graphql.resolver;  

import com.coxautodev.graphql.tools.GraphQLQueryResolver;  
import com.example.graphql.model.Product;  
import com.example.graphql.service.ProductService;  
import org.springframework.stereotype.Component;  

import java.util.List;  

@Component  
public class ProductQueryResolver implements GraphQLQueryResolver {  

 private final ProductService productService;  

 public ProductQueryResolver(ProductService productService) {  
 this.productService = productService;  
 }  

 public List getProducts() {  
 return productService.getAllProducts();  
 }  
}

Головний клас

Переконайтеся, що головний клас вашого додатку налаштований правильно:

package com.example.graphql;  

import org.springframework.boot.SpringApplication;  
import org.springframework.boot.autoconfigure.SpringBootApplication;  

@SpringBootApplication  
public class GraphqlApplication {  
 public static void main(String[] args) {  
 SpringApplication.run(GraphqlApplication.class, args);  
 }  
}

Тестування API

Запустіть додаток на основі Spring Boot.
текст перекладу
Точка доступу для GraphQL буде доступна за адресою: http://localhost:8080/graphql

query {  
 products {  
 id  
 name  
 price  
 }  
}

Очікуваний відповідь:

{  
 "data": {  
 "products": [  
 { "id": "1", "name": "Ноутбук", "price": 2500.0 },  
 { "id": "2", "name": "Смартфон", "price": 1500.0 },  
 { "id": "3", "name": "Навушники", "price": 200.0 }  
 ]  
 }  
}

Висновок

Використання Backend for Frontend є потужною стратегією для покращення обслуговування, продуктивності та досвіду користувача в сучасних додатках. Це дозволяє кожному фронтенду мати оптимізований бекенд для своїх потреб, спрощуючи загальну складність системи. Хоча це не є необхідним для всіх проєктів, воно є особливо корисним у архітектурах, які обслуговують кілька платформ і пристроїв.

Посилання:

Текст створений за допомогою штучного інтелекту

[

GraphQL | Мова запитів для вашого API

Почніть використовувати GraphQL — це мова запитів для API та середовище виконання для задоволення цих запитів з вашими наявними даними…

graphql.org

](https://graphql.org/?source=post_page-----48dffe51e4c7--------------------------------)

https://medium.com/itautech/voc%C3%AA-sabe-o-que-%C3%A9-bff-saiba-mais-sobre-o-conceito-e-as-melhores-pr%C3%A1ticas-para-seu-uso-c6aded927f1e

Перекладено з: Uso de BFF com GraphQL