Shopify Remix App page to load product by handle with metafields from with GraphQL, display with Polaris components.

app.products.$handle.jsx

import { json } from "@remix-run/node";
import { Page, Layout, BlockStack } from "@shopify/polaris";
import { authenticate } from "../shopify.server";
import { useLoaderData } from "@remix-run/react";

export const loader = async ({ request, params }) => {
  const handle = params.handle;
  const { admin } = await authenticate.admin(request);

  const response = await admin.graphql(
    `#graphql
    query getProductByHandle($handle: String!) {
      productByHandle(handle: $handle) {
        id
        title
        handle
        status
        featuredImage {
          url
          altText
        }
        singleMetafield: metafield(namespace: "test_data", key: "snowboard_length") {
          value
          type
        }
        namespaceMetafields: metafields(first: 10, namespace: "test_data") {
          edges {
            node {
              id
              key
              value
              type
              namespace
              updatedAt
            }
          }
        }
        metafields: metafields(first: 25) {
          edges {
            node {
              id
              key
              value
              type
              namespace
              updatedAt
            }
          }
        }
      }
    }`,
    { variables: { handle: handle } }
  );

  const {
    data: { productByHandle },
  } = await response.json();

  return json(productByHandle);
};

export default function ProductHandle() {
  const product = useLoaderData();

  return (
    <Page>
      <ui-title-bar title="Product metafields" />
      <Layout>
        <Layout.Section>
          <BlockStack gap="003">
            <p>Product Metafield(s)to come</p>
            <pre>{JSON.stringify(product, null, 2)}</pre>
          </BlockStack>
        </Layout.Section>
      </Layout>
    </Page>
  );
}