The Shopify storefront API's create cart mutation generates an HTML response when called

I recently started developing an e-commerce website using Next.js and Shopify's storefront API. I have successfully set up the connection and can list all the products from the API.

However, I encountered an issue when attempting to add a product for the first time by calling a specific function. The error arises during the creation of a new cart:

export async function addToCart(itemId: string, quantity: string) {
  const createCartMutation = gql`
    mutation createCart($cartInput: CartInput) {
      cartCreate(input: $cartInput) {
        cart {
          id
        }
      }
    }
  `;

  const variables = {
    cartInput: {
      lines: [
        {
          quantity: parseInt(quantity),
          merchandiseId: itemId,
        },
      ],
    },
  };
  try {
    const d = await graphQLClient.request(createCartMutation, variables);
    return d;
  } catch (error: any) {
    debugger;
    throw new Error(error);
  }
}

The error message is:

It's worth noting that the two available products do not have variants, so the itemId corresponds to the actual product ID rather than a variant ID.

I'm struggling to troubleshoot this issue and would greatly appreciate any assistance or insights. Thank you!

UPDATE: Performing the same mutation in the GraphQL explorer provided by Shopify yields successful results.

Answer №1

After experimenting with the configuration, I found that the variables were not necessary for pulling products from Shopify. Surprisingly, it worked without them, but perhaps mutations require a different setup. I will have to investigate further to confirm this.

const newConfig = {
  reactStrictMode: true,
  env: {
    NEXT_SHOPIFY_STORE_DOMAIN: process.env.NEXT_SHOPIFY_STORE_DOMAIN,
    NEXT_SHOPIFY_STOREFRONT_ACCESSTOKEN:
      process.env.NEXT_SHOPIFY_STOREFRONT_ACCESSTOKEN,
  },
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating ngModel value dynamically from controller

I have been trying to update the value of an ngModel variable from my controller, but it doesn't seem to be reflecting in the views. Despite looking at other solutions on SO, nothing has worked for me so far. I am looking for a solution that doesn&apo ...

A Comprehensive Guide: Obtaining the Final Tab from a JSON using API

What is the method to extract the last tab from a given JSON code? { "claimed_levels": { "level_1", "level_2" } } I want to display the level when someone types "!levels". The desired output format should be: Your current level is "2" ...

The functionality of the button is affected when it is placed on the same line as a h1 heading

My goal is to have the page title and profile button aligned on the same line in the header of each page. However, I've encountered an issue where the button doesn't function properly when placed on the same line but works fine when separated ont ...

How to add vertical bars within ng-repeat in AngularJS

I attempted to retrieve values from an array variable using ng-repeat within unordered lists. Although the values are displaying correctly and everything is functioning properly, I added vertical bars after each value to represent sub-categories on my page ...

Displaying and hiding the Angular <object> element

I am faced with a challenge involving managing files of various formats and creating a gallery with preview functionality. Everything works smoothly when clicking through items of the same format, like JPEGs. However, an issue arises when switching from vi ...

Separate the iframe sessions

I am working with 6 iframes from the same domain but with different URLs and subdirectories. Each iframe sets a cookie with the same name but a different value using the HTML header "set-cookie". To prevent interference between these cookies, I need to fin ...

Customize the appearance of disabled dates in the eonasdan-datetimepicker styling

I am seeking to customize the default styles for the "eonasdan-datetimepicker" (https://github.com/Eonasdan/bootstrap-datetimepicker) by implementing a basic hover message feature. The CSS attributes currently applied to disabled dates are as follows: .bo ...

The TypeScript inference feature is not functioning correctly

Consider the following definitions- I am confused why TypeScript fails to infer the types correctly. If you have a solution, please share! Important Notes: * Ensure that the "Strict Null Check" option is enabled. * The code includes c ...

Utilizing query parameters in Next.js

I've been working on a unique Next.js application that incorporates both infinite scroll and a search input feature. The infinite scroll functionality loads 6 additional items whenever the user reaches the bottom of the page. On the other hand, the s ...

What could be causing my React components to not display my CSS styling properly?

If you're developing a React application and integrating CSS for components, ensure that you have included the style-loader and css-loader in your webpack configuration as shown below: module.exports = { mode: 'development', entry: &apo ...

Performing an Ajax request using MooTools when my button is clicked

After clicking a button, I want to initiate an ajax call. There are more than 14 buttons on my site that make ajax requests to fetch elements from various parts of the site. Button, Button1, Button2, Button3 | | | load content | | ...

The property of userNm is undefined and cannot be set

When attempting to retrieve a value from the database and store it in a variable, an error is encountered: core.js:6014 ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'userNm' of undefined TypeError: Cannot set property &apos ...

Issues with Tailwind styles arising when deploying and using Windows Subsystem for Linux (

While developing with Next.js + Tailwind + DaisyUI on a Mac, everything looks great and works as expected. However, when I switch to WSL, the styles appear broken and different from what I intended. The same issue occurs when I deploy my site on Vercel. Do ...

Is React the best solution for managing a lengthy list that requires constant data updates?

In order to display a long list with over 2000 entries that changes dynamically, I am utilizing react redux. Each second, at least one new row is added to the list data. My current approach involves mapping through the list data in the render method like t ...

When implementing Critical CSS, the Jquery function fails to execute upon loading

Currently, I am working on optimizing my website at . In an attempt to improve its performance, I decided to implement critical CSS using penthouse. The Critical CSS code can be found here, generously provided by the main developer of penthouse. However, ...

What steps are involved in creating a default toolbar for a material picker in a React application?

Looking for assistance with customizing the toolbar for material picker (v3) by adding a title inside the dialog. I successfully implemented this in the KeyboardDatePicker following a helpful thread (https://github.com/mui-org/material-ui-pickers/issues/11 ...

Using observables rather than promises with async/await

I have a function that returns a promise and utilizes the async/await feature within a loop. async getFilteredGuaranteesByPermissions(): Promise<GuaranteesMetaData[]> { const result = []; for (const guarantees of this.guaranteesMetaData) { ...

What is the functionality of an Angular service that retrieves an

It appears that Angularjs services are constructed by passing in a Contructor function: app.service('serviceName', function(){ this.var1 = 'foo'; this.method1 = function(){ } }); Angular executes this function using the new ...

a gentle breeze gathers a multitude of entities rather than items

When utilizing a restful server with node.js and sending a collection of entities wrapped in one entity object (Lookups), everything seems to be functioning properly. However, the issue arises when breeze views the entities in the collection as plain objec ...

What is the correct way to position a material-ui icon within a button for proper alignment?

Is there a way to properly align the <ChevronRightIcon> within the <PrimaryButton>? I want it to appear after the button label on the right side. https://i.stack.imgur.com/dcEWo.png <PrimaryButton style={{ paddingRight: &apo ...