Loading…

حول منسق GraphQL عبر الإنترنت

احتفظ بـ SDL وعمليات GraphQL الخاصة بك قابلة للقراءة ومتسقة. يستخدم منسق GraphQL هذا عبر الإنترنت محلل Prettier لـ GraphQL لإعادة المسافات البادئة، والتفاف وتوحيد مستنداتك. يعمل في المتصفح عندما يكون ذلك ممكنًا ويعود إلى منسق الخادم عند الضرورة، لذا تحصل على مخرجات موثوقة دون التفكير في الأدوات.

ما يفعله منسق GraphQL هذا

  • يستخدم محلل Prettier لـ GraphQL لتطبيق تنسيق متسق وفقًا لمعايير المجتمع
  • يدعم الاستعلامات، الطفرات، الاشتراكات، الأجزاء ومخطط SDL الكامل (الأنواع، الواجهات، الاتحادات، التعدادات، المدخلات، التوجيهات)
  • مسافات بادئة قابلة للتعديل: اختر مسافات أو علامات تبويب وتهيئة حجم المسافة البادئة (1–8)
  • تحكم اختياري في طول السطر / الالتفاف عبر عرض عمود قابل للتكوين
  • يحتفظ بالوصوف (`"""…"""`) والتعليقات المضمنة سليمة أثناء توحيد تخطيطها
  • يتحقق من هيكل مستند GraphQL الخاص بك كجزء من التنسيق؛ سيظهر بناء الجملة غير الصالح أخطاء بدلاً من تشويه الكود بصمت
  • تنفيذ هجين: يشغل Prettier في المتصفح عند التوفر ويعود إلى منسق الخادم إذا لزم الأمر
  • الصق أو ارفع ملفات `.graphql` / `.gql`، ثم معاينة، نسخ أو تحميل النتيجة المنسقة

📝 كيفية تنسيق GraphQL عبر الإنترنت for graphql-formatter

1

الصق أو ارفع مخطط GraphQL الخاص بك

الصق مخطط GraphQL أو استعلاماتك في المحرر، أو أسقط ملف `.graphql` / `.gql`. يعمل المُنسق على كل من مستندات SDL والمستندات التشغيلية.

2

اضبط خيارات التنسيق

اختر المسافات أو علامات الجدولة، وحدد حجم المسافة البادئة، وضبط الطول المفضل للسطر. يتم تمرير هذه الخيارات إلى مُنسق GraphQL في Prettier.

3

نسق، راجع وصدّر

انقر على تنسيق لتطبيق التغييرات. راجع النتيجة في لوحة المعاينة، ثم انسخها مرة أخرى إلى محررك أو حمّل الملف المنسق.

المواصفات الفنية

المدخلات المدعومة

مصمم لمستندات مخطط وعمليات GraphQL القياسية.

النوعأمثلةملاحظات
مخطط SDLschema.graphql, schema.gqlالأنواع، الواجهات، الاتحادات، التعدادات، المدخلات، التوجيهات، تعريف المخطط
العملياتqueries.graphql, app.gqlالاستعلامات، الطفرات، الاشتراكات والمقاطع
الامتداداتامتدادات المخطط في ملفات منفصلةمثل، كتل `extend type Query { … }`

محرك التنسيق

يتم إجراء التنسيق باستخدام دعم GraphQL في Prettier. في معظم الحالات، يعمل Prettier في المتصفح عبر بيئة تشغيل خفيفة الوزن. إذا لم يمكن حل إضافة GraphQL في البيئة الحالية، فإن المُنسق يتراجع تلقائيًا إلى عامل Prettier على الخادم.

الخيارات المتاحة (مُعينة على Prettier)

الخيارالسلوكالقيم النموذجية
نمط المسافة البادئةاختر بين المسافات وعلامات الجدولةمسافة (افتراضي) أو علامة جدولة
حجم المسافة البادئةعدد المسافات لكل مستوى مسافة بادئة (عند استخدام المسافات)1–8، افتراضي: 2
طول السطرالعمود المستهدف لطي/كسر الاختيارات الطويلة0–120 (0 ≈ يعني عمليًا عدم وجود طي)

الحدود والأداء

تم ضبط الأداة لمخططات GraphQL النموذجية وملفات العمليات. الطلبات حول بضع مئات من الكيلوبايت إلى ~2 ميغابايت آمنة بشكل عام؛ قد تواجه المستندات الكبيرة جدًا مهلات زمنية أو حدود حجم.

الخصوصية والأمان

يتم تنسيق مستندات GraphQL إما في متصفحك أو في خادم التنسيق الخلفي لـ encode64. لا يتم تنفيذها أو إرسالها إلى خدمات الطرف الثالث. للمخططات الحساسة، يمكنك تكرار نفس الإعدادات محليًا باستخدام Prettier.

مكافئ سطر الأوامر (Prettier)

إذا كان لديك Node.js وPrettier مثبتين مسبقًا، يمكنك إعادة هذا السلوك محليًا.

Node.js (جميع المنصات)

تنسيق ملف مخطط GraphQL في مكانه

npx prettier --write schema.graphql

يكتشف Prettier تلقائيًا GraphQL بناءً على امتداد الملف.

التنسيق مع مسافة بادئة مخصصة وطول سطر

npx prettier --write schema.graphql --tab-width 2 --use-tabs false --print-width 80

يعكس خيارات المسافة البادئة والتفاف المعروضة في الأداة عبر الإنترنت.

التنسيق من stdin (مثل الأنابيب من أداة أخرى)

cat input.graphql | npx prettier --stdin-filepath input.graphql

مفيد في نصوص shell، خطوط أنابيب CI أو خطاطات Git.

حالات الاستخدام الشائعة لمُنسق GraphQL

تطوير مخطط API

  • الحفاظ على ملفات المخططات الكبيرة مُنسقة بشكل متسق لسهولة التنقل
  • تقليل الاختلافات المزعجة في المسافات البيضاء في طلبات سحب المخططات
  • إعداد SDL نظيف لأدوات توليد الكود
# قبل
type User{ id:ID! name:String!}

# بعد
type User {
  id: ID!
  name: String!
}

عمليات ومقتطفات الواجهة الأمامية

  • توحيد الاستعلامات المشتركة عبر تطبيقات أو حزم متعددة
  • جعل التحديدات المتداخلة أسهل للمسح أثناء التصحيح
  • الحفاظ على مقاطع الوثائق والأمثلة في الملعب مُنسقة بشكل جيد

الاختبارات، البيانات الثابتة والأدوات

  • توحيد بيانات GraphQL الثابتة المستخدمة في اختبارات اللقطات
  • دمج التنسيق في خطاطات ما قبل الالتزام أو وظائف CI
  • تغذية مستندات نظيفة في أدوات التحقق من الصحة أو مقارنة المخططات

❓ Frequently Asked Questions

ماذا يغير مُنسق GraphQL فعليًا؟

يعيد هيكلة مستندات GraphQL الخاصة بك وفقًا لقواعد Prettier لـ GraphQL: المسافة البادئة، فواصل الأسطر، التباعد حول علامات الترقيم وتخطيط التحديدات والحقول. لا يعيد تسمية الحقول، يضيف وسائط أو يغير دلالات المخطط.

هل يدعم كلًا من العمليات ومخطط SDL؟

نعم. يعمل المُنسق لعمليات GraphQL القياسية (الاستعلامات، الطفرات، الاشتراكات، المقتطفات) ولغة تعريف المخطط (الأنواع، الواجهات، التعدادات، الاتحادات، المدخلات، التوجيهات، تعريفات المخطط والامتدادات).

هل يتم الحفاظ على التعليقات وسلاسل الوصف؟

نعم. يتم الحفاظ على سلاسل الوصف بين ثلاثة علامات اقتباس (`"""…"""`) والتعليقات المضمنة `#`. قد يعيد المُنسق تدفقها أو يضبط المسافات البيضاء المحيطة لكنه لا يزيلها عمدًا.

هل يتم تنفيذ كود GraphQL الخاص بي؟

لا. الأداة تقوم بتحليل GraphQL كنص لإعادة تنسيقه، لكنها لا تنفذ الاستعلامات أو تتصل بأي خادم GraphQL.

أين يتم التنسيق: على العميل أم الخادم؟

يفضل المُنسق تشغيل Prettier مباشرة في متصفحك لتحقيق الاستجابة. إذا لم يتمكن من تحميل إضافة GraphQL المطلوبة هناك، فإنه يتراجع إلى عامل Prettier على الخادم بنفس الخيارات.

هل هذا مجاني الاستخدام؟

نعم. الأداة مجانية مع حماية الاستخدام العادل للحفاظ على استقرار الأداء. للأحمال الثقيلة أو الخاصة، انسخ نفس التكوين مع Prettier في بيئتك الخاصة.

Pro Tips

Best Practice

استخدم هذا المُنسق لتوحيد المخططات القديمة قبل إضافة التدقيق أو التغييرات الكاسحة؛ مما يجعل الاختلافات اللاحقة أسهل للمراجعة.

Best Practice

قم بمحاذاة إعدادات الأداة عبر الإنترنت (حجم المسافة البادئة وطول السطر) مع تكوين Prettier الخاص بمشروعك للحفاظ على تطابق التنسيق المحلي والويب.

Best Practice

استخرج سلاسل GraphQL المضمنة الطويلة من الكود إلى ملفات `.graphql` حتى يمكن تنسيقها بشكل موحد وإعادة استخدامها.

Best Practice

اقرن التنسيق بالتدقيق (مثل GraphQL ESLint) لاكتشاف مشاكل المخطط والاستعلام التي تتجاوز المسافات البيضاء والتفاف النص.

Additional Resources

مواصفات GraphQL
Documentation
Prettier - تنسيق GraphQL
Documentation
وثائق GraphQL الرسمية - تعلم
Documentation
GraphQL ESLint (قواعد التدقيق)
Documentation

Other Tools