Fetching Shopify Product Data with GraphQL in Remix

In this tutorial, we’ll explore how to retrieve Shopify product data using GraphQL in a Remix project.

Shopify provides a powerful GraphQL API that allows developers to fetch specific data efficiently. 

Let’s get started,

Steps to Fetch Shopify Product Data with GraphQL in Remix:

Step 1: Create Shopify Remix Project

Set up a remix project. If you haven’t already, you can use the Remix CLI to create a new project. Run the following command in your terminal:   

npm init @shopify/app@latest

Check out more about creating Shopify Remix App

Step 2:  Start a Local Development Server

After your app is created, you can work using a local development server.

Navigate to your newly created app directory.

cd my-new-app

Run the following command to start a local server for your app:

npm run dev

Step: 3  Writing the GraphQL Query

Create a new page in the app/routes directory, e.g., app.productData.jsx, and fetch the data using a GraphQL query:

// 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: The GraphQL query is responsible for fetching 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 based on your project requirements.

Conclusion:

By following these steps, you’ve successfully set up a Remix project to fetch Shopify product data using GraphQL. This example is a starting point, and you can extend it to build a complete eCommerce application. Experiment with different GraphQL queries to fetch the data your application requires.