Darmowy Formatowanie GraphQL | Formatowanie Zapytań i Schematów z Prettier

Loading…

O nas Online Formatowanie GraphQL

Utrzymuj swój SDL GraphQL i operacje czytelne i spójne. Ten online formatowanie GraphQL wykorzystuje parser GraphQL Prettier do ponownego wcięcia, zawijania i normalizacji dokumentów. Działa w przeglądarce, gdy to możliwe, a w razie potrzeby przechodzi na formatowanie serwerowe, więc otrzymujesz niezawodne wyniki bez zastanawiania się nad narzędziami.

Co Robi Ten Formatowanie GraphQL

Wykorzystuje parser GraphQL Prettier do zastosowania spójnego, standardowego formatowania społeczności
Obsługuje zapytania, mutacje, subskrypcje, fragmenty oraz pełny schemat SDL (typy, interfejsy, unie, enumy, wejścia, dyrektywy)
Regulowane wcięcie: wybierz spacje lub tabulatory i skonfiguruj rozmiar wcięcia (1–8)
Opcjonalna kontrola długości linii / zawijania poprzez konfigurowalną szerokość kolumny
Zachowuje opisy (`"""…"""`) i komentarze w tekście nienaruszone, normalizując ich układ
Weryfikuje strukturę dokumentu GraphQL jako część formatowania; nieprawidłowa składnia wyświetli błędy zamiast cichego zniekształcania kodu
Hybrydowe wykonanie: uruchamia Prettier w przeglądarce, gdy jest dostępne, a w razie potrzeby przechodzi na formatowanie serwerowe
Wklej lub prześlij pliki `.graphql` / `.gql`, a następnie podglądaj, kopiuj lub pobieraj sformatowany wynik

📝 Jak Formatować GraphQL Online for graphql-formatter

Wklej lub Prześlij Swój GraphQL

Wklej swój schemat GraphQL lub zapytania do edytora lub upuść plik `.graphql` / `.gql`. Formatowanie działa zarówno dla dokumentów SDL, jak i operacji.

Dostosuj Opcje Formatowania

Wybierz spacje lub tabulatory, ustaw rozmiar wcięcia i skonfiguruj preferowaną długość linii. Te opcje są przekazywane do formatowania GraphQL Prettier.

Sformatuj, Przejrzyj i Eksportuj

Kliknij Formatuj, aby zastosować zmiany. Przejrzyj wynik w panelu podglądu, a następnie skopiuj go z powrotem do edytora lub pobierz sformatowany plik.

Specyfikacje Techniczne

Obsługiwane Dane Wejściowe

Zaprojektowany dla standardowych schematów GraphQL i dokumentów operacji.

Typ	Przykłady	Uwagi
Schemat SDL	schema.graphql, schema.gql	Typy, interfejsy, unie, enumy, dane wejściowe, dyrektywy, definicja schematu
Operacje	queries.graphql, app.gql	Zapytania, mutacje, subskrypcje i fragmenty
Rozszerzenia	rozszerzenia schematu w oddzielnych plikach	np. bloki `extend type Query { … }`

Silnik Formatowania

Formatowanie jest wykonywane przy użyciu obsługi GraphQL Prettier. W większości przypadków Prettier działa w przeglądarce za pośrednictwem lekkiego środowiska uruchomieniowego. Jeśli wtyczka GraphQL nie może zostać rozwiązana w bieżącym środowisku, formatowanie przejrzyste przechodzi na serwerowy proces Prettier.

Dostępne Opcje (Mapowane na Prettier)

Opcja	Zachowanie	Typowe Wartości
Styl Wcięcia	Wybierz między spacjami a tabulatorami	spacja (domyślnie) lub tabulator
Rozmiar Wcięcia	Liczba spacji na poziom wcięcia (przy użyciu spacji)	1–8, domyślnie: 2
Długość Linii	Docelowa kolumna dla zawijania / łamania długich selekcji	0–120 (0 ≈ praktycznie bez zawijania)

Limity i Wydajność

Narzędzie jest dostrojone do typowych schematów GraphQL i plików operacji. Żądania o rozmiarze od kilkuset KB do ~2 MB są generalnie bezpieczne; bardzo duże dokumenty mogą napotkać limity czasu lub ograniczenia rozmiaru.

Prywatność i bezpieczeństwo

Dokumenty GraphQL są formatowane w przeglądarce lub na zapleczu formatującym encode64. Nie są wykonywane ani wysyłane do usług stron trzecich. Dla wrażliwych schematów możesz odtworzyć tę samą konfigurację lokalnie za pomocą Prettier.

Odpowiednik wiersza poleceń (Prettier)

Jeśli masz już zainstalowane Node.js i Prettier, możesz odtworzyć to zachowanie lokalnie.

Node.js (wszystkie platformy)

Sformatuj plik schematu GraphQL w miejscu

npx prettier --write schema.graphql

Prettier automatycznie rozpoznaje GraphQL na podstawie rozszerzenia pliku.

Formatuj z niestandardnym wcięciem i długością linii

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

Odbija opcje wcięcia i zawijania dostępne w narzędziu online.

Formatuj ze standardowego wejścia (np. przekazane z innego narzędzia)

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

Przydatne w skryptach powłoki, potokach CI lub hakach Git.

Typowe przypadki użycia formatowania GraphQL

Rozwój schematu API

Utrzymuj duże pliki schematów spójnie sformatowane dla łatwiejszej nawigacji
Zmniejsz szum różnic w białych znakach w PR schematów
Przygotuj czysty SDL dla narzędzi generowania kodu

# Przed
type User{ id:ID! name:String!}

# Po
type User {
  id: ID!
  name: String!
}

Operacje frontendowe i fragmenty

Normalizuj wspólne zapytania w wielu aplikacjach lub pakietach
Ułatw skanowanie zagnieżdżonych selekcji podczas debugowania
Utrzymuj fragmenty dokumentacji i przykłady w playground ładnie sformatowane

Testy, dane testowe i narzędzia

Standaryzuj dane testowe GraphQL używane w testach snapshot
Zintegruj formatowanie w haki pre-commit lub zadania CI
Podawaj czyste dokumenty do narzędzi walidacji lub porównywania schematów

❓ Frequently Asked Questions

Co właściwie zmienia formatowanie GraphQL?

Przekształca twoje dokumenty GraphQL zgodnie z regułami Prettier dla GraphQL: wcięcia, podziały linii, odstępy wokół interpunkcji oraz układ selekcji i pól. Nie zmienia nazw pól, nie dodaje argumentów ani nie modyfikuje semantyki schematu.

Czy obsługuje zarówno operacje, jak i SDL schematu?

Tak. Formatowanie działa dla standardowych operacji GraphQL (zapytania, mutacje, subskrypcje, fragmenty) oraz języka definicji schematu (typy, interfejsy, enumy, unie, inputy, dyrektywy, definicje schematu i rozszerzenia).

Czy komentarze i ciągi opisu są zachowywane?

Tak. Potrójnie cytowane ciągi opisu (`"""…"""`) i komentarze liniowe `#` są zachowywane. Formatowanie może je przepływać lub dostosować otaczające białe znaki, ale nie usuwa ich celowo.

Czy mój kod GraphQL jest wykonywany?

Nie. Narzędzie analizuje Twój kod GraphQL jako tekst w celu jego przeformatowania, ale nie wykonuje zapytań ani nie łączy się z żadnym serwerem GraphQL.

Gdzie odbywa się formatowanie: po stronie klienta czy serwera?

Formatowanie preferuje uruchamianie Prettier bezpośrednio w przeglądarce dla lepszej responsywności. Jeśli wymagana wtyczka GraphQL nie może zostać tam załadowana, przechodzi na pracownika Prettier na serwerze z tymi samymi opcjami.

Czy to narzędzie jest darmowe?

Tak. Narzędzie jest darmowe z ochroną uczciwego użytku, aby utrzymać stabilność wydajności. Dla intensywnych lub prywatnych obciążeń, odzwierciedl tę samą konfigurację z Prettier we własnym środowisku.

Pro Tips

Best Practice

Użyj tego formatowania do ujednolicenia starych schematów przed dodaniem lintowania lub wprowadzaniem zmian łamiących; to sprawia, że kolejne różnice są znacznie łatwiejsze do przejrzenia.

Best Practice

Dopasuj ustawienia narzędzia online (rozmiar wcięcia i długość linii) do konfiguracji Prettier w Twoim projekcie, aby formatowanie lokalne i internetowe było identyczne.

Best Practice

Wyodrębnij długie osadzone ciągi GraphQL z kodu do plików `.graphql`, aby można je było jednolicie sformatować i ponownie wykorzystać.

Best Practice

Połącz formatowanie z lintowaniem (np. GraphQL ESLint), aby wychwycić problemy ze schematami i zapytaniami, które wykraczają poza białe znaki i zawijanie.