Fixing interfaces and unions in docs

packages/graphql-playground-react/src/components/Playground/DocExplorer/DocTypeSchema.tsx

@@ -1,3 +1,4 @@
+import { GraphQLInterfaceType } from 'graphql'
 import * as React from 'react'
 import TypeLink from './TypeLink'
 
@@ -18,6 +19,10 @@ const DocTypeSchema = ({
 }: DocTypeSchemaProps) => {
   const nonDeprecatedFields = fields.filter(data => !data.isDeprecated)
   const deprecatedFields = fields.filter(data => data.isDeprecated)
+
+  const typeInstance =
+    type instanceof GraphQLInterfaceType ? 'interface ' : 'type'
+
   return (
     <div className="doc-type-schema">
       <style jsx={true} global={true}>{`
@@ -54,7 +59,7 @@ const DocTypeSchema = ({
         }
       `}</style>
       <div className="doc-type-schema-line type-line">
-        <span className="field-name">type</span>{' '}
+        <span className="field-name">{typeInstance}</span>{' '}
         <span className="type-name">{type.name}</span>{' '}
         {interfaces.length === 0 && <span className="brace">{`{`}</span>}
       </div>

packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/UnionTypeSchema.tsx

@@ -1,11 +1,19 @@
+import TypeLink from '../TypeLink'
 import * as React from 'react'
 
 export interface EnumTypeSchemaProps {
   schema: any
   type: any
+  level: number
+  sessionId: string
 }
 
-const UnionTypeSchema = ({ schema, type }: EnumTypeSchemaProps) => {
+const UnionTypeSchema = ({
+  schema,
+  type,
+  level,
+  sessionId,
+}: EnumTypeSchemaProps) => {
   const types = schema.getPossibleTypes(type)
   return (
     <div className="doc-type-schema">
@@ -21,10 +29,15 @@ const UnionTypeSchema = ({ schema, type }: EnumTypeSchemaProps) => {
       <span className="type-name">{type.name}</span>
       {' = '}
       {types.map((value, index) => (
-        <div key={value.name} className="doc-value">
-          <span className="type-name">{value.name}</span>{' '}
-          {index < types.length - 1 && <span>|</span>}
-        </div>
+        <TypeLink
+          key={value.name}
+          type={value}
+          x={level}
+          y={index + 1}
+          collapsable={true}
+          sessionId={sessionId}
+          lastActive={false}
+        />
       ))}
     </div>
   )

packages/graphql-playground-react/src/components/Playground/DocExplorer/FieldDoc.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import Argument from './Argument'
-import { GraphQLEnumType, GraphQLUnionType, GraphQLScalarType } from 'graphql'
+import {
+  GraphQLInterfaceType,
+  GraphQLEnumType,
+  GraphQLUnionType,
+  GraphQLScalarType,
+} from 'graphql'
 import MarkdownContent from 'graphiql/dist/components/DocExplorer/MarkdownContent'
 import TypeLink from './TypeLink'
 import DocTypeSchema from './DocTypeSchema'
@@ -53,6 +58,18 @@ export default class FieldDoc extends React.Component<Props, State> {
     const implementationsOffset =
       obj.fields.length + obj.interfaces.length + obj.args.length
 
+    let typeInstance
+
+    if (type instanceof GraphQLInterfaceType) {
+      typeInstance = 'interface'
+    } else if (type instanceof GraphQLUnionType) {
+      typeInstance = 'union'
+    } else if (type instanceof GraphQLEnumType) {
+      typeInstance = 'enum'
+    } else {
+      typeInstance = 'type'
+    }
+
     return (
       <div>
         <style jsx={true} global={true}>{`
@@ -95,7 +112,7 @@ export default class FieldDoc extends React.Component<Props, State> {
           markdown={field.description || ''}
         />
 
-        <div className="doc-category-title">{'type details'}</div>
+        <div className="doc-category-title">{`${typeInstance} details`}</div>
         {type.description &&
           type.description.length > 0 && (
             <div className="markdown-content">
@@ -108,7 +125,12 @@ export default class FieldDoc extends React.Component<Props, State> {
         {type instanceof GraphQLScalarType && <ScalarTypeSchema type={type} />}
         {type instanceof GraphQLEnumType && <EnumTypeSchema type={type} />}
         {type instanceof GraphQLUnionType && (
-          <UnionTypeSchema type={type} schema={schema} />
+          <UnionTypeSchema
+            type={type}
+            schema={schema}
+            level={level}
+            sessionId={this.props.sessionId}
+          />
         )}
 
         {obj.fields.length > 0 && (

packages/graphql-playground-react/tslint.json

@@ -4,6 +4,7 @@
   ],
   "rules": {
     "forin": false,
-    "no-submodule-imports": false
+    "no-submodule-imports": false,
+    "prefer-conditional-expression": false
   }
 }