Fixes #915 #932

Author: huv1k

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

@@ -108,49 +108,52 @@ export default class FieldDoc extends React.Component<Props, State> {
           />
         )}
 
-        {obj.fields.length > 0 && (
-          <DocTypeSchema
-            type={type}
-            fields={obj.fields}
-            interfaces={obj.interfaces}
-            level={level}
-            sessionId={this.props.sessionId}
-          />
-        )}
+        {obj.fields &&
+          obj.fields.length > 0 && (
+            <DocTypeSchema
+              type={type}
+              fields={obj.fields}
+              interfaces={obj.interfaces}
+              level={level}
+              sessionId={this.props.sessionId}
+            />
+          )}
 
-        {obj.args.length > 0 && (
-          <div>
-            <CategoryTitle>arguments</CategoryTitle>
-            {obj.args.map((arg, index) => (
-              <div key={arg.name}>
-                <div>
-                  <Argument
-                    arg={arg}
-                    x={level}
-                    y={index + argsOffset}
-                    sessionId={this.props.sessionId}
-                  />
+        {obj.args &&
+          obj.args.length > 0 && (
+            <div>
+              <CategoryTitle>arguments</CategoryTitle>
+              {obj.args.map((arg, index) => (
+                <div key={arg.name}>
+                  <div>
+                    <Argument
+                      arg={arg}
+                      x={level}
+                      y={index + argsOffset}
+                      sessionId={this.props.sessionId}
+                    />
+                  </div>
                 </div>
-              </div>
-            ))}
-          </div>
-        )}
+              ))}
+            </div>
+          )}
 
-        {obj.implementations.length > 0 && (
-          <div>
-            <CategoryTitle>implementations</CategoryTitle>
-            {obj.implementations.map((data, index) => (
-              <TypeLink
-                key={data.name}
-                type={data}
-                x={level}
-                y={index + implementationsOffset}
-                collapsable={true}
-                lastActive={false}
-              />
-            ))}
-          </div>
-        )}
+        {obj.implementations &&
+          obj.implementations.length > 0 && (
+            <div>
+              <CategoryTitle>implementations</CategoryTitle>
+              {obj.implementations.map((data, index) => (
+                <TypeLink
+                  key={data.name}
+                  type={data}
+                  x={level}
+                  y={index + implementationsOffset}
+                  collapsable={true}
+                  lastActive={false}
+                />
+              ))}
+            </div>
+          )}
       </div>
     )
   }

packages/graphql-playground-react/src/components/Playground/ExplorerTabs/SideTabs.tsx

@@ -340,7 +340,6 @@ const TabContentContainer = styled.div`
   letter-spacing: 0.3px;
   box-shadow: -1px 1px 6px 0 rgba(0, 0, 0, 0.3);
   outline: none;
-  user-select: none;
   &::before {
     top: 0;
     bottom: 0;

packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx

@@ -332,7 +332,9 @@ class GraphQLEditor extends React.PureComponent<Props & ReduxProps> {
   }
 
   handleClickReference = reference => {
-    this.docExplorerComponent.showDocFromType(reference.field || reference)
+    if (this.docExplorerComponent) {
+      this.docExplorerComponent.showDocFromType(reference.field || reference)
+    }
   }
 
   /**