Deprecate passing function as 'introspection' property

IvanGoncharov · IvanGoncharov · commit 9a86db228a3d · 2023-04-25T00:24:53.000+03:00
diff --git a/README.md b/README.md
@@ -29,7 +29,7 @@ module system it is exported as `GraphQLVoyager` global variable.
 
 `Voyager` component accepts the following properties:
 
-- `introspection` [`object` or function: `(query: string) => Promise`] - the server introspection response. If `function` is provided GraphQL Voyager will pass introspection query as a first function parameter. Function should return `Promise` which resolves to introspection response object.
+- `introspection` [`object`] - the server introspection response. If `function` is provided GraphQL Voyager will pass introspection query as a first function parameter. Function should return `Promise` which resolves to introspection response object.
 - `displayOptions` _(optional)_
   - `displayOptions.skipRelay` [`boolean`, default `true`] - skip relay-related entities
   - `displayOptions.skipDeprecated` [`boolean`, default `true`] - skip deprecated fields and entities that contain only deprecated fields.
@@ -79,14 +79,22 @@ You can get GraphQL Voyager bundle from the following places:
   <body>
     <div id="voyager">Loading...</div>
     <script>
-      function introspectionProvider(introspectionQuery) {
-        // ... do a call to server using introspectionQuery provided
-        // or just return pre-fetched introspection
-      }
+      // do a call to server using voyagerIntrospectionQuery provided
+      const query = GraphQLVoyager.voyagerIntrospectionQuery;
+      const introspection = fetch('<server url>', {
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ query }),
+        // ...
+      }).then((response) => response.json());
+      // or just return pre-fetched introspection
 
       // Render <Voyager />
       GraphQLVoyager.init(document.getElementById('voyager'), {
-        introspection: introspectionProvider,
+        introspection: introspection,
       });
     </script>
   </body>
@@ -105,18 +113,16 @@ And then use it:
 ```js
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Voyager } from 'graphql-voyager';
+import { Voyager, voyagerIntrospectionQuery } from 'graphql-voyager';
 
-function introspectionProvider(query) {
-  return fetch(window.location.origin + '/graphql', {
-    method: 'post',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ query: query }),
-  }).then((response) => response.json());
-}
+const introspection = fetch(window.location.origin + '/graphql', {
+  method: 'post',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({ query: voyagerIntrospectionQuery }),
+}).then((response) => response.json());
 
 ReactDOM.render(
-  <Voyager introspection={introspectionProvider} />,
+  <Voyager introspection={introspection} />,
   document.getElementById('voyager'),
 );
 ```
diff --git a/src/components/Voyager.tsx b/src/components/Voyager.tsx
@@ -83,14 +83,15 @@ export default class Voyager extends Component<VoyagerProps> {
     const displayOptions = normalizeDisplayOptions(this.props.displayOptions);
 
     if (typeof this.props.introspection !== 'function') {
-      console.warn(
-        'GraphQLVoyager: Passing function as "introspection" is deprecated.' +
-          'To access introspection query, please use "voyagerIntrospectionQuery".',
-      );
       this.updateIntrospection(this.props.introspection, displayOptions);
       return;
     }
 
+    console.warn(
+      'GraphQLVoyager: Passing function as "introspection" is deprecated.' +
+        'To access introspection query, please use "voyagerIntrospectionQuery".',
+    );
+
     const promise = this.props.introspection(getIntrospectionQuery());
     this.setState({
       introspectionData: null,
@@ -220,33 +221,34 @@ export default class Voyager extends Component<VoyagerProps> {
         displayOptions={displayOptions}
         selectedTypeID={selectedTypeID}
         selectedEdgeID={selectedEdgeID}
-        onSelectNode={this.handleSelectNode}
-        onSelectEdge={this.handleSelectEdge}
+        onSelectNode={handleSelectNode}
+        onSelectEdge={handleSelectEdge}
         ref={this.viewportRef}
       />
     );
-  }
 
-  handleDisplayOptionsChange = (delta) => {
-    const displayOptions = { ...this.state.displayOptions, ...delta };
-    this.updateIntrospection(this.state.introspectionData, displayOptions);
-  };
+    handleDisplayOptionsChange = (delta) => {
+      const displayOptions = { ...this.state.displayOptions, ...delta };
+      this.updateIntrospection(this.state.introspectionData, displayOptions);
+    };
 
-  handleSelectNode = (selectedTypeID) => {
-    if (selectedTypeID !== this.state.selectedTypeID) {
-      this.setState({ selectedTypeID, selectedEdgeID: null });
-    }
-  };
+    handleSelectNode = (selectedTypeID) => {
+      if (selectedTypeID !== this.state.selectedTypeID) {
+        this.setState({ selectedTypeID, selectedEdgeID: null });
+      }
+    };
+
+    handleSelectEdge = (selectedEdgeID) => {
+      if (selectedEdgeID === this.state.selectedEdgeID) {
+        // deselect if click again
+        this.setState({ selectedEdgeID: null });
+      } else {
+        const selectedTypeID = extractTypeId(selectedEdgeID);
+        this.setState({ selectedTypeID, selectedEdgeID });
+      }
+    };
+  }
 
-  handleSelectEdge = (selectedEdgeID) => {
-    if (selectedEdgeID === this.state.selectedEdgeID) {
-      // deselect if click again
-      this.setState({ selectedEdgeID: null });
-    } else {
-      const selectedTypeID = extractTypeId(selectedEdgeID);
-      this.setState({ selectedTypeID, selectedEdgeID });
-    }
-  };
 
   static PanelHeader = (props) => {
     return props.children || null;
diff --git a/src/middleware/render-voyager-page.ts b/src/middleware/render-voyager-page.ts
@@ -41,28 +41,19 @@ export default function renderVoyagerPage(options: MiddlewareOptions) {
   </main>
   <script>
     window.addEventListener('load', function(event) {
-      function introspectionProvider(introspectionQuery) {
-        return fetch('${endpointUrl}', {
-          method: 'post',
-          headers: Object.assign({}, {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json',
-          }, ${headersJS}),
-          body: JSON.stringify({query: introspectionQuery }),
-          credentials: 'include',
-        }).then(function (response) {
-          return response.text();
-        }).then(function (responseBody) {
-          try {
-            return JSON.parse(responseBody);
-          } catch (error) {
-            return responseBody;
-          }
-        });
-      }
+      const query = GraphQLVoyager.voyagerIntrospectionQuery;
+      const introspection = fetch('${endpointUrl}', {
+        method: 'post',
+        headers: Object.assign({}, {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+        }, ${headersJS}),
+        body: JSON.stringify({query}),
+        credentials: 'include',
+      }).then(response => response.json());
 
       GraphQLVoyager.init(document.getElementById('voyager'), {
-        introspection: introspectionProvider,
+        introspection,
         displayOptions: ${JSON.stringify(displayOptions)},
       })
     })
