Handle data objects with variables in GraphQL Client

src/clients/graphql/graphql_client.ts

@@ -16,6 +16,14 @@ export class GraphqlClient {
     params.extraHeaders = {[ShopifyHeader.AccessToken]: this.token, ...params.extraHeaders};
     const path = `/admin/api/${Context.API_VERSION}/graphql.json`;
 
-    return this.client.post({path, type: DataType.GraphQL, ...params});
+    let dataType: DataType.GraphQL | DataType.JSON;
+
+    if (typeof params.data === 'object') {
+      dataType = DataType.JSON;
+    } else {
+      dataType = DataType.GraphQL;
+    }
+
+    return this.client.post({path, type: dataType, ...params});
   }
 }

src/clients/graphql/test/graphql_client.test.ts

@@ -37,11 +37,61 @@ describe('GraphQL client', () => {
 
     fetchMock.mockResponseOnce(JSON.stringify(successResponse));
 
-    await expect(client.query({extraHeaders: customHeader, data: QUERY})).resolves.toEqual(buildExpectedResponse(successResponse));
+    await expect(client.query({extraHeaders: customHeader, data: QUERY})).resolves.toEqual(
+      buildExpectedResponse(successResponse),
+    );
 
     customHeader[ShopifyHeader.AccessToken] = 'bork';
     assertHttpRequest('POST', DOMAIN, '/admin/api/unstable/graphql.json', customHeader, QUERY);
   });
+
+  it('can handle queries with variables', async () => {
+    const client: GraphqlClient = new GraphqlClient(DOMAIN, 'bork');
+    const queryWithVariables = {
+      query: `query FirstTwo($first: Int) {
+        products(first: $first) {
+          edges {
+            node {
+              id
+          }
+        }
+      }
+    }`,
+      variables: `{
+        'first': 2,
+      }`,
+    };
+    const expectedResponse = {
+      data: {
+        products: {
+          edges: [
+            {
+              node: {
+                id: 'foo',
+              },
+            },
+            {
+              node: {
+                id: 'bar',
+              },
+            },
+          ],
+        },
+      },
+    };
+
+    fetchMock.mockResponseOnce(JSON.stringify(expectedResponse));
+
+    await expect(client.query({data: queryWithVariables})).resolves.toEqual(buildExpectedResponse(expectedResponse));
+
+    assertHttpRequest(
+      'POST',
+      DOMAIN,
+      '/admin/api/unstable/graphql.json',
+      {'Content-Length': 219, 'Content-Type': 'application/json', 'X-Shopify-Access-Token': 'bork'},
+      JSON.stringify(queryWithVariables),
+    );
+  });
 });
 
 function buildExpectedResponse(obj: unknown) {

src/clients/http_client/test/test_helper.ts

@@ -16,15 +16,13 @@ export function assertHttpRequest(
   const maxCall = currentCall + tries;
   for (let i = currentCall; i < maxCall; i++) {
     currentCall++;
-    expect(fetchMock.mock.calls[i]).toEqual(
-      [
-        `https://${domain}${path}`,
-        expect.objectContaining({
-          method,
-          headers: expect.objectContaining(headers),
-          body: data,
-        }),
-      ],
-    );
+    expect(fetchMock.mock.calls[i]).toEqual([
+      `https://${domain}${path}`,
+      expect.objectContaining({
+        method,
+        headers: expect.objectContaining(headers),
+        body: data,
+      }),
+    ]);
   }
 }