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,53 @@ 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));
+  });
 });
 
 function buildExpectedResponse(obj: unknown) {