Storefront API mutations with js-buy-sdk

Storefront API mutations with js-buy-sdk

Lumiere
New Member
4 0 0

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?

Replies 2 (2)

M477h1u
Shopify Partner
2 0 0

Hey there,

 

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

M477h1u
Shopify Partner
2 0 0

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');
        });
      });
    });