Get products from Shopify Remix and Graphql API

app.products.jsx

import React, { useState } from "react";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import {
    Box,
    Card,
    Layout,
    Link,
    List,
    Page,
    Text,
    BlockStack,
    LegacyCard,
    EmptyState,
    DataTable,
    IndexTable,
    useIndexResourceState,
    Badge,
  } from "@shopify/polaris";
  import { TitleBar } from "@shopify/app-bridge-react";
  import { authenticate } from "../shopify.server";

  export const loader = async ({ request }) => {
    //await authenticate.admin(request);
  
    const { admin } = await authenticate.admin(request);
    
    const response = await admin.graphql(
      `query($first: Int!) {
        products(first: $first) {
          nodes {
            id
            title
            description
            status
            variants(first: 1) {
              nodes {
                inventoryPolicy
              }
            }
          }
        }
      }`,
      {
        variables: { first: 5 }, // You can adjust the number of products fetched
      }
    );
  
    const body = await response.json();
    const nodes = body.data.products.nodes;
  
    return json(nodes || []); // Return empty array if no data is found
  };


  export default function ProductList() {
    const products = useLoaderData(); // Get the loaded product data
    const [isProductListVisible, setIsProductListVisible] = useState(true);
  
    // Resource name for the table
    const resourceName = {
      singular: "product",
      plural: "products",
    };
  
    // Use the index resource state to manage row selections
    const { selectedResources, allResourcesSelected, handleSelectionChange } = useIndexResourceState(products);
  
    // Define rows for the IndexTable
    const rowMarkup = products.map((product, index) => (
      <IndexTable.Row
        id={product.id}
        key={product.id}
        selected={selectedResources.includes(product.id)}
        position={index}
      >
        <IndexTable.Cell>
          <Text variant="bodyMd" fontWeight="bold" as="span">
            {product.title}
          </Text>
        </IndexTable.Cell>
        <IndexTable.Cell>{product.description || ""}</IndexTable.Cell>

        <IndexTable.Cell>
          <Badge progress={product.status === "ACTIVE" ? "complete" : "incomplete"}>
            {product.status === "ACTIVE" ? "Published" : "Draft"}
          </Badge>
        </IndexTable.Cell>
        <IndexTable.Cell>
          <Badge progress={product.variants.nodes[0].inventoryPolicy === "TRACKED" ? "complete" : "incomplete"}>
            {product.variants.nodes[0].inventoryPolicy === "TRACKED" ? "Inventory Tracked" : "No Inventory Tracking"}
          </Badge>
        </IndexTable.Cell>
      </IndexTable.Row>
    ));
  
    return (
      <Page>
      <TitleBar title="My orders" />
      <Layout>
        <Layout.Section>
          <Card>
            <IndexTable
              resourceName={resourceName}
              itemCount={products.length}
              selectedItemsCount={allResourcesSelected ? "All" : selectedResources.length}
              onSelectionChange={handleSelectionChange}
              headings={[
                { title: "Product Title" },
                { title: "Description" },
                { title: "Status" },
                { title: "Inventory Tracking" },
              ]}
              >
              {rowMarkup}
            </IndexTable>
          </Card>
        </Layout.Section>
      </Layout>
      </Page>
    );
    
  }