Need Help Querying My Model Definition that is Softly Mocking Shopify Storefront GraphQL API

[do-kevin]

Hey folks,

I'm learning @mswjs/data and my returning data is returning as undefined whenever I tried to query my db. I am trying to mock the api from Shopify's storefront playground. I'm inexperienced with GraphQL and even more so with this library, so I suspect I may have been defining my model dictionary incorrectly, writing my query incorrectly, or both. Here're the snippets:

index.tsx

import { gql, useQuery } from "@apollo/client";
import { useEffect } from "react";

const inter = Inter({ subsets: ["latin"] });

const GET_PRODUCTS = gql`
  query {
    products {
      edges {
        id
        node {
          title
          description
          images {
            node {
              url
            }
          }
        }
      }
    }
  }
`;

export default function Home() {
  const { data } = useQuery(GET_PRODUCTS, {
    fetchPolicy: "network-only",
    notifyOnNetworkStatusChange: true,
    onCompleted() {
      console.log("hit");
    },
  });

  useEffect(() => {
    console.log("data: ", data);
  }, [data]);

db.ts

import { faker } from "@faker-js/faker";
import { factory, manyOf, primaryKey } from "@mswjs/data";

const modelDictionary = {
products: {
  id: primaryKey(faker.datatype.uuid),
  edges: manyOf("edges"),
},
edges: {
  id: primaryKey(faker.datatype.uuid),
  node: manyOf("node"),
},
node: {
  id: primaryKey(faker.datatype.uuid),
  title: () => faker.commerce.product(),
  description: () => faker.commerce.productDescription(),
  images: manyOf("image_edges"),
},
image_edges: {
  id: primaryKey(faker.datatype.uuid),
  node: {
    url: () => "/",
  },
},
};

const db = factory(modelDictionary);

const image_edges = [
db.image_edges.create({
  node: {
    url: "/1",
  },
}),
db.image_edges.create({
  node: {
    url: "/2",
  },
}),
db.image_edges.create({
  node: {
    url: "/3",
  },
}),
db.image_edges.create({
  node: {
    url: "/4",
  },
}),
];

const nodes = [
db.node.create({
  title: faker.commerce.product(),
  images: image_edges,
}),
db.node.create({
  title: faker.commerce.product(),
  images: image_edges,
}),
db.node.create({
  title: faker.commerce.product(),
  images: image_edges,
}),
];

const edges = [
db.edges.create({
  node: nodes,
}),
db.edges.create({
  node: nodes,
}),
db.edges.create({
  node: nodes,
}),
];

db.products.create({ edges });

console.log(db.products.getAll());

export { db };

And here's my repository incase, you need it.
https://github.com/do-kevin/art-commerce/tree/5bcfbcb48025f2c2438e4ae10f4e9ae7f92f02ed