[GH-ISSUE #3739] [bug]: GraphQL request failing on opening the app - BASE_URL is being used instead of BACKEND_GQL_URL #1297

Closed
opened 2026-03-16 19:44:58 +03:00 by kerem · 2 comments
Owner

Originally created by @skrypt-nl on GitHub (Jan 10, 2024).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/3739

Is there an existing issue for this?

  • I have searched the existing issues

Current behavior

I'm running Hoppscotch on my own server using Docker compose.
The application can be accessed at the following domains (actual domain redacted):

  • Main: sandbox.domain.com
  • Admin: admin.sandbox.domain.com
  • Backend: api.sandbox.domain.com

The .env file has been modified to look like this:

# Hoppscotch App Domain Config
REDIRECT_URL=https://sandbox.domain.com
WHITELISTED_ORIGINS="https://domain.com,https://sandbox.domain.com,https://api.sandbox.domain.com,https://admin.sandbox.domain.com"

# Base URLs
VITE_BASE_URL=https://sandbox.domain.com
VITE_SHORTCODE_BASE_URL=https://sandbox.domain.com
VITE_ADMIN_URL=https://admin.sandbox.domain.com

# Backend URLs
VITE_BACKEND_GQL_URL=https://api.sandbox.domain.com/graphql
VITE_BACKEND_WS_URL=ws://api.sandbox.domain.com/graphql
VITE_BACKEND_API_URL=https://api.sandbox.domain.com/v1

I'm using NGINX proxies to redirect the (sub)domains to the right docker applications. I had to change the ports in the docker-compose file, but that all seems to be working fine. This is the edited config for the admin subdomain, for example:

proxy_pass          http://localhost:13100;
proxy_redirect                      off;
proxy_set_header  Host              $http_host;
proxy_set_header  X-Real-IP         $remote_addr;
proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
proxy_set_header  X-Forwarded-Proto $scheme;
proxy_read_timeout                  86400;
proxy_set_header 		    Upgrade $http_upgrade;
proxy_set_header 		    Connection "upgrade";

Now, here comes the problem:
When I log in with my account for the very first time, everything works fine. I can create a team, change settings, change my profile, etc. The newly created team will show up in the teams dropdown, settings will be saved, and everything works fine.

However, as soon as I do a normal refresh (CMD+R, so without clearing the cache) on the page, the application will try to make a POST request for the Me{} GraphQL query, on the following URL: sandbox.domain.com/graphql.
This request will fail because the /graphql endpoint lives at the api.sandbox.domain.com domain, and I cannot see my teams, nor do anything related to my account.

I figured out that when I do a hard refresh (CMD+SHIFT+R, which clears the cache), everything will work fine again. I can perform all the actions described above, and all GraphQL requests are being sent to the correct subdomain. But as soon as I do the next normal refresh, or open the application in another tab, well, then the problem is back.

One thing that might be good to know, I that my VITE_BACKEND_GQL_URL used to be the wrong domain after I installed everything, as I was still figuring my way around the NGINX proxy and the different ports. As soon as I solved this, I changed the .env file and restarted the Docker services. Something tells me that there's probably something cache-related that's messing things up, but I cannot find what exactly.

Steps to reproduce

  1. Set up self-hosted Hoppscotch
  2. Put the backend and admin application on different subdomains
  3. Proxy with NGINX
  4. Login to the base application
  5. Create one or more teams
  6. Hard refresh (CMD+SHIFT+R) the page and check if the teams are there
  7. Do a normal refresh (CMD+R)
  8. The teams are now gone from the dropdown, and the console will have thrown an error for the Me{} query

Environment

Production

Version

Self-hosted

Originally created by @skrypt-nl on GitHub (Jan 10, 2024). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/3739 ### Is there an existing issue for this? - [X] I have searched the existing issues ### Current behavior I'm running Hoppscotch on my own server using Docker compose. The application can be accessed at the following domains (actual domain redacted): - Main: sandbox.domain.com - Admin: admin.sandbox.domain.com - Backend: api.sandbox.domain.com The .env file has been modified to look like this: ``` # Hoppscotch App Domain Config REDIRECT_URL=https://sandbox.domain.com WHITELISTED_ORIGINS="https://domain.com,https://sandbox.domain.com,https://api.sandbox.domain.com,https://admin.sandbox.domain.com" # Base URLs VITE_BASE_URL=https://sandbox.domain.com VITE_SHORTCODE_BASE_URL=https://sandbox.domain.com VITE_ADMIN_URL=https://admin.sandbox.domain.com # Backend URLs VITE_BACKEND_GQL_URL=https://api.sandbox.domain.com/graphql VITE_BACKEND_WS_URL=ws://api.sandbox.domain.com/graphql VITE_BACKEND_API_URL=https://api.sandbox.domain.com/v1 ``` I'm using NGINX proxies to redirect the (sub)domains to the right docker applications. I had to change the ports in the docker-compose file, but that all seems to be working fine. This is the edited config for the admin subdomain, for example: ``` proxy_pass http://localhost:13100; proxy_redirect off; proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_read_timeout 86400; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; ``` **Now, here comes the problem:** When I log in with my account for the very first time, everything works fine. I can create a team, change settings, change my profile, etc. The newly created team will show up in the teams dropdown, settings will be saved, and everything works fine. However, as soon as I do a normal refresh (CMD+R, so without clearing the cache) on the page, the application will try to make a POST request for the `Me{}` GraphQL query, on the following URL: `sandbox.domain.com/graphql`. This request will fail because the `/graphql` endpoint lives at the `api.sandbox.domain.com` domain, and I cannot see my teams, nor do anything related to my account. I figured out that when I do a hard refresh (CMD+SHIFT+R, which clears the cache), everything will work fine again. I can perform all the actions described above, and all GraphQL requests are being sent to the correct subdomain. But as soon as I do the next normal refresh, or open the application in another tab, well, then the problem is back. One thing that might be good to know, I that my `VITE_BACKEND_GQL_URL` used to be the wrong domain after I installed everything, as I was still figuring my way around the NGINX proxy and the different ports. As soon as I solved this, I changed the .env file and restarted the Docker services. Something tells me that there's probably something cache-related that's messing things up, but I cannot find what exactly. ### Steps to reproduce 1. Set up self-hosted Hoppscotch 2. Put the backend and admin application on different subdomains 3. Proxy with NGINX 4. Login to the base application 5. Create one or more teams 6. Hard refresh (CMD+SHIFT+R) the page and check if the teams are there 7. Do a normal refresh (CMD+R) 8. The teams are now gone from the dropdown, and the console will have thrown an error for the Me{} query ### Environment Production ### Version Self-hosted
kerem 2026-03-16 19:44:58 +03:00
Author
Owner

@skrypt-nl commented on GitHub (Jan 10, 2024):

So I managed to fix the issue, but I didn't find the exact source:
I manually deleted everything under the storage tab of my browser. My idea is that, somewhere, the app caches the GQL endpoint in the LocalStorage when the app is opened for the first time. When the endpoint then changes, on the server, the app doesn't flush the original endpoint from the LocalStorage, meaning it'll hit a 405 error every time the app opens after that.

<!-- gh-comment-id:1884025127 --> @skrypt-nl commented on GitHub (Jan 10, 2024): So I managed to fix the issue, but I didn't find the exact source: I manually deleted everything under the storage tab of my browser. My idea is that, somewhere, the app caches the GQL endpoint in the LocalStorage when the app is opened for the first time. When the endpoint then changes, on the server, the app doesn't flush the original endpoint from the LocalStorage, meaning it'll hit a 405 error every time the app opens after that.
Author
Owner

@balub commented on GitHub (Jan 11, 2024):

The Hoppscotch app has service workers so it will cache the config, That is why a hard reset in the browser solves the problem.

<!-- gh-comment-id:1886617709 --> @balub commented on GitHub (Jan 11, 2024): The Hoppscotch app has service workers so it will cache the config, That is why a hard reset in the browser solves the problem.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/hoppscotch#1297
No description provided.