Graphql 16 upgrade

.changeset/great-eyes-try.md

@@ -0,0 +1,13 @@
+---
+"codemirror-graphql": minor
+"@graphiql/toolkit": minor
+"monaco-graphql": minor
+"graphiql": minor
+"graphql-language-service-cli": minor
+"graphql-language-service-interface": minor
+"graphql-language-service-parser": minor
+"graphql-language-service-server": minor
+"graphql-language-service": minor
+---
+
+upgrade to `graphql@16.0.0-experimental-stream-defer.5`

examples/graphiql-create-fetcher/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "graphiql": "file:../../packages/graphiql",
     "@graphiql/toolkit": "file:../../packages/graphiql-toolkit",
-    "graphql": "experimental-stream-defer",
+    "graphql": "16.0.0-experimental-stream-defer.5",
     "react": "16.13.1"
   },
   "devDependencies": {

examples/graphiql-create-react-app/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "graphiql": "file:../../packages/graphiql",
-    "graphql": "experimental-stream-defer",
+    "graphql": "16.0.0-experimental-stream-defer.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"

examples/graphiql-parcel/package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "graphiql": "file:../../packages/graphiql",
-    "graphql": "experimental-stream-defer",
+    "graphql": "16.0.0-experimental-stream-defer.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "typescript": "^3.4.4"

examples/graphiql-webpack/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "graphiql": "file:../../packages/graphiql",
-    "graphql": "experimental-stream-defer",
+    "graphql": "16.0.0-experimental-stream-defer.5",
     "react": "17.0.2"
   },
   "devDependencies": {

examples/monaco-graphql-webpack/package.json

@@ -9,7 +9,7 @@
     "start": "cross-env NODE_ENV=development webpack-dev-server"
   },
   "dependencies": {
-    "graphql": "experimental-stream-defer",
+    "graphql": "16.0.0-experimental-stream-defer.5",
     "monaco-graphql": "^0.5.1",
     "prettier": "^2.0.4"
   },

packages/codemirror-graphql/package.json

@@ -40,7 +40,7 @@
   },
   "peerDependencies": {
     "codemirror": "^5.58.2",
-    "graphql": ">= v14.5.0 <= 15.5.0"
+    "graphql": ">= 15.5.0 <= 16.0.0-experimental-stream-defer.5"
   },
   "dependencies": {
     "graphql-language-service-interface": "^2.8.2",
@@ -49,7 +49,7 @@
   "devDependencies": {
     "codemirror": "^5.58.2",
     "cross-env": "^7.0.2",
-    "graphql": "experimental-stream-defer",
+    "graphql": "16.0.0-experimental-stream-defer.5",
     "jsdom": "^16.4.0",
     "rimraf": "^3.0.2",
     "sane": "2.0.0"

packages/codemirror-graphql/src/__tests__/hint-test.ts

@@ -137,13 +137,13 @@ describe('graphql-hint', () => {
       },
       {
         text: '__typename',
-        type: GraphQLNonNull(GraphQLString),
+        type: new GraphQLNonNull(GraphQLString),
         description: 'The name of the current Object type at runtime.',
         isDeprecated: false,
       },
       {
         text: '__schema',
-        type: GraphQLNonNull(__Schema),
+        type: new GraphQLNonNull(__Schema),
         description: 'Access the current type schema of this server.',
         isDeprecated: false,
       },
@@ -209,7 +209,7 @@ describe('graphql-hint', () => {
       },
       {
         text: '__typename',
-        type: GraphQLNonNull(GraphQLString),
+        type: new GraphQLNonNull(GraphQLString),
         description: 'The name of the current Object type at runtime.',
         isDeprecated: false,
       },
@@ -619,7 +619,7 @@ describe('graphql-hint', () => {
       {
         text: '__Type',
         description:
-          'The fundamental unit of any GraphQL Schema is the type. There are many kinds of types in GraphQL as represented by the `__TypeKind` enum.\n\nDepending on the kind of a type, certain fields describe information about that type. Scalar types provide no information beyond a name, description and optional `specifiedByUrl`, while Enum types provide their values. Object and Interface types provide the fields they describe. Abstract types, Union and Interface, provide the Object types possible at runtime. List and NonNull types compose other types.',
+          'The fundamental unit of any GraphQL Schema is the type. There are many kinds of types in GraphQL as represented by the `__TypeKind` enum.\n\nDepending on the kind of a type, certain fields describe information about that type. Scalar types provide no information beyond a name, description and optional `specifiedByURL`, while Enum types provide their values. Object and Interface types provide the fields they describe. Abstract types, Union and Interface, provide the Object types possible at runtime. List and NonNull types compose other types.',
       },
       {
         text: '__Field',
@@ -855,7 +855,7 @@ describe('graphql-hint', () => {
       },
       {
         text: '__typename',
-        type: GraphQLNonNull(GraphQLString),
+        type: new GraphQLNonNull(GraphQLString),
         description: 'The name of the current Object type at runtime.',
         isDeprecated: false,
       },
@@ -887,7 +887,7 @@ describe('graphql-hint', () => {
       },
       {
         text: '__typename',
-        type: GraphQLNonNull(GraphQLString),
+        type: new GraphQLNonNull(GraphQLString),
         description: 'The name of the current Object type at runtime.',
         isDeprecated: false,
       },
@@ -1111,7 +1111,7 @@ describe('graphql-hint', () => {
         description: 'The name of the current Object type at runtime.',
         isDeprecated: false,
         text: '__typename',
-        type: GraphQLNonNull(GraphQLString),
+        type: new GraphQLNonNull(GraphQLString),
         deprecationReason: undefined,
       },
     ];

packages/codemirror-graphql/src/info.ts

@@ -76,7 +76,7 @@ CodeMirror.registerHelper(
     ) {
       const into = document.createElement('div');
       renderField(into, typeInfo, options);
-      renderDescription(into, options, typeInfo.fieldDef as GraphQLInputField);
+      renderDescription(into, options, typeInfo.fieldDef as any);
       return into;
     } else if (kind === 'Directive' && step === 1 && typeInfo.directiveDef) {
       const into = document.createElement('div');

packages/codemirror-graphql/src/utils/getTypeInfo.ts

@@ -107,7 +107,7 @@ export default function getTypeInfo(schema: GraphQLSchema, tokenState: State) {
               getFieldDef(schema, info.parentType, state.prevState.name)
             : null
           : null;
-        info.argDefs = parentDef ? parentDef.args : null;
+        info.argDefs = parentDef ? (parentDef.args as GraphQLArgument[]) : null;
         break;
       case 'Argument':
         info.argDef = null;
@@ -125,7 +125,10 @@ export default function getTypeInfo(schema: GraphQLSchema, tokenState: State) {
         const enumType = info.inputType ? getNamedType(info.inputType) : null;
         info.enumValue =
           enumType instanceof GraphQLEnumType
-            ? find(enumType.getValues(), val => val.value === state.name)
+            ? find(
+                enumType.getValues() as GraphQLEnumValue[],
+                val => val.value === state.name,
+              )
             : null;
         break;
       case 'ListValue':

packages/graphiql-2-rfc-context/package.json

@@ -57,7 +57,7 @@
     "theme-ui": "^0.3.1"
   },
   "peerDependencies": {
-    "graphql": ">= v14.5.0 <= 15.5.0",
+    "graphql": ">= 15.5.0 <= 16.0.0-experimental-stream-defer.5",
     "prop-types": ">=15.5.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
@@ -80,7 +80,7 @@
     "express-graphql": "experimental-stream-defer",
     "file-loader": "6.2.0",
     "fork-ts-checker-webpack-plugin": "4.1.3",
-    "graphql": "experimental-stream-defer",
+    "graphql": "16.0.0-experimental-stream-defer.5",
     "html-webpack-plugin": "^4.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.3.0",

packages/graphiql-toolkit/package.json

@@ -25,12 +25,12 @@
     "meros": "^1.1.4"
   },
   "devDependencies": {
-    "graphql": "experimental-stream-defer",
+    "graphql": "16.0.0-experimental-stream-defer.5",
     "isomorphic-fetch": "^3.0.0",
     "subscriptions-transport-ws": "^0.9.19"
   },
   "peerDependencies": {
-    "graphql": ">= v14.5.0 <= 15.6.1"
+    "graphql": ">= 15.5.0 <= 16.0.0-experimental-stream-defer.5"
   },
   "keywords": [
     "graphql",

packages/graphiql/cypress/integration/init.spec.ts

@@ -50,7 +50,7 @@ describe('GraphiQL On Initialization', () => {
       errors: [
         {
           message:
-            'Names must match /^[_a-zA-Z][_a-zA-Z0-9]*$/ but "<img src=x onerror=alert(document.domain)>" does not.',
+            'Names must only contain [_a-zA-Z0-9] but "<img src=x onerror=alert(document.domain)>" does not.',
         },
       ],
     });

packages/graphiql/cypress/integration/prettify.spec.ts

@@ -2,8 +2,7 @@ const prettifiedQuery = `{
   longDescriptionType {
     id
   }
-}
-`;
+}`;
 
 const prettifiedVariables = `{
   "a": 1

packages/graphiql/package.json

@@ -54,7 +54,7 @@
     "markdown-it": "^12.2.0"
   },
   "peerDependencies": {
-    "graphql": ">= v14.5.0 <= 15.5.0",
+    "graphql": ">= 15.5.0 <= 16.0.0-experimental-stream-defer.5",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
@@ -74,7 +74,7 @@
     "express": "^4.17.1",
     "express-graphql": "experimental-stream-defer",
     "fork-ts-checker-webpack-plugin": "4.1.3",
-    "graphql": "experimental-stream-defer",
+    "graphql": "16.0.0-experimental-stream-defer.5",
     "html-webpack-plugin": "^4.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.3.0",

packages/graphiql/src/components/DocExplorer/TypeDoc.tsx

@@ -93,9 +93,7 @@ export default class TypeDoc extends React.Component<
         <div className="doc-category">
           <div className="doc-category-title">{'fields'}</div>
           {fields
-            .filter(field =>
-              'isDeprecated' in field ? !field.isDeprecated : true,
-            )
+            .filter(field => !field.deprecationReason)
             .map(field => (
               <Field
                 key={field.name}
@@ -108,8 +106,8 @@ export default class TypeDoc extends React.Component<
         </div>
       );
 
-      const deprecatedFields = fields.filter(
-        field => 'isDeprecated' in field && field.isDeprecated,
+      const deprecatedFields = fields.filter(field =>
+        Boolean(field.deprecationReason),
       );
       if (deprecatedFields.length > 0) {
         deprecatedFieldsDef = (
@@ -143,14 +141,16 @@ export default class TypeDoc extends React.Component<
         <div className="doc-category">
           <div className="doc-category-title">{'values'}</div>
           {values
-            .filter(value => !value.isDeprecated)
+            .filter(value => Boolean(!value.deprecationReason))
             .map(value => (
               <EnumValue key={value.name} value={value} />
             ))}
         </div>
       );
 
-      const deprecatedValues = values.filter(value => value.isDeprecated);
+      const deprecatedValues = values.filter(value =>
+        Boolean(value.deprecationReason),
+      );
       if (deprecatedValues.length > 0) {
         deprecatedValuesDef = (
           <div className="doc-category">

packages/graphiql/src/components/GraphiQL.tsx

@@ -1026,7 +1026,7 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
       } else {
         visit(
           parse(this.props.externalFragments, {
-            experimentalFragmentVariables: true,
+            allowLegacyFragmentVariables: true,
           }),
           {
             FragmentDefinition(def) {
@@ -1311,7 +1311,7 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
     const editor = this.getQueryEditor();
     const editorContent = editor?.getValue() ?? '';
     const prettifiedEditorContent = print(
-      parse(editorContent, { experimentalFragmentVariables: true }),
+      parse(editorContent, { allowLegacyFragmentVariables: true }),
     );
 
     if (prettifiedEditorContent !== editorContent) {

packages/graphiql/src/components/__tests__/ExampleSchema.ts

@@ -28,7 +28,7 @@ export const ExampleEnum = new GraphQLEnumType({
 });
 
 export const ExampleUnionType1 = new GraphQLObjectType({
-  name: 'Union Type 1',
+  name: 'Union_Type_1',
   interfaces: [ExampleInterface],
   fields: {
     name: {
@@ -43,7 +43,7 @@ export const ExampleUnionType1 = new GraphQLObjectType({
 });
 
 export const ExampleUnionType2 = new GraphQLObjectType({
-  name: 'Union Type 2',
+  name: 'Union_Type_2',
   interfaces: [ExampleInterface],
   fields: {
     name: {

packages/graphiql/src/utility/fillLeafs.ts

@@ -17,6 +17,7 @@ import {
   GraphQLOutputType,
   GraphQLType,
   SelectionSetNode,
+  Kind,
 } from 'graphql';
 
 import { Maybe } from '../components/GraphiQL';
@@ -153,14 +154,14 @@ function buildSelectionSet(
 
   // Build a selection set of each field, calling buildSelectionSet recursively.
   return {
-    kind: 'SelectionSet',
+    kind: Kind.SELECTION_SET,
     selections: fieldNames.map(fieldName => {
       const fieldDef = namedType.getFields()[fieldName];
       const fieldType = fieldDef ? fieldDef.type : null;
       return {
-        kind: 'Field',
+        kind: Kind.FIELD,
         name: {
-          kind: 'Name',
+          kind: Kind.NAME,
           value: fieldName,
         },
         // we can use as here, because we already know that fieldType

packages/graphiql/src/utility/getQueryFacts.ts

@@ -43,7 +43,7 @@ export default function getOperationFacts(
   let documentAST: DocumentNode;
   try {
     documentAST = parse(documentStr, {
-      experimentalFragmentVariables: true,
+      allowLegacyFragmentVariables: true,
     });
   } catch {
     return;

packages/graphiql/src/utility/mergeAst.ts

@@ -16,9 +16,8 @@ import {
   getNamedType,
   visit,
   visitWithTypeInfo,
-  ASTKindToNode,
-  Visitor,
-  ASTNode,
+  ASTVisitor,
+  Kind,
 } from 'graphql';
 
 type Maybe<T> = null | T;
@@ -82,15 +81,15 @@ export function inlineRelevantFragmentSpreads(
       if (fragmentDefinition) {
         const { typeCondition, directives, selectionSet } = fragmentDefinition;
         selection = {
-          kind: 'InlineFragment',
+          kind: Kind.INLINE_FRAGMENT,
           typeCondition,
           directives,
           selectionSet,
         };
       }
     }
     if (
-      selection.kind === 'InlineFragment' &&
+      selection.kind === Kind.INLINE_FRAGMENT &&
       // Cannot inline if there are directives
       (!selection.directives || selection.directives?.length === 0)
     ) {
@@ -129,13 +128,13 @@ export default function mergeAST(
   } = Object.create(null);
 
   for (const definition of documentAST.definitions) {
-    if (definition.kind === 'FragmentDefinition') {
+    if (definition.kind === Kind.FRAGMENT_DEFINITION) {
       fragmentDefinitions[definition.name.value] = definition;
     }
   }
 
-  const visitors: Visitor<ASTKindToNode, ASTNode> = {
-    SelectionSet(node) {
+  const visitors: ASTVisitor = {
+    SelectionSet(node: any) {
       const selectionSetType = typeInfo ? typeInfo.getParentType() : null;
       let { selections } = node;