Graphql Admin API from React client possible?

Retired Boards Appdev Custom Storefronts
1

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?

1 Like
2

Update : I tried to query to graphql admin url (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’ from origin ‘http://localhost:3000’ has been blocked by CORS policy

3

Update : I could get results when i query to 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

4

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

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

Super happy to hear any thoughts!

5

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

6

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:

{
  "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

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.

1 Like
7

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.