Connecting Node.js Backend to Polaris Frontend

Why Have a Backend at All?

Following your "first principles" approach, it's natural to ask: "Why can't my React app just call the Shopify Admin API directly?"

You could, but it's not a recommended or secure practice for a public app. The primary reasons for using your own backend as a middleman are:

1. Security: Your app's API secret key should never be exposed on the client-side. The backend acts as a secure proxy, holding the credentials and making authenticated requests to Shopify on your app's behalf.
2. Complex Logic: The backend is the perfect place to run complex business logic, process data from multiple sources, or perform intensive computations without slowing down the user's browser.
3. Data Persistence: If your app needs its own database to store custom data (which we'll cover later), the backend is where that database connection lives and where you'll define the logic to read from and write to it.

The goal is to create a UI that is seamlessly integrated into the Shopify Admin, populated with rich data managed by your secure backend.

The Full-Stack Data Flow

The typical data flow for an embedded Shopify app looks like this:

1. A React component in your front-end needs data to render.
2. It makes a fetch request to an API endpoint on your Node.js backend (e.g., /api/products). This request is automatically authenticated by Shopify's libraries.
3. Your backend endpoint receives the request, verifies the session, and uses the Shopify API library to fetch the necessary data from the store (e.g., a list of products).
4. The backend can process or combine this data before sending it back to the front-end as a JSON response.
5. The React component receives the JSON, updates its state, and re-renders the Polaris components with the new data.

Let's break this down step-by-step.

Step 1: Create a Backend API Endpoint

First, you need to expose an API route in your backend server that your front-end can call. In the Shopify app template, this is typically done in the web/index.js file (for the Node.js template).

You'll create a standard Express.js route. The magic happens inside the route handler, where you can access an authenticated Shopify API client from the request context.

Here is a typical implementation using the Shopify CLI template structure. Notice how res.locals.shopify.session is used to provide the necessary credentials for the API call.

// In web/index.js or a dedicated routes file

// ... other imports
import { productCreator } from "./product-creator.js"; // Example of product creation logic

// ... other middleware

// A new GET endpoint to fetch all products
app.get("/api/products", async (req, res) => {
  try {
    const data = await shopify.api.rest.Product.all({
      session: res.locals.shopify.session,
    });
    res.status(200).send(data);
  } catch (error) {
    console.error("Failed to fetch products:", error);
    res.status(500).send("Error fetching products");
  }
});

// ... the rest of your server setup

Step 2: Fetch Data from the Front-end

With the backend endpoint ready, the front-end needs to call it. To handle authentication seamlessly, the Shopify app template provides a custom React hook: useAuthenticatedFetch.

This hook is a wrapper around the browser's standard fetch API. It automatically attaches the necessary session token to the request, ensuring your backend recognizes it as a legitimate, authenticated call from the Shopify Admin.

In a React component, you would typically use this hook inside a useEffect to fetch data when the component mounts.

// In a frontend component, e.g., web/frontend/pages/ProductList.jsx
import { useState, useEffect } from "react";
import { useAuthenticatedFetch } from "@shopify/app-bridge-react";
import { Page, Layout, Card, SkeletonBodyText } from "@shopify/polaris";

export default function ProductListPage() {
  const [products, setProducts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const fetch = useAuthenticatedFetch(); // Get the authenticated fetch function

  useEffect(() => {
    const fetchProducts = async () => {
      setIsLoading(true);
      const response = await fetch("/api/products"); // Call our backend endpoint
      const { data } = await response.json();
      setProducts(data);
      setIsLoading(false);
    };

    fetchProducts();
  }, [fetch]); // Dependency array includes fetch

  if (isLoading) {
    return (
      <Page>
        <Layout>
          <Layout.Section>
            <Card sectioned>
              <SkeletonBodyText lines={5} />
            </Card>
          </Layout.Section>
        </Layout>
      </Page>
    );
  }

  // We'll render the product list in the next step
  return (
    <Page title="Product List">
      <Layout>
        <Layout.Section>
          {products.map((product) => (
            <Card key={product.id} sectioned>
              {product.title}
            </Card>
          ))}
        </Layout.Section>
      </Layout>
    </Page>
  );
}

An Alternative Pattern: Remix Loaders

The current Shopify CLI generates apps using the Remix framework. Remix introduces a powerful pattern that simplifies data fetching. Instead of using useEffect, you define a loader function that runs on the server before your page component renders.

The loader function fetches the data and returns it. Then, in your component, you simply call the useLoaderData hook to access it. This pattern is cleaner for initial data loading and is the idiomatic way to do it in a modern Shopify app.

For a text-based reference that shows a similar pattern using React Router (another popular framework), the Shopify developer documentation has a great tutorial.

Step 3: Render the Data with Polaris

Once your data is available in your component's state (or from useLoaderData), the final step is to render it using Polaris components. For lists of data, the ResourceList component is purpose-built and provides a professional look that matches the Shopify Admin.

This final step brings everything together, displaying the data fetched from your backend in a user-friendly and familiar interface.

Conclusion

In this lesson, we connected the two halves of your application, establishing the crucial data flow from your Node.js backend to your Polaris front-end. You are now equipped to build fully-featured embedded app pages that can display any data from a merchant's store.

Key Takeaways:

• A Shopify app's backend is essential for security and for running complex logic.
• The data flow is Frontend -> Backend API -> Shopify API -> Backend -> Frontend.
• You create standard API endpoints in your Node.js/Express server to serve data.
• The useAuthenticatedFetch hook is used in the front-end to make secure, authenticated requests to your backend.
• In modern Shopify apps using Remix, the loader function and useLoaderData hook provide a cleaner pattern for fetching and accessing data.
• Polaris components like ResourceList are used to present the fetched data in a structured and professional UI.

In our next lesson, we will explore Theme App Extensions. This is how your app can break out of the admin <iframe> and inject functionality, UI, and data directly onto the merchant's live storefront, a critical skill for many freelance projects.