"Expected a valid shop query parameter" Embedded App

ReachMoreOnline
Tourist
3 0 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!

0 Likes
awwdam
Shopify Staff
Shopify Staff
61 5 2

Hey @ReachMoreOnline,

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

awwdam | API Support @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
ReachMoreOnline
Tourist
3 0 1

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?

0 Likes
sv2109
New Member
1 0 0

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. 

0 Likes
awwdam
Shopify Staff
Shopify Staff
61 5 2

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.

awwdam | API Support @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes