Rendering and routing of Shopify Admin Embedded App

cypcz · ‎03-18-2021

Hello all,

I'm just starting developing Shopify Apps and I'm very confused by some concepts. I'd like to find some clarity here.

I started following this tutorial to get my hands dirty. Very soon I started to think why am I using Next.js, if I don't need any SEO optimization and app is behind the login wall - great use case for SPA. Everything was working fine until I tried to request Shopify resources via GraphQL using store's accessToken. After some googling I realized Shopify API doesn't allow requests sent from the browser (CORS).

I learned my lesson and moved back to Next.js to be able to query Shopify API from the server. I'm using getServerSideProps method to load the data from Shopify API using store's accessToken and send it to the component. I also implemented security best practices, meaning I'm verifying HMAC with each request as it was recommended in the docs. All of this was working fine, until I started to use routing. I'm following client routing solution described in the docs here. The problem I encountered with this solution is that the query parameters are not passed on route changes, which results in HMAC verification failure. The same applies for shopOrigin which is required by app-bridge-react library and which I also pass from getServerSideProps.

I feel I ran into a deadlock - I want to request data from Shopify API which is possible from the server, but at the same time I unable to use client side routing. Is there a way around it? Can I leverage client side routing while also being able to get Shopify data?

Thank you very much for any clarification, it'd help me tremendously.

Jakub

cypcz · ‎03-19-2021

Hello again,

my issue got pushed to the second page already without getting an answer. I'd like to push it back forward.

I'm strongly blocked on the above. Is there any other place I can ask for help? Slack or Discord perhaps?

Thank you!

Gregarican · ‎03-19-2021

I'm unsure of the final goal of your project, but for me I was able to spin up a middleware service. This service is the destination for a Shopify app proxy (https://shopify.dev/tutorials/display-dynamic-store-data-with-app-proxies). I validate the inbound requests by verifying the HMAC signature, do what I need to do internally, and can pass back responses to the Shopify client. By using a private/custom app I also have API credentials that I can use to make whatever calls I need to from my middleware service to Shopify. No need for tokens then, I can just use my API credentials.

So essentially my app proxy middleware service is also the catalyst for my private/custom app. You can use that middleman to perform any/all client routing you'd like. The middleman could work embedded into the Shopify web admin, Shopify POS, the Shopify web store, etc. Or it could work from a top level where clients connect to it directly. Depending on your project goal and implementation.