Solved

Unable to compose a GraphQL mutation using fetch

gobill
Visitor
2 1 1

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 
      }
    }),

 

Accepted Solution (1)
gobill
Visitor
2 1 1

This is an 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.

View solution in original post

Replies 2 (2)

Ryan
Shopify Staff
499 42 120

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

 

Ryan | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

gobill
Visitor
2 1 1

This is an 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.