Re: Graphql Admin API from React client possible?

Graphql Admin API from React client possible?

captainzero
Shopify Partner
41 0 9

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?

Replies 6 (6)

captainzero
Shopify Partner
41 0 9

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

captainzero
Shopify Partner
41 0 9

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


skaltenegger
Visitor
1 0 0

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! 

captainzero
Shopify Partner
41 0 9

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

tsoisauce
Shopify Partner
1 0 1

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. 

captainzero
Shopify Partner
41 0 9

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.