Deprecate passing function as 'introspection' property (#291)

IvanGoncharov · web-flow · commit 0027ae91052a · 2023-04-25T13:04:19.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,
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)},
       })
     })
