A Beginner's Guide to Fetching Products Using the Shopify API

Are you starting your journey in Shopify app development and wondering how to interact with the Shopify API? Fetching products is one of the simplest and most common tasks to get started. This guide walks you through the entire process step-by-step, using a practical method that has been tested successfully.

Prerequisites

Before we dive into the code, ensure you have:

A Shopify Partner Account to create and manage apps.
A Custom App created in the Shopify Partner Dashboard.
The following credentials from your Shopify app:
- API Key
- API Secret Key
- Access Token (obtained after completing the OAuth process).
Basic knowledge of Node.js and JavaScript.

Step 1: Install the Shopify API Library

Shopify provides an official Node.js library to simplify API interactions. Install it using:

npm install @shopify/shopify-api

Step 2: Set Up Environment Variables

For security and flexibility, store sensitive information like API keys in a .env file. Install the dotenv package to manage environment variables:

npm install dotenv

Create a .env file in the root of your project and add:

SHOPIFY_API_KEY=your-api-key
SHOPIFY_API_SECRET=your-api-secret
SHOPIFY_ACCESS_TOKEN=your-access-token
SHOPIFY_DOMAIN=your-shop.myshopify.com

Add .env to your .gitignore file to prevent it from being committed to version control.

Step 3: Initialize the Shopify API Client

Create a file (e.g., shopifyClient.js) to set up the Shopify API client:

import { shopifyApi, LATEST_API_VERSION } from '@shopify/shopify-api';
import dotenv from 'dotenv';

dotenv.config();

const shopify = shopifyApi({
  apiKey: process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET,
  scopes: ['read_products'],
  hostName: process.env.SHOPIFY_DOMAIN,
  apiVersion: LATEST_API_VERSION,
});

export default shopify;

Step 4: Fetch Products Using the REST API

Create a new route or file (e.g., app/routes/api.products.jsx) to fetch products:

import { json } from '@remix-run/node';
import { shopifyApi, LATEST_API_VERSION } from '@shopify/shopify-api';
import dotenv from 'dotenv';

dotenv.config();

const shopify = shopifyApi({
  apiKey: process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET,
  scopes: ['read_products'],
  hostName: process.env.SHOPIFY_DOMAIN,
  apiVersion: LATEST_API_VERSION,
});

export async function loader() {
  const domain = process.env.SHOPIFY_DOMAIN;
  const accessToken = process.env.SHOPIFY_ACCESS_TOKEN;

  try {
    // Ensure both domain and accessToken are defined
    if (!domain || !accessToken) {
      throw new Error('Missing domain or access token');
    }

    // Manually create a session object with the required properties
    const session = {
      shop: domain,
      accessToken: accessToken,
      isOnline: false, // Use false for offline tokens
    };

    // Initialize the RestClient using the manually created session
    const client = new shopify.clients.Rest({ session });

    // Fetch products
    const response = await client.get({
      path: 'products',
      query: { limit: 10 }, // Adjust the query parameters as needed
    });

    // Return the products as JSON
    return json(response.body.products, { status: 200 });
  } catch (error) {
    console.error('Error fetching products:', error.message);
    return json({ error: 'Failed to fetch products', details: error.message }, { status: 500 });
  }
}

Step 5: Test Your API

Start Your Development Server:
```
 npm run dev
```
Access the Endpoint:
- If using Remix, navigate to http://localhost:3000/api/products in your browser or Postman.
- Ensure the products are fetched successfully.

Expected Response:

 [
   {
     "id": 123456789,
     "title": "Sample Product",
     "status": "active"
   },
   {
     "id": 987654321,
     "title": "Another Product",
     "status": "draft"
   }
 ]

Tips for Success

Access Token Validity: Ensure the access token is valid and has the required read_products scope.
Error Handling: Always include error handling to debug issues effectively.
Environment Variables: Keep sensitive data out of your code by using .env files.
API Documentation: Refer to the official Shopify API Documentation for more details.

Conclusion

Fetching products using the Shopify API is a great starting point for building custom Shopify apps. By following this guide, you can quickly set up your API client, make authenticated requests, and fetch product data with ease.

Feel free to share your experiences or ask questions in the comments below. Happy coding! 🚀