‏ماژول Shopify برای Nuxt

فروشگاه ساختن روی Shopify معمولاً یعنی کلنجار رفتن با چند تا GraphQL API جدا. تو توضیحات مخزن اومده که @nuxtjs/shopify، ماژول مجموعهٔ nuxt-modules، هر سه تا رو با یه کانفیگ واحد تو nuxt.config.ts به پروژه وصل می‌کنه: Storefront API برای دادهٔ عمومی فروشگاه، Customer Account API برای حساب مشتری و Admin API برای کارهای مدیریتی.

چیزی که این ماژول رو از یه fetch ساده جدا می‌کنه تایپ‌هاشه. همون لحظه که کوئری GraphQL می‌نویسی، ماژول تایپش رو می‌سازه و با عوض شدن کوئری هم هات‌ریلود می‌کنه. پس data دقیقاً با تایپ همون کوئری (مثلاً FetchProductsQuery) در میاد و ادیتور کامل راهنماییت می‌کنه. اینکه هر فایل به کدوم API وصل می‌شه هم از پسوندش معلومه: فایل‌های .admin.ts برای Admin و .customer.ts برای Customer Account پردازش می‌شن.

ساده‌ترین راه استفاده، composableی useStorefront مستقیم تو خود کامپوننته. همین چند خط، سه محصول اول فروشگاه رو می‌گیره:

const storefront = useStorefront()

const { data } = await storefront.request(`#graphql
  query FetchProducts($first: Int) {
    products(first: $first) { nodes { id title description } }
  }
`, { variables: { first: 3 } })

اگه بخوای از useAsyncData خود Nuxt هم بهره ببری، useStorefrontData همین کارو می‌کنه. فقط حواست باشه این نسخه خودش فقط data رو نگه می‌داره، برای همین خطاهای GraphQL از ref مربوط به error بیرون می‌آن نه از توی پاسخ. سمت سرور هم همین یوتیلیتی‌ها تو هندلرهای Nitro در دسترسن.

درخواست‌های سمت کلاینت پیش‌فرض از سرور Nitro پراکسی می‌شن تا توکن لو نره، که با proxy: false خاموش می‌شه. کش هم سمت کلاینت و هم سمت پراکسی کار می‌کنه و برای هر درخواست با آپشن cache جدا تنظیم می‌شه. برای توسعهٔ محلی با mock: true همهٔ درخواست‌های Storefront به‌جای شاپیفای واقعی از mock.shop جواب می‌گیرن. خطاها هم پیش‌فرض throw می‌شن تا Nuxt هندلشون کنه، مگه errors.throw رو false کنی.

نکات کلیدی:

• پشتیبانی از هر سه API شاپیفای: Storefront، Customer Account و Admin
• ساخت خودکار تایپ‌ها از کوئری‌های GraphQL با هات‌ریلود
• تشخیص API از روی پسوند فایل مثل .admin.ts و .customer.ts
• پراکسی سمت سرور پیش‌فرض روشنه و با proxy: false خاموش می‌شه
• حالت mock: true همهٔ درخواست‌ها رو به mock.shop می‌فرسته
• تزریق و حذف تکرار fragmentهای GraphQL به‌صورت خودکار
• با Nuxt 3 و Nuxt 4 تست شده