How to directly access Shopify API from frontend

I've added the following to my shopify.toml file:

[access.admin]
direct_api_mode = "online"
embedded_app_direct_api_access = true

[access.admin]
direct_api_mode = "online"
embedded_app_direct_api_access = true

How do I then make a direct request from my embedded admin app React frontend to the Shopify Graphql Admin API?

9 Replies

Chocci_Milk•2w ago

Have you taken a look at these docs? https://shopify.dev/docs/api/app-home#direct-api-access

DanOP•2w ago

Thanks Antoine. Managed to get it working. Here's what I did:

 useEffect(() => {
    async function getProduct(id) {
      const res = await fetch(`shopify:admin/api/2025-04/graphql.json`, {
        method: "POST",
        body: JSON.stringify({
          query: `
            query GetProduct($id: ID!) {
              product(id: $id) {
                title
              }
            }
          `,
          variables: { id },
        }),
      });
      console.log("res", res);
      const data = await res.json();
      console.log("data", data);
    }
    getProduct("gid://shopify/Product/74163529641233");
  }, []);

 useEffect(() => {
    async function getProduct(id) {
      const res = await fetch(`shopify:admin/api/2025-04/graphql.json`, {
        method: "POST",
        body: JSON.stringify({
          query: `
            query GetProduct($id: ID!) {
              product(id: $id) {
                title
              }
            }
          `,
          variables: { id },
        }),
      });
      console.log("res", res);
      const data = await res.json();
      console.log("data", data);
    }
    getProduct("gid://shopify/Product/74163529641233");
  }, []);

Chocci_Milk•2w ago

I'm curious why you aren't simply fetching the product data from your Gadget application. Is there something specific that stops you from doing so? Whats your general use case here? Would the resource picker be a better solution for what you're trying to do? https://shopify.dev/docs/api/app-home/apis/resource-picker

DanOP•2w ago

There are some things that Gadget doesn't sync to the db that we need. For example, on page load we need to fetch product variants by an array of ids, and we need the images of the variants, which Gadget doesn't sync. That's why we are having to fetch some things from Shopify. We also need shopifyOrder.customer, which Gadget doesn't sync

Chocci_Milk•2w ago

I don't think what you're saying is correct. For products/variants we have media models that can be turned on in your connection settings (productMedia/productVariantMedia). For orders, you need to have the shopifyCustomer model to have the customer data related to the order. That is also configurable form the connection settings.

DanOP•2w ago

Ah OK, perhaps we need to sync some customer data then. How would we get productVariant.image https://shopify.dev/docs/api/admin-graphql/latest/objects/productvariant#field-ProductVariant.fields.image

Chocci_Milk•2w ago

You would need to add the productMedia and/or productVariantMedia models. Then you'll automatically get the file model (will only get the product and variant files). Then you can use the models like the following:

const product = await api.shopifyProduct.findFirst({
  select: {
    media: {
      edges: {
        node: {
          image: true
        }
      }
    }
  }
})

const image = product.media.edges[0].node.image.originalSrc

const product = await api.shopifyProduct.findFirst({
  select: {
    media: {
      edges: {
        node: {
          image: true
        }
      }
    }
  }
})

const image = product.media.edges[0].node.image.originalSrc

DanOP•2w ago

But there is no way to get the product variant's featured image using this method? https://shopify.dev/docs/api/admin-graphql/latest/objects/productvariant#field-ProductVariant.fields.image

Chocci_Milk•2w ago

Hello, I've talked to the team and we'll see if we can't add something like the product's featureMedia field

Gaming

Programming

How to directly access Shopify API from frontend

Did you find this page helpful?