In a Remix app with “Custom Distribution”, Storefront API access can be configured in the Partners Dashboard.
This allows you to use storefront.graphql to query the API from your Remix routes.
However, it is not clear how to query the Storefront API from a theme app block. How can this be achieved? Do you have to use app proxy routes, or is there a way to access the Storefront Token somehow, and query the API directly in the theme app block?
I have looked in .env, done shopify app env show, but don’t see the token anywhere, nor is it shown anywhere in the Partners Dashboard.
Hey @Nic_Oliver
What exactly are you looking to achieve within the theme block? The Storefront API is not really intended for use within a Liquid-based theme - it’s generally for use with a headless storefront, or a custom storefront on an non-SHopify platform.
@Liam-Shopify, Thanks for the reply. We are building a pre-order dashboard that will display a collection of products with filters as a large form (this data will be sourced from the Storefront API in order to support filtering from Search & Discovery).
Users will be able to set desired quantities for four separate pre-order windows per SKU. The form will be submitted to an app proxy route, which will create multiple draft orders. The draft orders are tied to a specific B2B company, as this functionality is only available to logged in B2B users. The user can also choose to save their progress for later (draft orders will be updated on save).
When a user returns to continue working on their order, the existing drafts will be queried and summary data will be displayed at the top of the dashboard, along with previously set quantities of each SKU within the main product form.
Due to the dynamic nature of the UI, along with the fact that much of the data is being fetched in the front end from an app proxy route, Liquid is not a good fit, and we are using React to build this feature.
The ideal solution would be if we could use an app proxy page to render the UI within the context of the theme header / footer. This would give us access to all the backend pieces of our app and allow the Storefront API to be used for the collection data. However, it does not seem as though this is possible with the Remix template - you can either use a Remix route and JS to render the proxy page outside the theme context (not viable for our use case), our return "Content-Type", "application/liquid" in the proxy page route, but not have access to any of the reactive JS functionality that is provided by a Remix route component, and is what makes Remix powerful. We have an open ticket and are waiting for a reply in the Remix template repo about this inconsistency.
So, given the above requirements, we have landed on using a theme app block to render the dashboard. We have built it out using React and have the collection data being fetched from the Storefront API via app proxy route, but it seems like a cleaner approach would be to just query the Storefront API directly within the app block, if there was a way to get the token to do so.
Hi again,
Thanks for describing your use case - I think the best approach here would be to continue using your app proxy route or backend API to fetch data and pass it to your React app block. For B2B contextualization, you could use the Customer Account API and Storefront API from your backend.
You cannot get a Storefront API token from within a theme app block. All Storefront API requests requiring authentication must be made from your backend, not from the app block or browser.
@Liam-Shopify - Thanks for the recommendation, we will proceed with the proxy approach. Reading between the lines here, it seems like the Remix app template does not actually create an unauthenticated Storefront API token at all (in the same way you configure it from the Headless channel / custom app), which is what I was looking for.
If I’m understanding correctly, with the Remix app template, access credentials that are used for the Admin API are the same ones used for the Storefront API ie. everything needs to be handled server side.
I did notice there is a storefrontAccessTokenCreate mutation in the Admin API, but it’s not entirely clear what the use case for that would be. Would the workflow for that be to use app proxy to create the token and then make subsequent requests from the front end using said token?
As I touched on above, if there was a way to use an app proxy page within the context of the theme, that would be ideal!
