Loading…

के बारे में ऑनलाइन GraphQL फॉर्मेटर

अपने GraphQL SDL और ऑपरेशन्स को पठनीय और सुसंगत रखें। यह ऑनलाइन GraphQL फॉर्मेटर Prettier के GraphQL पार्सर का उपयोग करके आपके दस्तावेज़ों को पुनः इंडेंट, रैप और सामान्य करता है। यह संभव होने पर ब्राउज़र में चलता है और आवश्यकता पड़ने पर सर्वर फॉर्मेटर पर वापस आता है, ताकि आपको टूलिंग के बारे में सोचे बिना विश्वसनीय आउटपुट मिले।

यह GraphQL फॉर्मेटर क्या करता है

  • सुसंगत, समुदाय-मानक फॉर्मेटिंग लागू करने के लिए Prettier के GraphQL पार्सर का उपयोग करता है
  • क्वेरीज़, म्यूटेशन्स, सब्सक्रिप्शन्स, फ्रैगमेंट्स और पूर्ण स्कीमा SDL (प्रकार, इंटरफेस, यूनियन्स, एनम्स, इनपुट्स, डायरेक्टिव्स) का समर्थन करता है
  • समायोज्य इंडेंटेशन: स्पेस या टैब चुनें और इंडेंट आकार कॉन्फ़िगर करें (1–8)
  • वैकल्पिक लाइन-लंबाई / रैपिंग नियंत्रण कॉन्फ़िगर करने योग्य कॉलम चौड़ाई के माध्यम से
  • विवरण (`"""…"""`) और इनलाइन टिप्पणियों को उनके लेआउट को सामान्य करते हुए अक्षुण्ण रखता है
  • फॉर्मेटिंग के भाग के रूप में आपके GraphQL दस्तावेज़ संरचना को मान्य करता है; अमान्य सिंटैक्स चुपचाप कोड को बिगाड़ने के बजाय त्रुटियाँ दिखाएगा
  • हाइब्रिड निष्पादन: उपलब्ध होने पर ब्राउज़र में Prettier चलाता है और आवश्यकता पड़ने पर सर्वर फॉर्मेटर पर वापस आता है
  • .graphql / .gql फ़ाइलें पेस्ट या अपलोड करें, फिर फॉर्मेट किए गए परिणाम का पूर्वावलोकन, कॉपी या डाउनलोड करें

📝 ऑनलाइन GraphQL कैसे फॉर्मेट करें for graphql-formatter

1

अपना GraphQL पेस्ट या अपलोड करें

एडिटर में अपना GraphQL स्कीमा या क्वेरीज़ पेस्ट करें, या एक `.graphql` / `.gql` फ़ाइल ड्रॉप करें। यह फॉर्मेटर SDL और ऑपरेशन दस्तावेज़ दोनों के लिए काम करता है।

2

फॉर्मेटिंग विकल्प समायोजित करें

स्पेस या टैब चुनें, इंडेंट आकार सेट करें, और अपनी पसंदीदा लाइन लंबाई कॉन्फ़िगर करें। ये विकल्प Prettier के GraphQL फॉर्मेटर को पास किए जाते हैं।

3

फॉर्मेट करें, समीक्षा करें और निर्यात करें

परिवर्तन लागू करने के लिए फॉर्मेट पर क्लिक करें। पूर्वावलोकन पेन में परिणाम की समीक्षा करें, फिर इसे वापस अपने एडिटर में कॉपी करें या फॉर्मेटेड फ़ाइल डाउनलोड करें।

तकनीकी विशिष्टताएँ

समर्थित इनपुट

मानक GraphQL स्कीमा और ऑपरेशन दस्तावेज़ों के लिए डिज़ाइन किया गया।

प्रकारउदाहरणटिप्पणियाँ
स्कीमा SDLschema.graphql, schema.gqlप्रकार, इंटरफेस, यूनियन, एनम, इनपुट, डायरेक्टिव, स्कीमा परिभाषा
ऑपरेशनqueries.graphql, app.gqlक्वेरीज़, म्यूटेशन, सब्सक्रिप्शन और फ़्रैगमेंट
एक्सटेंशनअलग फ़ाइलों में स्कीमा एक्सटेंशनजैसे, `extend type Query { … }` ब्लॉक

फॉर्मेटिंग इंजन

फॉर्मेटिंग Prettier के GraphQL समर्थन का उपयोग करके की जाती है। अधिकांश मामलों में, Prettier एक हल्के रनटाइम के माध्यम से ब्राउज़र में चलता है। यदि वर्तमान वातावरण में GraphQL प्लगइन हल नहीं किया जा सकता है, तो फॉर्मेटर पारदर्शी रूप से सर्वर-साइड Prettier वर्कर पर फ़ॉलबैक करता है।

उपलब्ध विकल्प (Prettier से मैप किए गए)

विकल्पव्यवहारसामान्य मान
इंडेंट शैलीस्पेस और टैब के बीच चुनेंस्पेस (डिफ़ॉल्ट) या टैब
इंडेंट आकारप्रति इंडेंट स्तर स्पेस की संख्या (स्पेस उपयोग करते समय)1–8, डिफ़ॉल्ट: 2
लाइन लंबाईलंबी चयन को लपेटने/तोड़ने के लिए लक्ष्य कॉलम0–120 (0 ≈ प्रभावी रूप से कोई रैपिंग नहीं)

सीमाएँ और प्रदर्शन

यह उपकरण सामान्य GraphQL स्कीमा और ऑपरेशन फ़ाइलों के लिए ट्यून किया गया है। कुछ सौ KB से ~2 MB तक के अनुरोध आमतौर पर सुरक्षित हैं; अत्यधिक बड़े दस्तावेज़ टाइमआउट या आकार सीमा से टकरा सकते हैं।

गोपनीयता और सुरक्षा

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

शेल स्क्रिप्ट, CI पाइपलाइन या Git हुक में उपयोगी।

सामान्य GraphQL फ़ॉर्मेटर उपयोग के मामले

API स्कीमा विकास

  • बड़ी स्कीमा फ़ाइलों को आसान नेविगेशन के लिए लगातार फ़ॉर्मेटेड रखें
  • स्कीमा PR में शोर वाली व्हाइटस्पेस अंतर को कम करें
  • कोड जनरेशन टूल्स के लिए साफ़ SDL तैयार करें
# पहले
type User{ id:ID! name:String!}

# बाद में
type User {
  id: ID!
  name: String!
}

फ्रंटएंड ऑपरेशन और फ़्रैगमेंट

  • कई ऐप या पैकेज में साझा क्वेरी को सामान्य करें
  • डीबगिंग के दौरान नेस्टेड चयन को स्कैन करना आसान बनाएं
  • डॉक्यूमेंटेशन स्निपेट और प्लेग्राउंड उदाहरणों को अच्छी तरह फ़ॉर्मेटेड रखें

टेस्ट, फिक्स्चर और टूलिंग

  • स्नैपशॉट टेस्ट में उपयोग किए गए GraphQL फिक्स्चर को मानकीकृत करें
  • फ़ॉर्मेटिंग को प्री-कमिट हुक या CI जॉब में एकीकृत करें
  • स्कीमा वैलिडेशन या डिफ टूल में साफ़ दस्तावेज़ फ़ीड करें

❓ Frequently Asked Questions

GraphQL फ़ॉर्मेटर वास्तव में क्या बदलता है?

यह Prettier के GraphQL नियमों के अनुसार आपके 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