أداة إنشاء استعلامات GraphQL
كتابة عملية GraphQL يدويًا تعني الحفاظ على دقة الأقواس المعقوفة والوسائط والمسافات البادئة. تجمّع هذه الأداة المستند لك: اختر استعلامًا أو طفرة أو اشتراكًا، وسّمِ العملية، وحدد الحقل الجذري، وأضف الوسائط، واكتب الحقول التي تحتاجها. النتيجة عملية منسّقة يمكنك لصقها مباشرة في Apollo أو urql أو GraphiQL.
كيفية بناء عملية GraphQL
-
1
اختر نوع العملية
اختر استعلامًا أو طفرة أو اشتراكًا من القائمة المنسدلة. هذا يحدد نوع العملية التي ينفذها الخادم.
-
2
سمِّ العملية
أعطها اسمًا مثل GetUser حتى يتمكن الخادم من تسجيلها وتخزينها مؤقتًا. الاسم اختياري؛ تعمل الأداة بدونه أيضًا.
-
3
حدد الحقل الجذري
اكتب الحقل الذي تريد استدعاءه، مثل user أو createPost أو orderUpdated.
-
4
أضف الوسائط
أضف أزواجًا من المفتاح والقيمة مثل id: "123" أو id: $id. الصفوف ذات المفتاح الفارغ تُتجاوز.
-
5
اكتب الحقول وانسخ النتيجة
اكتب حقلاً واحدًا في كل سطر، وأنشئ الاستعلام، ثم انسخ المستند المنسّق إلى الحافظة.
العمل مع مستندات GraphQL
مستند GraphQL هو مجموعة من عملية واحدة أو أكثر، بالإضافة إلى أي أجزاء (fragments) تشير إليها. كل عملية تسمي حقلًا جذريًا من النوع Query أو Mutation أو Subscription، ويحل الخادم مجموعة الاختيار التي تطلبها. تكتب الأداة نص العملية نيابةً عنك، لكنها لا تعرف مخططك (schema)، لذا تحقق من كل اسم حقل ووسيط مع واجهة API الخاصة بك قبل تنفيذ العملية.
تشريح العملية
| الجزء | الغرض | المثال |
|---|---|---|
| نوع العملية | استعلام أو طفرة أو اشتراك | query، mutation، subscription |
| اسم العملية | يُستخدم للتخزين المؤقت والسجلات | GetUserById |
| الوسائط | القيم الممررة إلى الحقل الجذري | user(id: "123") |
| مجموعة الاختيار | الحقول والاختيارات المتداخلة | { user(id: "123") { name posts { title } } } |
| المتغيرات | مدخلات ذات أنواع تُعلن مع اسم العملية | query GetUser($id: ID!) { user(id: $id) { name } } |
الأخطاء الشائعة
- المتغيرات المطلوبة تنتهي بـ
!. إغفال ذلك على الوسائط المُعلّمة بـNonNullفي المخطط يُنتج خطأ تحقق قبل تشغيل المُحلِّل (resolver). - الوسائط النصية تحتاج إلى علامات اقتباس. قيمة مثل
123هي رقم؛ أما القيمة النصية فيجب كتابتها"123"بين علامتي اقتباس داخل صف الوسيط. - أنواع الاتحادات والواجهات تتطلب أجزاءً مضمّنة من النوع
... on TypeNameلقراءة الحقول الخاصة بكل نوع. - الأسماء المستعارة (Aliasing) إلزامية عندما تطلب الحقل نفسه مرتين بوسائط مختلفة، مثل
today: stats(period: DAY)وweek: stats(period: WEEK). - الاتصالات (مواصفة Relay) تُظهر
edges { node { ... } }وpageInfo { endCursor hasNextPage }؛ وإغفال أي منهما يكسر التقسيم إلى صفحات.
نصائح
- اجعل العمليات صغيرة ومُسمّاة حتى يتمكن Apollo Client من تخزينها مؤقتًا بشكل فردي.
- مرر القيم المتغيرة كمتغيرات بدلًا من القيم الحرفية، ليتمكن الخادم من تحليل المستند مرة واحدة وإعادة استخدامه؛ وأعلنها بجانب اسم العملية، مثل
query GetUser($id: ID!). - إذا كان الحقل يحتاج إلى وسائط متعددة، فاكتبها في صف وسيط واحد مفصولة بفواصل، مثل
filter: { status: ACTIVE }كقيمة. - تُخرج الأداة النص الذي تضبطه تمامًا. إذا فشلت عملية، فقارن أولًا أسماء الحقول لديك بالمخطط الحالي.
الأسئلة الشائعة
لا. إنها تنسّق النص الذي تدخله فقط؛ فلا توجد نقطة نهاية يُستدعى ولا مخطط مطلوب. املأ أجزاء العملية، وسوف تجمّع الأداة المستند لك.
نعم. استخدم القائمة المنسدلة للعملية للتبديل بين الاستعلام والطفرة والاشتراك. كل شيء آخر يعمل بالطريقة نفسها: الاسم والحقل الجذري والوسائط والحقول.
أضف صفوفًا في قسم الوسائط. المفتاح هو اسم الوسيط، والقيمة هي ما تمرره، مثل id: “123” أو id: $id. الصفوف ذات المفتاح الفارغ تُتجاهل. إذا كتبت متغيرًا مثل $id، فأعلنه بنفسك بجانب اسم العملية، مثل query GetUser($id: ID!).
تُخرج الأداة النص الذي كتبته تمامًا. الخطأ يعني عادةً أن اسم حقل أو وسيط لا يطابق مخطط خادمك: قارن الحقل الجذري وكل اسم حقل مع واجهة API الخاصة بك وصحح الإملاء.
أدوات ذات صلة
مرجع جدول ASCII
جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.
مرجع أحرف HTML
قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.
مرجع اختصارات لوحة المفاتيح
ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.
مدقق البريد الإلكتروني
تحقق من عنوان بريد إلكتروني: فحص صياغة RFC 5322، واستعلام حي عن سجل MX، بالإضافة إلى تفاصيل الجزء المحلي والنطاق والطول. لا يتم إرسال أي بريد.
مولد EditorConfig
أنشئ ملف .editorconfig بقواعد نمط المسافة البادئة وحجمها ونهاية السطر ومجموعة الأحرف والمسافات البيضاء، لتنسيق موحّد عبر بيئات التطوير المتكاملة (IDEs) والمحررات.
منسق HTML
نسّق HTML محلياً في المتصفح بمسافة بادئة من مسافتين أو أربع مسافات. لا يُرفع HTML ولا يُتحقق منه.
الأداة متاحة بلغات أخرى
- GraphQLクエリビルダー [JA]
- Constructor de Consultas GraphQL [ES]
- Constructeur de requêtes GraphQL [FR]
- Construtor de Consultas GraphQL [PT]
- Trình tạo truy vấn GraphQL [VI]
- GraphQL-frågebyggare [SV]
- เครื่องสร้าง GraphQL Query [TH]
- GraphQL 쿼리 빌더 [KO]
- GraphQL-Abfrage-Builder [DE]
- Pembuat Kueri GraphQL [ID]
- GraphQL-querybouwer [NL]
- Kreator zapytań GraphQL [PL]
- GraphQL Query Builder [EN]
- Costruttore di Query GraphQL [IT]
- Построитель запросов GraphQL [RU]
- GraphQL Sorgu Oluşturucu [TR]
- GraphQL查询构建器 [ZH]