Unable to compose a GraphQL mutation using fetch

[gobill]

When I use the `appSubscriptionCreate` mutation, I get an error as follows

{ errors: { query: 'Required parameter missing or invalid' } } 
TypeError: Cannot read property 'appSubscriptionCreate' of undefined

Here's my code. What am I missing?

import { Context } from 'koa';

const getSubscriptionUrl = async(ctx: Context, accessToken: string, shop: string) => {
  const returnUrl = 'https://asdf.io';
  const name = 'Some Plan';
  const test = true;
  const apiVersion = '2019-07';
  const lineItems = [{
    plan: {
      appUsagePricingDetails: {
        cappedAmount: { amount: 10, currencyCode: 'USD' },
        terms: '$1 for 1000 emails'
      }
    }
  }, {
    plan: {
      appRecurringPricingDetails: {
        price: { amount: 10, currencyCode: 'USD' }
      }
    }
  }];

  const mutation = `mutation appSubscriptionCreate($name: String!, $lineItems: [AppSubscriptionLineItemInput!]!, $returnUrl: URL!, $test: Boolean!) {
    appSubscriptionCreate(name: $name, lineItems: $lineItems, returnUrl: $returnUrl, test: $test) {
      appSubscription {
        id
      }
      confirmationUrl
      userErrors {
        field
        message
      }
    }
  }`;

  const response = await fetch(`https://${shop}/admin/api/${apiVersion}/graphql.json`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      "X-Shopify-Access-Token": accessToken,
    },
    body: JSON.stringify({
      mutation,
      variables: {
        name,
        returnUrl,
        test,
        lineItems 
      }
    }),
  });

  const responseJson = await response.json();
  const confirmationUrl = responseJson.data.appSubscriptionCreate.confirmationUrl
  return ctx.redirect(confirmationUrl);
}

export default getSubscriptionUrl;

I have a suspicion that the issue might be because of the way the body is constructed, but I can't figure it out.

I also tried to construct the body as follows, but that didn't work either.

    body: JSON.stringify({
      query: mutation,
      variables: {
        name,
        returnUrl,
        test,
        lineItems 
      }
    }),

[Ryan]

Hi @gobill,

I think your request is just formatted incorrectly, there are a few issues:

• You are including your variables twice in the mutation, when they only need to be there once
• Strings in GraphQL use a double and not a single quote
• For currencyCode you do not need a single quote around the value

An extrapolated working request with your values would look something like:

mutation {
    appSubscriptionCreate(
      name: "Some Plan",
      lineItems: [{
    plan: {
      appUsagePricingDetails: {
        cappedAmount: { amount: 10, currencyCode: USD },
        terms: "$1 for 1000 emails"
      }
    }
      }],
      returnUrl: "https://asdf.io",
      test: true) 
  {
      appSubscription {
        id
      }
      confirmationUrl
      userErrors {
        field
        message
      }
    }
}

Generally I find it is easier to formulate and test queries and mutations in an HTTP client and then port them over.  You can also check out our guide on the new GraphQL Billing API here which includes many examples.

Regards,

Ryan

[gobill · Accepted solution]

@Ryan 

I was able to get my solution to work by constructing the body as follows 

    body: JSON.stringify({
      query,
      variables: {
        name, 
        returnUrl,
        test,
        lineItems,
      }
    })

The issue is that the body requires a `query` key. Originally I had used `mutation` instead. This solution is preferred because it makes it easy to work with data without the need for string interpolation.