# Graphql Admin API from React client possible?

**URL:** <https://community.shopify.com/t/graphql-admin-api-from-react-client-possible/3141>\
**Category:** Custom Storefronts\
**Created:** [April 17, 2019, 9:01am UTC](https://community.shopify.com/t/graphql-admin-api-from-react-client-possible/3141 "2019-04-17T09:01:07Z")\
**Posts on this page:** 7\
**Page:** 1

## AI-generated summary

Need to read product inventory data (`inventoryQuantity`) from a React storefront, but that field is not available through Shopify’s Storefront GraphQL API. It is only exposed through the Admin GraphQL API.

Current outcome:
- Direct calls from the React client to the Admin GraphQL endpoint fail because of CORS and security restrictions.
- Calling the Admin API from a local Node server works.
- Main answer: Shopify intentionally blocks Admin API access from the browser; it is meant for server-to-server use only.

Key clarification provided:
- **Storefront API**: limited data, safe for public client-side use.
- **Admin API**: full access to store data and mutations, so exposing it in a client app would be insecure.

Related technical note:
- Storefront IDs are base64-encoded global IDs (`gid`), and one reply explains decoding them to recover Shopify resource IDs when needed.

Discussion status:
- The question of accessing Admin GraphQL directly from React is effectively resolved as **no**.
- Suggested direction is to use a backend/custom server if Admin data is required.

<div class="post-metadata">

**Author:** ![captainzero](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/captainzero/32/71972_2.png) [@captainzero](https://community.shopify.com/u/captainzero)\
**Post date:** [April 17, 2019, 9:01am UTC](https://community.shopify.com/t/graphql-admin-api-from-react-client-possible/3141/1 "2019-04-17T09:01:07Z")

</div>

My React App fetches products information via Graphql using Storefront AccessToken, so when i tried to get InventoryQuantity of product variant it gives me error because inventoryQuantity is not accessible with Storefront Accesstoken, but accessible with graphql admin object.

Is there any way to access admin graphql object from React App?

---

<div class="post-metadata">

**Author:** ![captainzero](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/captainzero/32/71972_2.png) [@captainzero](https://community.shopify.com/u/captainzero)\
**Post date:** [April 17, 2019, 12:20pm UTC](https://community.shopify.com/t/graphql-admin-api-from-react-client-possible/3141/2 "2019-04-17T12:20:15Z")

</div>

Update : I tried to query to graphql admin url ([https://store.myshopify.com/admin/api/2019-04/graphql.json](https://store.myshopify.com/admin/api/2019-04/graphql.json)) with AccessToken (not storefront) but now i am getting **Access to fetch at ‘[https://store.myshopify.com/admin/api/2019-04/graphql.json](https://store.myshopify.com/admin/api/2019-04/graphql.json)’ from origin ‘[http://localhost:3000](http://localhost:3000)’ has been blocked by CORS policy**

---

<div class="post-metadata">

**Author:** ![captainzero](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/captainzero/32/71972_2.png) [@captainzero](https://community.shopify.com/u/captainzero)\
**Post date:** [April 17, 2019, 12:27pm UTC](https://community.shopify.com/t/graphql-admin-api-from-react-client-possible/3141/3 "2019-04-17T12:27:25Z")

</div>

Update : I could get results when i query to [https://store.myshopify.com/admin/api/2019-04/graphql.json](https://store.myshopify.com/admin/api/2019-04/graphql.json) via local node server but CORS issue when i req form react app

Anyone have suggestions to query from react app

>

---

<div class="post-metadata">

**Author:** ![skaltenegger](https://avatars.discourse-cdn.com/v4/letter/s/e95f7d/32.png) [@skaltenegger](https://community.shopify.com/u/skaltenegger)\
**Post date:** [April 17, 2019, 12:37pm UTC](https://community.shopify.com/t/graphql-admin-api-from-react-client-possible/3141/4 "2019-04-17T12:37:33Z")

</div>

Great question!

I am also looking to get an example working where I can access GraqhQL data via both the StoreFront API and Admin API.

So far I found out it might be possible to stitch those two endpoints together into one with a `graphql-tools` solution like here:

[https://github.com/apollographql/graphql-tools/issues/892](https://github.com/apollographql/graphql-tools/issues/892)

Also thinking about using a custom server with `graphql-yoga`…

Super happy to hear any thoughts!

---

<div class="post-metadata">

**Author:** ![captainzero](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/captainzero/32/71972_2.png) [@captainzero](https://community.shopify.com/u/captainzero)\
**Post date:** [April 18, 2019, 6:11am UTC](https://community.shopify.com/t/graphql-admin-api-from-react-client-possible/3141/5 "2019-04-18T06:11:57Z")

</div>

I wonder why no one here know about this ? ??‍♂️

---

<div class="post-metadata">

**Author:** ![tsoisauce](https://avatars.discourse-cdn.com/v4/letter/t/e79b87/32.png) [@tsoisauce](https://community.shopify.com/u/tsoisauce)\
**Post date:** [June 5, 2019, 3:23am UTC](https://community.shopify.com/t/graphql-admin-api-from-react-client-possible/3141/6 "2019-06-05T03:23:04Z")

</div>

It’s super confusing but your Shopify GraphQL APIs are split into:

- **Storefront** - **_Limited_** access to information and mutations. Certain fields are **_NOT_** available. Credentials are publicly exposed.
- **Admin** - _ **FULL** _ access to all queries, fields, and mutations.

As you can see, giving access to the client via admin would be disastrous in terms of security. Shopify’s CORs policy will not allow access from the client. Admin API can only be accessed server-to-server. Your client or React App has only one option, Storefront API.

Basic store information can be accessed via Storefront API. The issue we had was getting Shopify’s familiar Variant ID from the hashed ID that returns from a query. Shopify literally calls this field, `legacyResourceId` in the GraphQL Admin docs

Admin GraphQL API response:

```auto
{
  "data": {
    "product": {
      "id": "gid://shopify/Product/1324932956216",
      "title": "GQL Lego Connector",
      "storefrontId": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzEzMjQ5MzI5NTYyMTY="
      "legacyResourceId": "1324932956216"
    }
  },
  ...
}

```

Shopify’s Storefront API only has access to `storefrontId` which is simply called, `id`. This is a base64 hash of Shopify’s new `gid`. You will need to take the has and decode it to get the proper `gid`

```auto
const productId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzEzMjQ5MzI5NTYyMTY'
let decodeProductId = atob(productId)
console.log(decodeProductId)

// output: `gid://shopify/Product/1324932956216`

```

It would be lovely if Shopify actually had Storefront API documentation. The Admin API is well documented but we’re left guessing and trying when it comes to storefront tools.

---

<div class="post-metadata">

**Author:** ![captainzero](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/captainzero/32/71972_2.png) [@captainzero](https://community.shopify.com/u/captainzero)\
**Post date:** [June 5, 2019, 5:15am UTC](https://community.shopify.com/t/graphql-admin-api-from-react-client-possible/3141/7 "2019-06-05T05:15:26Z")

</div>

In order to use storefront api either the app should be private or it should be a sales channel public app.

Our app doesn’t satisfy both conditions so we moved to used Admin API.
