simplify doc explorer components

packages/graphiql-react/src/editor/completion.ts

@@ -1,11 +1,6 @@
 import type { Editor, EditorChange } from 'codemirror';
 import escapeHTML from 'escape-html';
-import {
-  GraphQLList,
-  GraphQLNonNull,
-  GraphQLSchema,
-  GraphQLType,
-} from 'graphql';
+import { GraphQLSchema, GraphQLType, isListType, isNonNullType } from 'graphql';
 
 import { ExplorerContextType } from '../explorer';
 import { markdown } from '../markdown';
@@ -117,10 +112,10 @@ export function onHasCompletion(
 }
 
 function renderType(type: GraphQLType): string {
-  if (type instanceof GraphQLNonNull) {
+  if (isNonNullType(type)) {
     return `${renderType(type.ofType)}!`;
   }
-  if (type instanceof GraphQLList) {
+  if (isListType(type)) {
     return `[${renderType(type.ofType)}]`;
   }
   return `<a class="typeName">${escapeHTML(type.name)}</a>`;

packages/graphiql/src/components/DocExplorer.tsx

@@ -6,12 +6,8 @@
  */
 
 import React, { ReactNode } from 'react';
-import { isType, GraphQLNamedType } from 'graphql';
-import {
-  ExplorerFieldDef,
-  useExplorerContext,
-  useSchemaContext,
-} from '@graphiql/react';
+import { GraphQLSchema, isType } from 'graphql';
+import { useExplorerContext, useSchemaContext } from '@graphiql/react';
 
 import FieldDoc from './DocExplorer/FieldDoc';
 import SchemaDoc from './DocExplorer/SchemaDoc';
@@ -21,6 +17,14 @@ import TypeDoc from './DocExplorer/TypeDoc';
 
 type DocExplorerProps = {
   onClose?(): void;
+  /**
+   * @deprecated Passing a schema prop directly to this component will be
+   * removed in the next major version. Instead you need to wrap this component
+   * with the `SchemaContextProvider` from `@graphiql/react`. This context
+   * provider accepts a `schema` prop that you can use to skip fetching the
+   * schema with an introspection request.
+   */
+  schema?: GraphQLSchema | null;
 };
 
 /**
@@ -33,24 +37,19 @@ export function DocExplorer(props: DocExplorerProps) {
   const {
     fetchError,
     isFetching,
-    schema,
+    schema: schemaFromContext,
     validationErrors,
   } = useSchemaContext({ nonNull: true });
-  const { explorerNavStack, hide, pop, push, showSearch } = useExplorerContext({
+  const { explorerNavStack, hide, pop, showSearch } = useExplorerContext({
     nonNull: true,
   });
 
   const navItem = explorerNavStack[explorerNavStack.length - 1];
 
-  function handleClickType(type: GraphQLNamedType) {
-    push({ name: type.name, def: type });
-  }
-
-  function handleClickField(field: ExplorerFieldDef) {
-    push({ name: field.name, def: field });
-  }
+  // The schema passed via props takes precedence until we remove the prop
+  const schema = props.schema === undefined ? schemaFromContext : props.schema;
 
-  let content: ReactNode;
+  let content: ReactNode = null;
   if (fetchError) {
     content = <div className="error-container">Error fetching schema</div>;
   } else if (validationErrors) {
@@ -71,28 +70,13 @@ export function DocExplorer(props: DocExplorerProps) {
     // an error during introspection.
     content = <div className="error-container">No Schema Available</div>;
   } else if (navItem.search) {
-    content = (
-      <SearchResults
-        searchValue={navItem.search}
-        withinType={navItem.def as GraphQLNamedType}
-        schema={schema}
-        onClickType={handleClickType}
-        onClickField={handleClickField}
-      />
-    );
+    content = <SearchResults />;
   } else if (explorerNavStack.length === 1) {
-    content = <SchemaDoc schema={schema} onClickType={handleClickType} />;
+    content = <SchemaDoc />;
   } else if (isType(navItem.def)) {
-    content = (
-      <TypeDoc
-        schema={schema}
-        type={navItem.def}
-        onClickType={handleClickType}
-        onClickField={handleClickField}
-      />
-    );
-  } else {
-    content = <FieldDoc field={navItem.def} onClickType={handleClickType} />;
+    content = <TypeDoc />;
+  } else if (navItem.def) {
+    content = <FieldDoc />;
   }
 
   const shouldSearchBoxAppear =

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

@@ -9,24 +9,18 @@ import React from 'react';
 import { GraphQLArgument } from 'graphql';
 import TypeLink from './TypeLink';
 import DefaultValue from './DefaultValue';
-import { OnClickTypeFunction } from './types';
 
 type ArgumentProps = {
   arg: GraphQLArgument;
-  onClickType: OnClickTypeFunction;
   showDefaultValue?: boolean;
 };
 
-export default function Argument({
-  arg,
-  onClickType,
-  showDefaultValue,
-}: ArgumentProps) {
+export default function Argument({ arg, showDefaultValue }: ArgumentProps) {
   return (
     <span className="arg">
       <span className="arg-name">{arg.name}</span>
       {': '}
-      <TypeLink type={arg.type} onClick={onClickType} />
+      <TypeLink type={arg.type} />
       {showDefaultValue !== false && <DefaultValue field={arg} />}
     </span>
   );

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

@@ -6,22 +6,24 @@
  */
 
 import React from 'react';
-import { GraphQLArgument, DirectiveNode } from 'graphql';
-import { ExplorerFieldDef } from '@graphiql/react';
+import { GraphQLArgument, DirectiveNode, isType } from 'graphql';
+import { useExplorerContext } from '@graphiql/react';
 
 import Argument from './Argument';
 import Directive from './Directive';
 import MarkdownContent from './MarkdownContent';
 import TypeLink from './TypeLink';
-import { OnClickTypeFunction } from './types';
 
-type FieldDocProps = {
-  field?: ExplorerFieldDef;
-  onClickType: OnClickTypeFunction;
-};
-
-export default function FieldDoc({ field, onClickType }: FieldDocProps) {
+export default function FieldDoc() {
+  const { explorerNavStack } = useExplorerContext({ nonNull: true });
   const [showDeprecated, handleShowDeprecated] = React.useState(false);
+
+  const navItem = explorerNavStack[explorerNavStack.length - 1];
+  const field = navItem.def;
+  if (!field || isType(field)) {
+    return null;
+  }
+
   let argsDef;
   let deprecatedArgsDef;
   if (field && 'args' in field && field.args.length > 0) {
@@ -33,7 +35,7 @@ export default function FieldDoc({ field, onClickType }: FieldDocProps) {
           .map((arg: GraphQLArgument) => (
             <div key={arg.name} className="doc-category-item">
               <div>
-                <Argument arg={arg} onClickType={onClickType} />
+                <Argument arg={arg} />
               </div>
               <MarkdownContent
                 className="doc-value-description"
@@ -66,7 +68,7 @@ export default function FieldDoc({ field, onClickType }: FieldDocProps) {
             deprecatedArgs.map((arg, i) => (
               <div key={i}>
                 <div>
-                  <Argument arg={arg} onClickType={onClickType} />
+                  <Argument arg={arg} />
                 </div>
                 <MarkdownContent
                   className="doc-value-description"
@@ -111,17 +113,17 @@ export default function FieldDoc({ field, onClickType }: FieldDocProps) {
     <div>
       <MarkdownContent
         className="doc-type-description"
-        markdown={field?.description || 'No Description'}
+        markdown={field.description || 'No Description'}
       />
       {field && 'deprecationReason' in field && (
         <MarkdownContent
           className="doc-deprecation"
-          markdown={field?.deprecationReason}
+          markdown={field.deprecationReason}
         />
       )}
       <div className="doc-category">
         <div className="doc-category-title">type</div>
-        <TypeLink type={field?.type} onClick={onClickType} />
+        <TypeLink type={field.type} />
       </div>
       {argsDef}
       {directivesDef}

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

@@ -0,0 +1,30 @@
+/**
+ *  Copyright (c) 2022 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import { ExplorerFieldDef, useExplorerContext } from '@graphiql/react';
+
+type FieldLinkProps = {
+  field: ExplorerFieldDef;
+};
+
+export default function FieldLink(props: FieldLinkProps) {
+  const { push } = useExplorerContext({ nonNull: true });
+
+  return (
+    <a
+      className="field-name"
+      onClick={event => {
+        event.preventDefault();
+        push({ name: props.field.name, def: props.field });
+      }}
+      href="#">
+      {props.field.name}
+    </a>
+  );
+}

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

@@ -8,16 +8,16 @@
 import React from 'react';
 import TypeLink from './TypeLink';
 import MarkdownContent from './MarkdownContent';
-import { GraphQLSchema } from 'graphql';
-import { OnClickTypeFunction } from './types';
-
-type SchemaDocProps = {
-  schema: GraphQLSchema;
-  onClickType: OnClickTypeFunction;
-};
+import { useSchemaContext } from '@graphiql/react';
 
 // Render the top level Schema
-export default function SchemaDoc({ schema, onClickType }: SchemaDocProps) {
+export default function SchemaDoc() {
+  const { schema } = useSchemaContext({ nonNull: true });
+
+  if (!schema) {
+    return null;
+  }
+
   const queryType = schema.getQueryType();
   const mutationType = schema.getMutationType && schema.getMutationType();
   const subscriptionType =
@@ -34,23 +34,25 @@ export default function SchemaDoc({ schema, onClickType }: SchemaDocProps) {
       />
       <div className="doc-category">
         <div className="doc-category-title">root types</div>
-        <div className="doc-category-item">
-          <span className="keyword">query</span>
-          {': '}
-          <TypeLink type={queryType} onClick={onClickType} />
-        </div>
+        {queryType ? (
+          <div className="doc-category-item">
+            <span className="keyword">query</span>
+            {': '}
+            <TypeLink type={queryType} />
+          </div>
+        ) : null}
         {mutationType && (
           <div className="doc-category-item">
             <span className="keyword">mutation</span>
             {': '}
-            <TypeLink type={mutationType} onClick={onClickType} />
+            <TypeLink type={mutationType} />
           </div>
         )}
         {subscriptionType && (
           <div className="doc-category-item">
             <span className="keyword">subscription</span>
             {': '}
-            <TypeLink type={subscriptionType} onClick={onClickType} />
+            <TypeLink type={subscriptionType} />
           </div>
         )}
       </div>