fix(toolkit): operationName is optional (#2373)

graphql · May 5, 2022 · 5b2c1b2 · 5b2c1b2
1 parent e823697
commit 5b2c1b2
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 13 deletions.
diff --git a/.changeset/twelve-dogs-report.md b/.changeset/twelve-dogs-report.md
@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/toolkit': patch
+---
+
+Fix TypeScript definition of FetcherParams to reflect that operationName is optional
diff --git a/packages/graphiql-2-rfc-context/src/types/index.ts b/packages/graphiql-2-rfc-context/src/types/index.ts
@@ -57,7 +57,7 @@ export type SchemaConfig = {
 
 export type FetcherParams = {
   query: string;
-  operationName?: string;
+  operationName?: string | null;
   variables?: string;
 };
 

diff --git a/packages/graphiql-toolkit/src/create-fetcher/createFetcher.ts b/packages/graphiql-toolkit/src/create-fetcher/createFetcher.ts
@@ -49,7 +49,7 @@ export function createGraphiQLFetcher(options: CreateFetcherOptions): Fetcher {
     }
     const isSubscription = isSubscriptionWithName(
       fetcherOpts?.documentAST!,
-      graphQLParams.operationName,
+      graphQLParams.operationName || undefined,
     );
     if (isSubscription) {
       if (!wsFetcher) {

diff --git a/packages/graphiql-toolkit/src/create-fetcher/lib.ts b/packages/graphiql-toolkit/src/create-fetcher/lib.ts
@@ -28,7 +28,7 @@ import type {
  */
 export const isSubscriptionWithName = (
   document: DocumentNode,
-  name: string,
+  name: string | undefined,
 ): boolean => {
   let isSubscription = false;
   visit(document, {

diff --git a/packages/graphiql-toolkit/src/create-fetcher/types.ts b/packages/graphiql-toolkit/src/create-fetcher/types.ts
@@ -26,7 +26,7 @@ export type Unsubscribable = {
 
 export type FetcherParams = {
   query: string;
-  operationName: string;
+  operationName?: string | null;
   variables?: any;
 };
 

diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
@@ -1338,9 +1338,9 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
 
   private async _fetchQuery(
     query: string,
-    variables: string,
-    headers: string,
-    operationName: string,
+    variables: string | undefined,
+    headers: string | undefined,
+    operationName: string | undefined,
     shouldPersistHeaders: boolean,
     cb: (value: FetcherResult) => any,
   ): Promise<null | Unsubscribable> {
@@ -1493,7 +1493,7 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
     // Use the edited query after autoCompleteLeafs() runs or,
     // in case autoCompletion fails (the function returns undefined),
     // the current query from the editor.
-    const editedQuery = this.autoCompleteLeafs() || this.state.query;
+    const editedQuery = this.autoCompleteLeafs() || this.state.query || '';
     const variables = this.state.variables;
     const headers = this.state.headers;
     const shouldPersistHeaders = this.state.shouldPersistHeaders;
@@ -1537,11 +1537,11 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
 
       // _fetchQuery may return a subscription.
       const subscription = await this._fetchQuery(
-        editedQuery as string,
-        variables as string,
-        headers as string,
-        operationName as string,
-        shouldPersistHeaders as boolean,
+        editedQuery,
+        variables,
+        headers,
+        operationName,
+        shouldPersistHeaders,
         (result: FetcherResult) => {
           if (queryID === this._editorQueryID) {
             let maybeMultipart = Array.isArray(result) ? result : false;