avoid erroring on known client side directives (#144)

0no-co · Dec 18, 2023 · 29938e9 · 29938e9
1 parent b4fd0d8
commit 29938e9
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 2 deletions.
diff --git a/.changeset/khaki-clouds-marry.md b/.changeset/khaki-clouds-marry.md
@@ -0,0 +1,5 @@
+---
+'@0no-co/graphqlsp': patch
+---
+
+Don't error on known client-side directives
diff --git a/packages/example-external-generator/src/index.tsx b/packages/example-external-generator/src/index.tsx
@@ -3,7 +3,7 @@ import { graphql } from './gql';
 
 const x = graphql(`
   query Pok($limit: Int!) {
-    pokemons(limit: $limit) {
+    pokemons(limit: $limit) @populate {
       id
       name
       fleeRate

diff --git a/packages/example/src/index.ts b/packages/example/src/index.ts
@@ -3,7 +3,7 @@ import { Pokemon, PokemonFields, WeakFields } from './Pokemon';
 
 const x = gql`
   query Pok($limit: Int!) {
-    pokemons(limit: $limit) {
+    pokemons(limit: $limit) @populate {
       id
       name
       fleeRate

diff --git a/packages/graphqlsp/src/diagnostics.ts b/packages/graphqlsp/src/diagnostics.ts
@@ -21,6 +21,21 @@ import {
 import { resolveTemplate } from './ast/resolve';
 import { generateTypedDocumentNodes } from './graphql/generateTypes';
 
+const clientDirectives = new Set([
+  'populate',
+  'client',
+  '_optional',
+  '_required',
+  'arguments',
+  'argumentDefinitions',
+  'connection',
+  'refetchable',
+  'relay',
+  'required',
+  'inline',
+]);
+const directiveRegex = /Unknown directive "@([^)]+)"/g;
+
 export const SEMANTIC_DIAGNOSTIC_CODE = 52001;
 export const MISSING_OPERATION_NAME_CODE = 52002;
 export const MISSING_FRAGMENT_CODE = 52003;
@@ -181,6 +196,15 @@ const runDiagnostics = (
         undefined,
         docFragments
       )
+        .filter(diag => {
+          if (!diag.message.includes('Unknown directive')) return true;
+
+          const [message] = diag.message.split('(');
+          const matches = directiveRegex.exec(message);
+          if (!matches) return true;
+          const directiveNmae = matches[1];
+          return !clientDirectives.has(directiveNmae);
+        })
         .map(x => {
           const { start, end } = x.range;