Integrating Shopify storefront API into existing React project

Shopify Discussion
,
1

Hello everyone,

I have been working on a project for a client for several months now and one of the things my client wants is a small e-commerce to be added to the website so she can sell some of her products online. I decided to use shopify as my backend/API but I have very little experience with backend code so I don’t know where to start. I have also tried finding documentation how to get started but most of them seem to be really outdated.

I have however decided to use storefront API with graphQL as i heard it is much more efficient with fetching data compared to Shopify buy SDK (correct me if i am wrong).

Is it possible to get any advice from someone on how to get started? It would be much appreciated if I could get some advice on how to get started. Thank you

NOTE: I am currently using Vite with react and javascript

2

What you’re trying to build is a headless solution. Here is how I would proceed:

  1. Assuming you have looked at these, but if not, please do review: https://shopify.dev/docs/storefronts/headless

and https://help.shopify.com/en/manual/apps/app-types/custom-apps
2. Do the shopify hydrogen or shopify cli setup depending on your objectives or how you want to manage the deployment. The setup will vary, but it may look at something like this for shopify cli based custom app setup (using pnpm here but you can use npm or yarn as you like):

project_root (pnpm workspace) [though not mandatory, but I would prefer to initialize shopify cli here]
|- package.json
|- shopify.app.toml
|- backend (any tooling you like)
|- frontend (any tooling you like)
  1. When you run shopify cli (pnpm shopify app dev) you will get a URL for graphiql frontend. Open it and write queries to familiarize yourself with the Shopify Storefront API. May be start with writing queries to get shop or products resources.
  2. Decide how you want to develop graphql queries and consuming APIs - dynamic or typed. For typed you can use codegen to generate the API for your queries.
  3. You will be building the frontend entirely independently, so you will potentially need a pretty decent API coverage to get/search products, variants, discounts, customers, cart, etc. working on your custom frontend end-to-end.
  4. You will have to route to the Shopify checkout page (I am not sure if iframe would work due to cross site restrictions and PCI DSS regulations on payment pages). This can be more flexible on Shopify Plus though. And finally, you may need to create pages for order tracking, returns, etc. (or use an app).

For completeness, do not make direct graphql queries from your app frontend as you would need to share the token which would be insecure (and it would make your bundle huge). Hope this helps!