graphql · acao · Apr 2, 2019 · May 6, 2019 · May 21, 2019
diff --git a/example/schema.js b/example/schema.js
@@ -9,6 +9,7 @@ const {
   GraphQLSchema,
   GraphQLObjectType,
   GraphQLUnionType,
+  GraphQLInputUnionType,
   GraphQLEnumType,
   GraphQLInputObjectType,
   GraphQLInterfaceType,
@@ -110,6 +111,31 @@ const TestUnion = new GraphQLUnionType({
   },
 });
 
+const InputUnionFirst = new GraphQLInputObjectType({
+  name: 'InputUnionFirst',
+  fields: () => ({
+    name: {
+      type: GraphQLString,
+      description: 'Common name string for InputUnionFirst.',
+    },
+  }),
+});
+
+const InputUnionSecond = new GraphQLInputObjectType({
+  name: 'InputUnionSecond',
+  fields: () => ({
+    name: {
+      type: GraphQLString,
+      description: 'Common name string for InputUnionFirst.',
+    },
+  }),
+});
+
+const TestInputUnion = new GraphQLInputUnionType({
+  name: 'TestInputUnion',
+  types: [InputUnionFirst, InputUnionSecond],
+});
+
 const TestType = new GraphQLObjectType({
   name: 'Test',
   fields: () => ({
@@ -153,6 +179,8 @@ const TestType = new GraphQLObjectType({
         id: { type: GraphQLID },
         enum: { type: TestEnum },
         object: { type: TestInputObject },
+        union: { type: TestInputUnion },
+
         // List
         listString: { type: new GraphQLList(GraphQLString) },
         listInt: { type: new GraphQLList(GraphQLInt) },
@@ -161,6 +189,7 @@ const TestType = new GraphQLObjectType({
         listID: { type: new GraphQLList(GraphQLID) },
         listEnum: { type: new GraphQLList(TestEnum) },
         listObject: { type: new GraphQLList(TestInputObject) },
+        listUnion: { type: new GraphQLList(TestInputUnion) },
       },
     },
   }),

diff --git a/resources/build.sh b/resources/build.sh
@@ -11,9 +11,9 @@ fi
 rm -rf dist/ && mkdir -p dist/
 babel src --ignore __tests__ --out-dir dist/
 echo "Bundling graphiql.js..."
-browserify -g browserify-shim -s GraphiQL dist/index.js > graphiql.js
+browserify -s GraphiQL dist/index.js > graphiql.js
 echo "Bundling graphiql.min.js..."
-browserify -g browserify-shim -t uglifyify -s GraphiQL dist/index.js 2> /dev/null | uglifyjs -c > graphiql.min.js 2> /dev/null
+browserify -t uglifyify -s GraphiQL dist/index.js 2> /dev/null | uglifyjs -c > graphiql.min.js 2> /dev/null
 echo "Bundling graphiql.css..."
 postcss --no-map --use autoprefixer -d dist/ css/*.css
 cat dist/*.css > graphiql.css

diff --git a/src/components/DocExplorer/TypeDoc.js b/src/components/DocExplorer/TypeDoc.js
@@ -12,6 +12,7 @@ import {
   GraphQLObjectType,
   GraphQLInterfaceType,
   GraphQLUnionType,
+  GraphQLInputUnionType,
   GraphQLEnumType,
 } from 'graphql';
 
@@ -49,9 +50,13 @@ export default class TypeDoc extends React.Component {
 
     let typesTitle;
     let types;
+
     if (type instanceof GraphQLUnionType) {
       typesTitle = 'possible types';
       types = schema.getPossibleTypes(type);
+    } else if (type instanceof GraphQLInputUnionType) {
+      typesTitle = 'possible input types';
+      types = schema.getPossibleTypes(type);
     } else if (type instanceof GraphQLInterfaceType) {
       typesTitle = 'implementations';
       types = schema.getPossibleTypes(type);
@@ -65,11 +70,11 @@ export default class TypeDoc extends React.Component {
       typesDef = (
         <div className="doc-category">
           <div className="doc-category-title">{typesTitle}</div>
-          {types.map(subtype => (
+          {types.map(subtype =>
             <div key={subtype.name} className="doc-category-item">
               <TypeLink type={subtype} onClick={onClickType} />
-            </div>
-          ))}
+            </div>,
+          )}
         </div>
       );
     }
@@ -85,15 +90,15 @@ export default class TypeDoc extends React.Component {
           <div className="doc-category-title">{'fields'}</div>
           {fields
             .filter(field => !field.isDeprecated)
-            .map(field => (
+            .map(field =>
               <Field
                 key={field.name}
                 type={type}
                 field={field}
                 onClickType={onClickType}
                 onClickField={onClickField}
-              />
-            ))}
+              />,
+            )}
         </div>
       );
 
@@ -102,21 +107,21 @@ export default class TypeDoc extends React.Component {
         deprecatedFieldsDef = (
           <div className="doc-category">
             <div className="doc-category-title">{'deprecated fields'}</div>
-            {!this.state.showDeprecated ? (
-              <button className="show-btn" onClick={this.handleShowDeprecated}>
-                {'Show deprecated fields...'}
-              </button>
-            ) : (
-              deprecatedFields.map(field => (
-                <Field
-                  key={field.name}
-                  type={type}
-                  field={field}
-                  onClickType={onClickType}
-                  onClickField={onClickField}
-                />
-              ))
-            )}
+            {!this.state.showDeprecated
+              ? <button
+                  className="show-btn"
+                  onClick={this.handleShowDeprecated}>
+                  {'Show deprecated fields...'}
+                </button>
+              : deprecatedFields.map(field =>
+                  <Field
+                    key={field.name}
+                    type={type}
+                    field={field}
+                    onClickType={onClickType}
+                    onClickField={onClickField}
+                  />,
+                )}
           </div>
         );
       }
@@ -140,15 +145,15 @@ export default class TypeDoc extends React.Component {
         deprecatedValuesDef = (
           <div className="doc-category">
             <div className="doc-category-title">{'deprecated values'}</div>
-            {!this.state.showDeprecated ? (
-              <button className="show-btn" onClick={this.handleShowDeprecated}>
-                {'Show deprecated values...'}
-              </button>
-            ) : (
-              deprecatedValues.map(value => (
-                <EnumValue key={value.name} value={value} />
-              ))
-            )}
+            {!this.state.showDeprecated
+              ? <button
+                  className="show-btn"
+                  onClick={this.handleShowDeprecated}>
+                  {'Show deprecated values...'}
+                </button>
+              : deprecatedValues.map(value =>
+                  <EnumValue key={value.name} value={value} />,
+                )}
           </div>
         );
       }
@@ -182,30 +187,28 @@ function Field({ type, field, onClickType, onClickField }) {
         {field.name}
       </a>
       {field.args &&
-        field.args.length > 0 && [
-          '(',
-          <span key="args">
-            {field.args.map(arg => (
-              <Argument key={arg.name} arg={arg} onClickType={onClickType} />
-            ))}
-          </span>,
-          ')',
-        ]}
+      field.args.length > 0 && [
+        '(',
+        <span key="args">
+          {field.args.map(arg =>
+            <Argument key={arg.name} arg={arg} onClickType={onClickType} />,
+          )}
+        </span>,
+        ')',
+      ]}
       {': '}
       <TypeLink type={field.type} onClick={onClickType} />
       <DefaultValue field={field} />
-      {field.description && (
+      {field.description &&
         <MarkdownContent
           className="field-short-description"
           markdown={field.description}
-        />
-      )}
-      {field.deprecationReason && (
+        />}
+      {field.deprecationReason &&
         <MarkdownContent
           className="doc-deprecation"
           markdown={field.deprecationReason}
-        />
-      )}
+        />}
     </div>
   );
 }
@@ -225,12 +228,11 @@ function EnumValue({ value }) {
         className="doc-value-description"
         markdown={value.description}
       />
-      {value.deprecationReason && (
+      {value.deprecationReason &&
         <MarkdownContent
           className="doc-deprecation"
           markdown={value.deprecationReason}
-        />
-      )}
+        />}
     </div>
   );
 }

diff --git a/test/schema.js b/test/schema.js
@@ -9,6 +9,7 @@ const {
   GraphQLSchema,
   GraphQLObjectType,
   GraphQLUnionType,
+  GraphQLInputUnionType,
   GraphQLEnumType,
   GraphQLInputObjectType,
   GraphQLInterfaceType,
@@ -128,6 +129,48 @@ const TestUnion = new GraphQLUnionType({
   },
 });
 
+const InputUnionFirst = new GraphQLObjectType({
+  name: 'First',
+  fields: () => ({
+    name: {
+      type: GraphQLString,
+      description: 'Common name string for InputUnionFirst.',
+    },
+    first: {
+      type: new GraphQLList(TestInterface),
+      resolve: () => {
+        return true;
+      },
+    },
+  }),
+  interfaces: [TestInterface],
+});
+
+const InputUnionSecond = new GraphQLObjectType({
+  name: 'First',
+  fields: () => ({
+    name: {
+      type: GraphQLString,
+      description: 'Common name string for InputUnionSecond.',
+    },
+    first: {
+      type: new GraphQLList(TestInterface),
+      resolve: () => {
+        return true;
+      },
+    },
+  }),
+  interfaces: [TestInterface],
+});
+
+const TestInputUnion = new GraphQLInputUnionType({
+  name: 'TestInputUnion',
+  types: [InputUnionFirst, InputUnionSecond],
+  resolveType() {
+    return InputUnionFirst;
+  },
+});
+
 const TestType = new GraphQLObjectType({
   name: 'Test',
   fields: () => ({
@@ -148,6 +191,16 @@ const TestType = new GraphQLObjectType({
       description: '> union field from Test type, block-quoted.',
       resolve: () => ({}),
     },
+    inputUnion: {
+      type: TestInputUnion,
+      description: `
+        input union field from Test type, with unordered list:
+        - how
+        - about
+        - that
+      `,
+      resolve: () => ({}),
+    },
     id: {
       type: GraphQLID,
       description: 'id field from Test type.',

diff --git a/test/server.js b/test/server.js
@@ -9,7 +9,6 @@
 import express from 'express';
 import path from 'path';
 import browserify from 'browserify';
-import browserifyShim from 'browserify-shim';
 import watchify from 'watchify';
 import babelify from 'babelify';
 import graphqlHTTP from 'express-graphql';
@@ -28,7 +27,7 @@ const b = browserify({
   entries: [path.join(__dirname, '../src/index.js')],
   cache: {},
   packageCache: {},
-  transform: [babelify, browserifyShim],
+  transform: [babelify],
   plugin: [watchify],
   standalone: 'GraphiQL',
   globalTransform: 'browserify-shim',