الـ safeParse في الـ API ولا الـ UI؟

المكان المعتاد هو الـ API layer

الجزء ده مكانه بيعتمد على إنت عايز تعمل إيه بالـ validation error. في الحالة المعتادة مع React وTanStack Query، الأفضل تعمل الـ validation في الـ API layer، مش في الـ UI.

import { userSchema } from "./users.schema";export async function getUser() {  const response = await fetch("/api/user");  if (!response.ok) {    throw new Error("Failed to fetch user");  }  const data: unknown = await response.json();  const result = userSchema.safeParse(data);  if (!result.success) {    console.error("Invalid API response:", result.error);    throw new Error("INVALID_API_RESPONSE");  }  return result.data;}

إيه اللي حصل هنا؟

• الـ API رجعت الداتا.
• عملنا validation بـ safeParse.
• لو الداتا غير صحيحة، رمينا Error.
• لو صحيحة، رجعنا result.data، وTypeScript عارف نوعها بالفعل.

الـ UI بيعرض النتيجة بس

const userQuery = useQuery({  queryKey: ["user"],  queryFn: getUser,});if (userQuery.isPending) {  return <p>Loading...</p>;}if (userQuery.isError) {  return <p>تعذر تحميل بيانات المستخدم</p>;}return <h1>{userQuery.data.name}</h1>;

الـ UI مش محتاج يعرف تفاصيل Zod أو يفحص الداتا بنفسه. هو بيتعامل مع النتيجة النهائية:

• isPending: بيحمّل.
• isError: حصل خطأ في الـ request أو الـ validation.
• data: داتا اتعملها validation بنجاح.

إمتى safeParse في الـ UI؟

غالبًا مش هتحتاج. الـ UI المفروض يستهلك داتا موثوقة من الـ API layer.

ممكن تستخدمه في الـ UI لو بتتعامل مع مصدر بيانات محلي أو خارجي بشكل منفصل، زي بيانات جاية من localStorage أو إدخال المستخدم قبل عرضها.

مين مسؤول عن إيه؟

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

• تحط safeParse بتاع الـ API response في users.api.ts
• ترمي خطأ لما الشكل غلط عشان الـ query تفشل
• تخلي الـ UI يفرّق بين isPending وisError وdata بس
• تستخدم safeParse في الـ UI لمصدر محلي زي localStorage لو محتاج
• تعمل InvalidApiResponseError لو عايز تفرّق نوع الخطأ