نطبّق ده فين في الـ architecture؟

افصل الـ validation عن الـ UI وعن الـ hooks

في React، الأفضل تفصل الـ API validation عن الـ UI وعن الـ Query hooks.

مثال على feature اسمها users:

src/└── features/    └── users/        ├── api/        │   ├── users.api.ts        │   └── users.schema.ts        ├── model/        │   └── users.queries.ts        └── ui/            └── UsersList.tsx

مسؤولية كل ملف

• users.schema.ts: تعريف الـ schemas والـ inferred types.
• users.api.ts: تنفيذ الـ HTTP request والتحقق من الـ response.
• users.queries.ts: تعريف queryKey وuseQuery وإعدادات الـ caching.
• UsersList.tsx: عرض البيانات وحالات الـ loading والـ error.

الـ API layer هي المكان المناسب للتحقق من الـ response. كده كل المستهلكين للدالة بياخدوا داتا تم التحقق منها، بدل ما كل Component يعمل validation بنفسه.

خلّصت الفصل لما

• تحط الـ schema في users.schema.ts
• تحط الـ request والـ validation في users.api.ts
• تحط useQuery في users.queries.ts
• تخلي الـ UI تعرض loading وerror من غير ما تفحص الداتا