Can't seem to query projects

GraphQL Admin API Troubleshooting
1

Hi all,
I’ve started developing apps for shopify, and I was wondering why this code doesn’t seem to work. The same query used on GraphiQL returns a response that is the same as I would expect from querying the API externally, but this code (specifically the loader) always returns null.
Please help me query the API.

import { useFetcher } from "@remix-run/react";
import { json } from "@remix-run/node";
import {
  Page,
  Layout,
  Text,
  Card,
  BlockStack,
  Box,
} from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import { authenticate } from "../shopify.server";

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

  const response = await admin.graphql(
    `#graphql
      query getFirstProduct {
        products(first: 1) {
          edges {
            node {
              id
              title
              handle
              status
              variants(first: 10) {
                edges {
                  node {
                    id
                    price
                    barcode
                    createdAt
                  }
                }
              }
            }
          }
        }
      }`
  );

  const responseJson = await response.json();
  const firstProduct = responseJson.data.products.edges[0]?.node;

  return json({
    product: firstProduct,
  });
};

export default function Index() {
  const fetcher = useFetcher();
  const { product } = fetcher.data || {};

  return (
    <Page>
      <TitleBar title="Remix app template">
        <Text as="h2" variant="headingMd">
          First Product in the Store
        </Text>
      </TitleBar>
      <BlockStack gap="500">
        <Layout>
          <Layout.Section>
            <Card>
              <BlockStack gap="500">
                {product ? (
                  <>
                    <Text as="h3" variant="headingMd">
                      Product Information
                    </Text>
                    <Box
                      padding="400"
                      background="bg-surface-active"
                      borderWidth="025"
                      borderRadius="200"
                      borderColor="border"
                      overflowX="scroll"
                    >
                      <pre style={{ margin: 0 }}>
                        <code>{JSON.stringify(product, null, 2)}</code>
                      </pre>
                    </Box>
                  </>
                ) : (
                  <Text as="p" variant="bodyMd">
                    No products found in the store.
                  </Text>
                )}
              </BlockStack>
            </Card>
          </Layout.Section>
        </Layout>
      </BlockStack>
    </Page>
  );
}