"Expected a valid shop query parameter" Embedded App

Retired Boards Appdev Tools
1

I followed the Shopify App Node and React tutorial and made an embedded app. Now every time I switch pages on the top navigation bar I get the error "Expected a valid shop query parameter".
I’m not sure what’s causing this and how to fix it. I would appreciate any help!

Thanks!

2

Hey @ReachMoreOnline ,

Have a look at this forum post addressing a related question and error. I believe this should help resolve the issue.

3

Hey @awwdam ,

Thanks for your reply! This issue has been bugging me for some time. I already do that the other post suggests. I currently do pass the “shop” query param in the URL and redirect using:

ctx.redirect(`/?shop=${shop}`);

^ This is in my server.js.

Hence, it is able to load the app and actually load my _app.js. Whatever is in my index.js page actually shows up on the page. However, if I click a tab in the embedded app navigation bar, I get the error "Expected a valid shop query parameter".

Also, how should we be storing shopOrigin? Is it okay to store it in cookies in server.js like:

ctx.cookies.set('shopOrigin', shop, {
          httpOnly: false,
          secure: true,
          sameSite: 'none'
});

? And then getting the cookies in the frontend?

4

Have you solved this?
I am facing the same issue.
It’s probably either a bug or bad documentation.
I found a lot of similar questions on github, stackoverflow and this community.
I discovered that I am getting the error
“Expected a valid shop query parameter”
after I add a link to navigation with “../index” at the end
Then I added the link “…/” as an index link and navigation is working now.
But this index link is always active now.

5

Hey @ReachMoreOnline ,

Thanks for getting back with more info. I did a bit of digging and found this related GitHub issue. A post in this thread suggests this message might be related to the tutorial steps for adding a ‘ClientRouter’ to your app. Have you completed that section of the tutorial already? There are some other resources that offer additional insights on shopOrigin, consider taking a look through this getting and storing the shop origin guide, as well as the following tutorial on session tokens for embedded apps.