disable validation of directives in SDL (#301)

Author: IvanGoncharov

src/components/IntrospectionModal.tsx

@@ -12,10 +12,10 @@ import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
-import { buildSchema, introspectionFromSchema } from 'graphql/utilities';
 import { useState } from 'react';
 
 import { voyagerIntrospectionQuery } from '../utils/introspection-query';
+import { sdlToIntrospection } from '../utils/sdl-to-introspection';
 
 enum InputType {
   Presets = 'Presets',
@@ -109,7 +109,7 @@ export function IntrospectionModal(props: IntrospectionModalProps) {
         onChange(JSON.parse(jsonText).data);
         break;
       case InputType.SDL:
-        onChange(introspectionFromSchema(buildSchema(sdlText)));
+        onChange(sdlToIntrospection(sdlText));
         break;
     }
     setSubmitted({ inputType, sdlText, jsonText, activePreset });

src/utils/sdl-to-introspection.ts

@@ -0,0 +1,22 @@
+import { parse } from 'graphql/language';
+import { buildSchema, introspectionFromSchema } from 'graphql/utilities';
+import { KnownDirectivesRule } from 'graphql/validation/rules/KnownDirectivesRule';
+import { specifiedSDLRules } from 'graphql/validation/specifiedRules';
+import { validateSDL } from 'graphql/validation/validate';
+
+const validationRules = specifiedSDLRules.filter(
+  // Many consumes/produces SDL files with custom directives and without defining them.
+  // This practice is contradict spec but is very widespread at the same time.
+  (rule) => rule !== KnownDirectivesRule,
+);
+
+export function sdlToIntrospection(sdl: string) {
+  const documentAST = parse(sdl);
+  const errors = validateSDL(documentAST, null, validationRules);
+  if (errors.length !== 0) {
+    throw new Error(errors.map((error) => error.message).join('\n\n'));
+  }
+
+  const schema = buildSchema(sdl, { assumeValidSDL: true });
+  return introspectionFromSchema(schema);
+}

tests/PageObjectModel.ts

@@ -40,6 +40,17 @@ class PlaywrightVoyagerPage {
   async waitForGraphToBeLoaded() {
     await this.graphLoadingAnimation.waitFor({ state: 'hidden' });
   }
+
+  async submitSDL(sdl: string) {
+    const { changeSchemaDialog } = this;
+    const { sdlTab } = changeSchemaDialog;
+
+    await changeSchemaDialog.openButton.click();
+    await sdlTab.tab.click();
+    await sdlTab.sdlTextArea.fill(sdl);
+    await changeSchemaDialog.displayButton.click();
+    await this.waitForGraphToBeLoaded();
+  }
 }
 
 class PlaywrightChangeSchemaDialog {

tests/demo.spec.ts

@@ -75,6 +75,15 @@ test('use custom SDL', async ({ page }) => {
   await expect(voyagerPage.page).toHaveScreenshot('display-sdl.png');
 });
 
+test.only('use custom SDL with custom directives', async ({ page }) => {
+  const voyagerPage = await gotoVoyagerPage(page);
+  await voyagerPage.submitSDL('type Query @foo { bar: String @baz }');
+
+  await expect(voyagerPage.page).toHaveScreenshot(
+    'display-sdl-with-unknown-directives.png',
+  );
+});
+
 test('use custom introspection', async ({ page }) => {
   const voyagerPage = await gotoVoyagerPage(page);
   const { changeSchemaDialog } = voyagerPage;