Fetching Shopify Product Data with GraphQL in Remix

Let’s learn how to fetch Shopify product data using GraphQL in a Remix project.

Shopify gives the developer an incredibly powerful GraphQL API that lets them fetch particular data efficiently.

Let’s begin,

Steps to Fetch Shopify Product Data with GraphQL in Remix:

Step 1: Create a Shopify Remix Project

Set up a remix project. You can use the Remix CLI to create a new project, if you haven’t done so already. From your terminal, run:

npm init @shopify/app@latest

Learn more about creating Shopify Remix App

Step 2:  Start a Local Development Server

Now that your app has been created, you can begin working using a local development server.

Navigate to your newly created app directory.

cd my-new-app

Start the app’s local server with this command:

npm run dev

Step: 3  Writing the GraphQL Query

In the app/routes directory, create a new page named app.productData.jsx and get the data from the server side using the GraphQL query like this below:

// app/routes/app.productData.jsx

import { json } from "@remix-run/node";
import { useLoaderData } from '@remix-run/react';
import shopify from "app/shopify.server";

export async function loader({ request }) {
  const { admin } = await shopify.authenticate.admin(request);
  const response = await admin.graphql(`
    {
      products(first: 10) {
        nodes {
          id
          title
          description
        }
      }
    }
  `);

  const parsedResponse = await response.json();

  return json({
    products: parsedResponse.data.products.nodes,
   });
 }

 export default function Productpage() {
  const { products } = useLoaderData();

  return (
    <div>
      <h1>Shopify Products</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <h2>{product.title}</h2>
            <p>{product.description}</p>
            {/* Add additional product details as needed */}
          </li>
        ))}
      </ul>
    </div>
  );
}

Explanation:

• GraphQL Query: This is the query that fetches the product data from Shopify. Adjust the query as needed for your application.
• Loader Function: The loader function uses Shopify’s admin API to authenticate and fetch product data. The result is parsed and returned as JSON.

This basic structure can be expanded upon to include additional product details, styling, and other features as per your project requirements.

Conclusion:

By following these steps, you are able to create a Remix project that fetches product data from Shopify using GraphQL. The above example is just a starting point, and from this, you can extend it into a full-fledged eCommerce app.