HERO
GraphQL
Field Resolvers & Data Loaders
Optimiser les performances et simplifier l'architecture
Title Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin urna odio, aliquam vulputate faucibus id, elementum lobortis felis. Mauris urna dolor, placerat ac sagittis quis.
Title Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin urna odio, aliquam vulputate faucibus id, elementum lobortis felis. Mauris urna dolor, placerat ac sagittis quis.
Au programme
- đ§ Les Field Resolvers
- â ïž ProblĂšmes de l'implĂ©mentation actuelle
- đ Le problĂšme de l'Overfetch
- đ GraphQL avec REST
- ⥠Data Loaders : la solution
- đïž Architecture avant/aprĂšs
Qu'est-ce qu'un Field Resolver ?
- Fonctions qui récupÚrent les données pour chaque champ
- Résolution lazy : uniquement si demandé
- Séparation logique métier vs données
@Resolver(() => Cwt)
export class CwtFieldResolver {
@FieldResolver(() => Document, { nullable: true })
document(@Root() cwt: Cwt, @Ctx() { dataloaders }) {
if (!cwt.documentPath) return null;
return dataloaders.documentLoaders
.documentPathLoader.load(cwt.documentPath)
}
@FieldResolver(() => User, { nullable: true })
user(@Root() cwt: Cwt, @Ctx() { dataloaders }) {
if (!cwt.userId) return null;
return dataloaders.usersLoader
.getUserLoader.load(cwt.userId)
}
}
đš ProblĂšmes actuels
Use Cases lourds avec couplage fort
// â Ancien code - Use Case lourd
export class GetCwtListUsecase {
 constructor(
  private readonly cwtRepository,
  private readonly mulGateway,     // Dépendance
  private readonly documentGateway   // Dépendance
 ) {}
 async execute(filters) {
  const cwts = await this.cwtRepository.getList(filters)
  // Appels directs aux gateways
  for (const cwt of cwts) {
   cwt.document = await this.documentGateway
    .getDocument(cwt.documentPath)
   cwt.merchant = await this.mulGateway
    .getMerchant(cwt.merchantId)
  }
  return cwts;
 }
}
đ Le problĂšme de l'Overfetch
Récupération de données non nécessaires
- Gaspillage de bande passante
- Impact négatif sur les performances
- Surcharge inutile des serveurs
REST vs GraphQL
â Avec REST
// Frontend demande :
{ id, amount }
// API retourne TOUT :
{
 "id": "123",
 "amount": 1000,
 "documentPath": "/docs/file.pdf",
 "merchantName": "Merchant Corp",
 "beneficiaryDetails": {...},
 "createdAt": "2024-01-01",
 "updatedAt": "2024-01-15"
}
Â
REST vs GraphQL
â Avec GraphQL
# Frontend demande :
query GetCwtList {
 cwts { id, amount }
}
# GraphQL retourne exactement :
{
 "data": {
  "cwts": [
   { "id": "123", "amount": 1000 }
  ]
 }
}
Â
â ïž ConsĂ©quences
- Use cases surchargés
- ProblĂšme N+1
- Couplage fort
- Performance dégradée
1 requĂȘte liste + N requĂȘtes dĂ©tails = Performance catastrophique
đ GraphQL + REST
Pas besoin de tout réécrire !
// DataLoader qui appelle une API REST
class DocumentDataLoader {
constructor(private restClient: RestClient) {}
async batchLoad(documentPaths: string[]) {
// Appel REST optimisé en batch
const response = await this.restClient.post('/documents/batch', {
paths: documentPaths
})
return response.documents
}
}
Avantages : Migration progressive, APIs conservées, optimisation automatique
⥠Data Loaders
- Batching : groupe les requĂȘtes
- Caching : évite les doublons
- Optimisation : résout N+1
â Sans DataLoader
// N appels individuels
const user1 = await getUserById(1)
const user2 = await getUserById(2)
const user3 = await getUserById(3)
â Avec DataLoader
// 1 seul appel groupé
const [user1, user2, user3] =
await userLoader.loadMany([1, 2, 3])
đïž Architecture
đ Diagramme Mermaid ici
AVANT : Use cases lourds â appels directs
APRĂS : Field Resolvers â Data Loaders optimisĂ©s
AVANT : Use cases lourds â appels directs
APRĂS : Field Resolvers â Data Loaders optimisĂ©s
đŻ BĂ©nĂ©fices
⥠Performance
- Réduction N+1
- Cache intelligent
- Fetch optimal
đ§ MaintenabilitĂ©
- Séparation claire
- Code réutilisable
- ĂvolutivitĂ©
đ FlexibilitĂ©
- Queries dynamiques
- Découplage
- Optimisation auto
đŻ RĂ©sumĂ©
Field Resolvers + Data Loaders =
- â Fin de l'overfetch
- â RĂ©solution N+1
- â Use cases simplifiĂ©s
- â Performances optimales
- â Compatible REST
GraphQL optimise sans remplacer !
Questions ?
Merci pour votre attention ! đ
deck
By Remy Choffardet
deck
- 3