Storefront API - custom cart

Retired Boards Appdev Custom Storefronts

Topic summary

Main issue: implementing a custom cart in a Gatsby e‑shop using the Storefront API without Netlify Functions or a Node backend. The author asks whether API calls can be made directly from React components, or if a serverless/backend layer is required.

Progress: a util file (create-cart.ts) successfully creates a cart by calling the Storefront API directly, and invoking that function from a component works.

Blocker: loading an existing cart requires passing query parameters. The author can only figure out how to pass them via a fetch, and attempting a similar direct-call approach leads to an error (details shown only in screenshots). Several code and error images are central to understanding the issue.

Context: Netlify Functions are serverless functions used in the referenced video for routing and API requests; Gatsby is used for the frontend.

Status: no resolution yet, no confirmed approach for passing query parameters without fetch. The thread seeks guidance on whether a serverless layer is necessary and how to correctly pass query parameters when loading the cart from components.

Summarized with AI on February 23. AI used: gpt-5.
1

Hello,

I am very new to all this so apologies beforehand if my question is silly.

I am following this guide https://www.youtube.com/watch?v=FJOJmKFngLI&t=1458s trying to build a Gatsby test e-shop one step at a time.

The issue I am having is, on the video, they’re using netlify functions to make the queries and then they’re fetching from those files from the components.

I can’t do that as I am not using netlify functions or even node back end. Do I have to use something like for that or is there way to do it from the components.

This is part of my code, where I have a util’s file create-cart.ts which fetches the api.

create-cart.jpg
create-cart.jpg535×822 49.3 KB

Now, in the video they’re fetching from that file using the netlify functions for routing (please do correct me if I’m wrong), but I managed to get the desired result of the video’s part by just calling the function as shown in the image below:

Cart.jpg
Cart.jpg565×804 50.1 KB

Now my problem is this file, where I need to the cart, gets some query parameters, which I can’t find any other way to pass other than an actual fetch?

load-cart.jpg
load-cart.jpg463×885 38.3 KB

When I try to do something similar with before like so:

cart 2.jpg
cart 2.jpg514×635 41.3 KB

I then get this error :

error.jpg
error.jpg1325×262 59.5 KB

Again I really apologise for the very long post but I’m not sure where else to ask.

Any help would be really appreciated!

Thanks,

Nikos