feat: allow users to specify operationName in multi-operation queries (#629)

Author: klippx

package-lock.json

@@ -25,7 +25,7 @@
   "license": "MIT",
   "dependencies": {
     "@octokit/request": "^9.1.4",
-    "@octokit/types": "^13.6.2",
+    "@octokit/types": "^13.8.0",
     "universal-user-agent": "^7.0.0"
   },
   "devDependencies": {

package.json

@@ -16,6 +16,7 @@ const NON_VARIABLE_OPTIONS = [
   "request",
   "query",
   "mediaType",
+  "operationName",
 ];
 
 const FORBIDDEN_VARIABLE_OPTIONS = ["query", "method", "url"];

src/graphql.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import fetchMock from "fetch-mock";
+import fetchMock, { type CallLog } from "fetch-mock";
 import { getUserAgent } from "universal-user-agent";
 
 import { VERSION } from "../src/version";
@@ -214,4 +214,118 @@ describe("graphql.defaults()", () => {
       },
     });
   });
+
+  it("Allows user to specify non variable options", () => {
+    const mockData = {
+      repository: {
+        issues: {
+          edges: [
+            {
+              node: {
+                title: "Foo",
+              },
+            },
+            {
+              node: {
+                title: "Bar",
+              },
+            },
+            {
+              node: {
+                title: "Baz",
+              },
+            },
+          ],
+        },
+      },
+    };
+
+    const query = /* GraphQL */ `
+        query Blue($last: Int) {
+          repository(owner: "blue", name: "graphql.js") {
+            issues(last: $last) {
+              edges {
+                node {
+                  title
+                }
+              }
+            }
+          }
+        }
+
+        query Green($last: Int) {
+          repository(owner: "green", name: "graphql.js") {
+            issues(last: $last) {
+              edges {
+                node {
+                  title
+                }
+              }
+            }
+          }
+        }
+        `.trim();
+
+    const fetch = fetchMock.createInstance();
+
+    fetch.post(
+      "https://api.github.com/graphql",
+      { data: mockData },
+      {
+        method: "POST",
+        headers: {
+          accept: "application/vnd.github.v3+json",
+          authorization: "token secret123",
+          "user-agent": userAgent,
+        },
+        matcherFunction: (callLog: CallLog) => {
+          const expected = {
+            query: query,
+            operationName: "Blue",
+            variables: { last: 3 },
+          };
+          const result = callLog.options.body === JSON.stringify(expected);
+          if (!result) {
+            console.warn("Body did not match expected value", {
+              expected,
+              actual: JSON.parse(callLog.options.body as string),
+            });
+          }
+          return result;
+        },
+      },
+    );
+
+    const authenticatedGraphql = graphql.defaults({
+      headers: {
+        authorization: `token secret123`,
+      },
+      request: {
+        fetch: fetch.fetchHandler,
+      },
+    });
+
+    return new Promise<void>((res, rej) =>
+      authenticatedGraphql({
+        query,
+        headers: {
+          authorization: `token secret123`,
+        },
+        request: {
+          fetch: fetch.fetchHandler,
+        },
+        operationName: "Blue",
+        last: 3,
+      })
+        .then((result) => {
+          expect(JSON.stringify(result)).toStrictEqual(
+            JSON.stringify(mockData),
+          );
+          res();
+        })
+        .catch(() => {
+          rej("Should have resolved");
+        }),
+    );
+  });
 });

test/defaults.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import fetchMock from "fetch-mock";
+import fetchMock, { type CallLog } from "fetch-mock";
 import { getUserAgent } from "universal-user-agent";
 
 import { graphql } from "../src";
@@ -323,4 +323,164 @@ describe("graphql()", () => {
       );
     });
   });
+
+  describe("When using a query with multiple operations", () => {
+    const mockData = {
+      repository: {
+        issues: {
+          edges: [
+            {
+              node: {
+                title: "Foo",
+              },
+            },
+            {
+              node: {
+                title: "Bar",
+              },
+            },
+            {
+              node: {
+                title: "Baz",
+              },
+            },
+          ],
+        },
+      },
+    };
+
+    const mockErrors = {
+      errors: [{ message: "An operation name is required" }],
+      data: undefined,
+      status: 400,
+    };
+
+    const query = /* GraphQL */ `
+      query Blue($last: Int) {
+        repository(owner: "blue", name: "graphql.js") {
+          issues(last: $last) {
+            edges {
+              node {
+                title
+              }
+            }
+          }
+        }
+      }
+
+      query Green($last: Int) {
+        repository(owner: "green", name: "graphql.js") {
+          issues(last: $last) {
+            edges {
+              node {
+                title
+              }
+            }
+          }
+        }
+      }
+      `.trim();
+
+    it("Sends both queries to the server (which will respond with bad request)", () => {
+      const fetch = fetchMock.createInstance();
+
+      fetch.post("https://api.github.com/graphql", mockErrors, {
+        method: "POST",
+        headers: {
+          accept: "application/vnd.github.v3+json",
+          authorization: "token secret123",
+          "user-agent": userAgent,
+        },
+        matcherFunction: (callLog: CallLog) => {
+          const expected = {
+            query: query,
+            variables: { last: 3 },
+          };
+          const result = callLog.options.body === JSON.stringify(expected);
+          if (!result) {
+            console.warn("Body did not match expected value", {
+              expected,
+              actual: JSON.parse(callLog.options.body as string),
+            });
+          }
+          return result;
+        },
+      });
+
+      return new Promise<void>((res, rej) =>
+        graphql(query, {
+          headers: {
+            authorization: `token secret123`,
+          },
+          request: {
+            fetch: fetch.fetchHandler,
+          },
+          last: 3,
+        })
+          .then(() => {
+            rej("Should have thrown an error");
+          })
+          .catch((result) => {
+            expect(JSON.stringify(result.response)).toStrictEqual(
+              JSON.stringify(mockErrors),
+            );
+            res();
+          }),
+      );
+    });
+
+    it('Allows the user to specify the operation name in the "operationName" option', () => {
+      const fetch = fetchMock.createInstance();
+
+      fetch.post(
+        "https://api.github.com/graphql",
+        { data: mockData },
+        {
+          method: "POST",
+          headers: {
+            accept: "application/vnd.github.v3+json",
+            authorization: "token secret123",
+            "user-agent": userAgent,
+          },
+          matcherFunction: (callLog: CallLog) => {
+            const expected = {
+              query: query,
+              operationName: "Blue",
+              variables: { last: 3 },
+            };
+            const result = callLog.options.body === JSON.stringify(expected);
+            if (!result) {
+              console.warn("Body did not match expected value", {
+                expected,
+                actual: JSON.parse(callLog.options.body as string),
+              });
+            }
+            return result;
+          },
+        },
+      );
+
+      return new Promise<void>((res, rej) =>
+        graphql(query, {
+          headers: {
+            authorization: `token secret123`,
+          },
+          request: {
+            fetch: fetch.fetchHandler,
+          },
+          operationName: "Blue",
+          last: 3,
+        })
+          .then((result) => {
+            expect(JSON.stringify(result)).toStrictEqual(
+              JSON.stringify(mockData),
+            );
+            res();
+          })
+          .catch((error) => {
+            rej(error);
+          }),
+      );
+    });
+  });
 });