Hot reloading during development always loses query parameters

MrAvantiC commented 8 months ago

Hi there, I have a React application where I integrated with my backend server as per https://vitejs.dev/guide/backend-integration:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />

  <script type="module">
    import RefreshRuntime from "http://localhost:5173/@react-refresh";

    RefreshRuntime.injectIntoGlobalHook(window);
    window.$RefreshReg$ = () => {
    };
    window.$RefreshSig$ = () => (type) => type;
    window.__vite_plugin_react_preamble_installed__ = true;
  </script>

  <script type="module" src="http://localhost:5173/src/main.tsx"></script>

  <title>Vite + React + TS</title>
</head>

While this works fine in general, I run into an issue for my specific use case. My backend always requires a set of query parameters to be passed along in order to validate those requests. Now, what frequently happens when I make changes to the Code, Vite attempts to do the refresh of the page but then loses the current query-parameters - thus basically resulting in an error and for me to have to manually reload the entire application.

Is there any way to customise this refresh behaviour?

Kind regards!

ArnaudBarre commented 8 months ago

Vite attempts to do the refresh of the page Do you mean page reload of HMR update?

In both cases I think the URL is not touch, I have multiple modal that are driven by query params and it works fine for me

MrAvantiC commented 8 months ago

Hi @ArnaudBarre , I'm gonna be a little more specific, hope that helps.

I'm developing an app for Shopify. In Shopify, external apps are always integrated via iFrames and the iFrame-URLs have a bunch of query params, e.g. to recognise the actual shop that uses your app: Screenshot 2024-01-10 at 15 17 16

Now, as initially mentioned, I integrated @react-refresh as suggested in the documentation. What happens now when I make a change to the code is that I can see in the Dev-Tools how Vite attempts to "refresh" the page: Screenshot 2024-01-10 at 15 20 27

...but as you can see in the Screenshot, all query params are lost for that refresh, thus resulting in an error on my backend.

ArnaudBarre commented 8 months ago

it would help to have a repro of the issues, even wihtout the auth problem but an example of your setup with the iframe and some file to edit that create the reload issue wihtout params.

Also you should know that if setup correctly, a React Vite app should almost never do a page reload and have and HMR update. Do you see a waning in the logs of the dev server? Take a look at https://github.com/ArnaudBarre/eslint-plugin-react-refresh for detecting issues with your export that could cause Vite to reload the page instead of doing HMR

vitejs / vite-plugin-react-swc

Hot reloading during development always loses query parameters #188