Solved

Why is my Remix app's data fetch request getting cancelled?

johnmcguin88
Shopify Partner
8 1 1

I am in the beginning stages of creating an app. I used the Shopify cli for remix and currently have only two routes. Navigation works completely fine until I try to fetch some data in the loader. It should be noted that I am calling out to a second server. Both are running locally and exposed via ngrok.

 

When I do try to call out to that server during installation, there is no problem. When I try to call out within the loader, the request gets cancelled and the navigation is prevented. What is strange here is that is I log out the response in the server loader, it logs successfully. If I look at the other server logs, the request is successful with no problem.

 

I am brand new to Remix but it sure seems like this is a Remix specific issue given the above. To my understanding, that loader should only ever execute on the server, so CORS shouldn't be an issue, but to be safe, I configured the second server for it. I am at a loss for now and have been battling it for a while now. Has anybody seen this? Any ideas as to what might be going on?

Accepted Solution (1)

johnmcguin88
Shopify Partner
8 1 1

This is an accepted solution.

For posterity's sake, I got this solved. My dev console had a lot of noise (ended up being due to Brave browser) which prevented me from seeing the signal. I had a client side error around reading from process.env. I have a `config.ts` file that reads from process.env, validates requirements and exports the variables as consts. This was winding up in the client bundle however, so I had to rename the file to `config.server.ts` and the issue went away.

View solution in original post

Replies 4 (4)

Made4uo-Ribe
Shopify Partner
5389 1299 1589

Hi @johnmcguin88,

 

Have you try to re-start your app? Your auth might be off. You can check the example code for loader use here

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


johnmcguin88
Shopify Partner
8 1 1

Hi, thanks but the app is going through OAuth flow without issues. It is pretty much a stock cli project so that's all set up automatically. The loader is use is correct as I can validate it without hitting the second server, it is behaving as expected. I'm going to try this outside of Shopify and see if I experience a similar issue

johnmcguin88
Shopify Partner
8 1 1

Small update -> I've recreated a remix project with a similar layout with a base route that holds a nav  with <Link>s and an <Outlet> for routing. The reproduction is using the same server as I'm trying to get working within the Shopify app. Both frontend and backend are served up over https via ngrok with the same auth mechanism in place on the backend. This works without issue outside of the Shopify ecosystem. What could be different with this as an embedded app in Shopify? I haven't seen a lot of examples of a separate backend for the domain logic, but I'm assuming at least some other people must have this setup?

johnmcguin88
Shopify Partner
8 1 1

This is an accepted solution.

For posterity's sake, I got this solved. My dev console had a lot of noise (ended up being due to Brave browser) which prevented me from seeing the signal. I had a client side error around reading from process.env. I have a `config.ts` file that reads from process.env, validates requirements and exports the variables as consts. This was winding up in the client bundle however, so I had to rename the file to `config.server.ts` and the issue went away.