Storefront API mutations with js-buy-sdk

[Lumiere]

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?

[M477h1u]

Hey there,

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

[M477h1u]

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

        });

      });

    });