fix(graphiql): fix GraphiQL version 0.9.3 integration (#410)

Author: calebmer

package.json

@@ -63,7 +63,7 @@
     "@types/pluralize": "0.0.26",
     "connect": "^3.5.0",
     "express": "^4.14.0",
-    "graphiql": "^0.9.1",
+    "graphiql": "0.9.1",
     "graphql": "^0.9.3",
     "jest": "^18.1.0",
     "koa": "^2.0.0",

src/postgraphql/graphiql/src/components/PostGraphiQL.js

@@ -76,7 +76,7 @@ class PostGraphiQL extends React.Component {
   // TODO: Send the introspection query results in the server sent event?
   async updateSchema () {
     // Don’t allow users to see a schema while we update.
-    this.setState({ schema: null })
+    this.setState({ schema: undefined })
 
     // Fetch the schema using our introspection query and report once that has
     // finished.
@@ -117,13 +117,21 @@ class PostGraphiQL extends React.Component {
     // Ok, so if you look at GraphiQL source code, the `navStack` is made up of
     // objects that are either types or fields. Let’s use that to search in
     // our new schema for matching (updated) types and fields.
-    const nextNavStack = navStack.map((typeOrField, i) => {
+    const nextNavStack = navStack.map((navStackItem, i) => {
       // If we are not ok, abort!
       if (!allOk)
         return null
 
+      // Get the definition from the nav stack item.
+      const typeOrField = navStackItem.def
+
+      // If there is no type or field then this is likely the root schema view,
+      // or a search. If this is the case then just return that nav stack item!
+      if (!typeOrField) {
+        return navStackItem
+      }
       // If this is a type, let’s do some shenanigans...
-      if (isType(typeOrField)) {
+      else if (isType(typeOrField)) {
         // Let’s see if we can get a type with the same name.
         const nextType = nextSchema.getType(typeOrField.name)
 
@@ -136,7 +144,7 @@ class PostGraphiQL extends React.Component {
 
         // If there is a type with the same name, let’s return it! This is the
         // new type with all our new information.
-        return nextType
+        return { ...navStackItem, def: nextType }
       }
       // If you thought this function was already pretty bad, it’s about to get
       // worse. We want to update the information for an object field.
@@ -168,7 +176,7 @@ class PostGraphiQL extends React.Component {
         }
 
         // Otherwise we hope very much that it is correct.
-        return nextField
+        return { ...navStackItem, def: nextField }
       }
     })