Building an Embedded App Page

The Anatomy of an Embedded App Page

Let's quickly revisit the architecture of an embedded app. As a developer, you are responsible for rendering the "App surface," but this surface must communicate with the Shopify Admin (via App Bridge) and present a consistent UI (via Polaris).

Today's goal is to make that "App surface" dynamic by populating it with data from the merchant's store, like a list of their products.

The Data Flow: From Shopify to Your Component

In a modern Shopify app built with the Remix template, fetching and displaying data follows a clear, secure pattern that separates server-side and client-side concerns.

1. The Route Component (e.g., app/routes/app.products.jsx): This file defines a new page in your app. It exports two key things:

   • A loader function that runs only on the server.
   • A React component that runs on the client (the browser).

2. The loader Function (Backend): This is where you perform secure operations. The Shopify CLI provides an authenticate.admin(request) helper. This gives you an admin object, which contains a pre-configured GraphQL client. You use this client to query the Shopify Admin API for the data you need (e.g., products, orders). The loader then returns this data as a JSON response.

3. The useLoaderData Hook (Connecting Backend to Frontend): In your React component, you call the useLoaderData hook. This hook provides the data that was returned from your loader function.

4. The Polaris Component (Frontend): You take the data from useLoaderData and pass it as props to Polaris components like ResourceList or Card to render the UI for the merchant.

This architecture ensures that your API keys and secret tokens are never exposed to the browser, as all API calls happen securely on the server within the loader.

Part 1: Fetching and Displaying Products

Let's walk through building a new page in our app that fetches a list of products from the store and displays them. The following video provides an excellent step-by-step guide using the latest Shopify app template. We'll break it down into logical steps.

After watching, let's crystallize the key steps:

• Create a new file in /app/routes/ (e.g., app.products.tsx) to define the new page.
• Define a loader function that is async and uses await authenticate.admin(request).
• Construct a GraphQL query as a string and pass it to admin.graphql(). Remember to request the specific fields you need (e.g., id, title, featuredImage).
• Update your app's scopes in shopify.app.toml to include necessary permissions like read_products.
• Return the data from the loader using json({ products: productsData.products.edges }).
• In your React component, get the data using const { products } = useLoaderData().
• Map over the data and render it using an appropriate Polaris component like ResourceList.

Part 2: Interacting with Store Data via ResourcePicker

Displaying data is only half the story. A truly useful app allows merchants to interact with their data. One of the most common and powerful ways to do this is with App Bridge's ResourcePicker. It opens a modal that allows the merchant to browse, search, and select their Products, Variants, or Collections.

The official Shopify documentation provides a fantastic tutorial on building a QR code generator app. We will focus on the part where it implements the product selector.

The core interaction logic for the ResourcePicker looks like this (adapted from the tutorial for clarity):

import { useAppBridge } from "@shopify/app-bridge-react";
import { useState } from "react";

function ProductSelector() {
  const shopify = useAppBridge();
  const [selectedProduct, setSelectedProduct] = useState(null);

  async function selectProduct() {
    const products = await shopify.resourcePicker({
      type: "product",
      action: "select",
      multiple: false, // Set to true to allow multiple selections
    });

    if (products) {
      const { id, title, images } = products[0];
      // You now have the product data. You can save it to your component's state.
      setSelectedProduct({ id, title, image: images[0]?.originalSrc });
      
      // In a real app, you would likely send this ID to your backend
      // to save it in your database.
    }
  }

  // ... JSX to display the selected product and a button to trigger selectProduct
}

This pattern is incredibly powerful. You get a native, feature-rich product selection UI with just a few lines of code, and you receive clean, structured data back to use in your application.

Conclusion

In this lesson, we bridged the gap between our frontend UI and Shopify's backend data. You've built a complete, full-stack slice of functionality within an embedded app, a core competency for any Shopify developer.

Key Takeaways:

• Embedded app pages are created as new routes within your app's file structure.
• The Remix loader function is the secure, server-side gateway for fetching data from the Shopify Admin API using the admin.graphql client.
• Data from the loader is passed to your frontend component via the useLoaderData hook.
• Polaris components like ResourceList and Card provide a consistent and professional way to display store data to the merchant.
• App Bridge's ResourcePicker is an essential tool for enabling merchants to interact with and select resources like products and collections from within your app.

In our next lesson, we will build on the interaction patterns we saw today. We will explore how to use App Bridge actions to trigger native Shopify UI elements like modals and toast messages. This will allow us to provide clear feedback to the merchant after they perform an action, such as confirming that a product has been saved or alerting them to an error.