Storefront API mutations with js-buy-sdk

Retired Boards Appdev Custom Storefronts
1

I’m trying to run custom GraphQL mutation on the storefront and update the checkout email

I’m using js-buy-sdk and according to the documentation it should be possible to run any custom GraphQL query or mutation. Using an updateEmail method source I recreated it in my codebase:

const emailMutation = `mutation checkoutEmailUpdateV2($checkoutId: ID!, $email: String!) {
  checkoutEmailUpdateV2(checkoutId: $checkoutId, email: $email) {
    userErrors {
      ...UserErrorFragment
    }
    checkoutUserErrors {
      ...CheckoutUserErrorFragment
    }
    checkout {
      ...CheckoutFragment
    }
  }
}`

const vars = {
  checkoutId: cartInstance.id,
  note: 'test@test.com'
 }

this.client.graphQLClient.send(emailMutation, vars).then(({model, data}) => {
  console.log(model);
});

When I run it I get this error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘length’)
at Client.send

Do I need to parse the emailMutation as GraphQL somehow? Any ideas?

2

Hey there,

I am very interested in this approach, did you end up to make it work ? :3

3

Well, for the ones that wonder, I have found two solution to this problem, with the use of shopify-buy sdk:

  • there is a updateEmail function that do the trick:
  • Replaces the value of checkout’s email address
  • @example
  • const checkoutId = ‘Z2lkOi8vc2hvcGlmeS9DaGVja291dC9kMTZmM2EzMDM4Yjc4N=’;
  • const email = ‘user@example.com’;
  • client.checkout.updateEmail(checkoutId, email).then((checkout) => {
  • // Do something with the updated checkout
  • });
  • The use of a mutation based on GraphQL’s mutation customerCreate:

const input = {
“acceptsMarketing”: true,
email: newClient,
password: ‘nopnop’
}

const mutationCustomerCreate = await shopifyClient(this.currentLocale).graphQLClient.mutation(‘customerCreate’, (root) => {
root.add(‘customerCreate’, {args: {input: input}}, (custCreate) => {
custCreate.add(‘customer’, (cust) => {
cust.add(‘id’);
});
custCreate.add(‘userErrors’, (custError) => {
custError.add(‘field’);
custError.add(‘message’);
});
});
});