כמפתחים, אנו תמיד מחפשים דרכים לשפר את זרימת העבודה שלנו ולמזער שגיאות ביישומים שלנו. זה מסביר את הפופולריות הגואה של TypeScript, המציעה יתרונות כגון בדיקת סוגים וכלי עבודה.
אבל למרות כל היתרונות של TypeScript, הוא לא חף מכמה נקודות כאב. שילוב TypeScript בעת צריכת ממשקי API יכול להיות חוזר על עצמו בכל הנוגע לתחזוקת הגדרות סוגים. כאן ניתן למנף סוגים שנוצרו מראש וקוד-יצירת קוד כדי להפחית את העבודה הידנית של שמירת סוגי API מסונכרנים עם שאילתות.
במאמר זה, נחקור כיצד לשלב ידנית סוגים עם ממשק ה-API של Storefront, נבחן גישה שנוצרה מראש ולאחר מכן נצלול לאופן שבו תכונת ה-GraphQL Codegen החדשה ב-Hydrogen משנה את כללי המשחק.
מבוא ל-TypeScript
TypeScript הוא קבוצת-על של JavaScript שמביאה לשפה בדיקת סוגים ותכונות מתקדמות אחרות.
הוא נהיה פופולרי יותר ויותר בקרב מפתחים בזכות יכולתו לזהות שגיאות מוקדם, להבטיח עקביות נתונים ולספק חוויית פיתוח טובה יותר באמצעות תכונות כמו השלמה אוטומטית. רבים... Shopify מפתחים יוצרים את האפליקציות ופרויקטי ההידרוגן שלהם בטעמי TypeScript כדי לנצל את התכונות החזקות הללו.
דוגמה ל-API של GraphQL
בעת עבודה עם ממשק API של GraphQL, הגדרת סוגים מדויקים מבטיחה חוויית פיתוח חלקה וממזערת שגיאות בזמן ריצה. הנה דוגמה להגדרת סוגים בעת אחזור נתונים מממשק API של Storefront:
בדוגמה לעיל, הגדרתי א Product הקלדה והעברתי אותה לפונקציית השאילתה. ההקלדה הסטטית שמספק TypeScript עוזרת להבטיח שהקוד שלי יהיה עקבי וצפוי, ומספקת כלים שימושיים כמו השלמה אוטומטית. בעת אינטראקציה עם product אובייקט, ה-IDE שלי יודע עכשיו שיש שלוש מאפיינים אפשריים שאני יכול לעבוד איתם:
זה גם מודיע לי מתי אני טועה על ידי סימון מתי מאפיין שאני מנסה להשתמש בו אינו קיים:
עם זאת, תהליך התחזוקה הידנית של סוגים אלה בסנכרון עם שאילתות GraphQL שלנו יכול להיות גוזל זמן ונוטה לשגיאות. רוצים לאחזר שדה נוסף? אל תשכחו למצוא ולעדכן את הסוגים!
סוגים שנוצרו מראש
ניתן לייעל את התהליך הנ"ל באמצעות שימוש בסוגים שנוצרו מראש - עבור ממשק ה-API של Storefront, יש את סוגי API של חנות כלי עזר. עם ייבוא פשוט, כל סוגי ה-API של Storefront זמינים לשימוש:
import type { Product } from '@shopify/hydrogen/storefront-api-types'; const product = await storefront.query(FEATURED_PRODUCT_QUERY); זה מרענן שלא צריך לבנות את הסוגים באופן ידני, אבל למרות שזה סופר נוח, זה יכול להרגיש כמו מוגזם שכל שדה מוגדר - השלמה אוטומטית נותנת לי שדות שאני אפילו לא מבצע שאילתה עליהם:
יצירת קוד GraphQL: סוגי TypeScript שנוצרו אוטומטית
זן קודגן GraphQLכלי שמייצר אוטומטית סוגים בהתבסס על השאילתות שלך כמו קסם! משמעות הדבר היא שאינך צריך עוד לשמור על סוגים מסונכרנים ידנית, או להסתמך על הגדרות סוג מיותרות.
זה זמין לשימוש במימן היום עם ה- --codegen-unstable דגל.
npm run dev -- --codegen-unstableCodegen מייצר אוטומטית סוגים עבור כל השאילתות בפרויקט שלי ומאחסן אותם ב- storefrontapi.generated.d.ts קובץ. לקוח Storefront (מסופק על ידי Hydrogen) קורא אוטומטית את הסוגים הללו וכך, הם זמינים ללא כל הגדרה.
כוחם של רכיבים
אבל הכוח האמיתי של Codegen הוא כאשר מקשרים את הסוגים לרכיב. כאן אני מייבא את הסוג שנוצר - זה נקרא FeatureProductQuery כי השאילתה שלי נקראת featuredProduct (בכל פעם שאתה יוצר שאילתה, קודגן ייצור סוג בעל אותו שם).
כעת, אם אני מנסה להציג את תיאור האוסף (שאינו חלק מהשאילתה), TypeScript מתריע בפניי שהמאפיין אינו קיים.
כל מה שאני צריך לעשות הוא להוסיף תיאור לשאילתה - הסוגים עודכנו ואנחנו בעניינים!
טיפים לקודגן
- הקפידו לתת שמות לפעולות שלכם, ולשמור על שמות ייחודיים. Codegen ישתמש בשם הפעולה כדי ליצור סוג בעל אותו שם.
- ניתן להגדיר את הגנרטור על ידי יצירתו קובץ codegen.ts בשורש הפרויקט שלך.
- אם אתה משתמש בביטויים מוטמעים כדי לכלול משתנים בשאילתה, שלח את השאילתה
as constזה מונע מ-TypeScript להסיק סוג "מחרוזת" כללי עבור השאילתה.
סיכום
בעוד ש-TypeScript מספק יתרונות רבים, תחזוקת טיפוסים תוך כדי עבודה עם ממשקי API של GraphQL יכולה ליצור חיכוכים. GraphQL Codegen מתגבר על אתגרים אלה על ידי הבטחת שהטיפוסים שלכם נוצרים אוטומטית על סמך הסכימה שלכם, וכתוצאה מכך תהליך פיתוח יעיל ומהנה יותר.
אני מקווה שתסתמכו על הכוח של GraphQL Codegen כדי להאיץ את תהליך העבודה של הפיתוח שלכם!
