How to call the Shopify Admin API inside a React app block?

[triplesingle]

Hey guys, currently building a React App Block for my Shopify app.

The React app block needs to make calls to the Shopify Admin API.

I've installed the Shopify Admin API client package (Link: https://github.com/Shopify/shopify-app-js/tree/main/packages/api-clients/admin-api-client) but it panics when I instantiate the Shopify object because apparently: Admin API Client: this client should not be used in the browser

Just wondering what is the best way to invoke calls to the Shopify Admin API within the context of a React app block?

[Huptech-Web]

Hello @triplesingle 

The Admin API should be called server-side, not in the browser, because it contains access token credentials that must remain confidential. To call the Admin API in a React application, you can create an App Proxy API. This proxy API can be written in Node.js, PHP, or any  Backend technology and then use this API In your React App.

Reference for App Proxy

1. https://shopify.dev/docs/apps/build/online-store/display-dynamic-data

2. https://shopify.dev/docs/api/shopify-app-remix/v2/authenticate/public/app-proxy

If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.