T
TanStack•2y ago
sunny-green

HMR/Vite hot code reload clears entire cache

I'm using react-query in a pretty standard vite/react. I was having issues when updating the query cache using setQueryData after running a mutation, so I used the dev tools to look at the query data. It seems like after every Hot Module Reload triggered by vite, the entire query cache is wiped, and even though my interface still displays the data, calls to setQueryData will no longer affect it (oldData, the first argument to the update function, is always undefined, even if the data is currently being displayed on screen), and the devtools won't show any queries in the cache at all. I haven't found any information about how this is supposed to work - is this expected behavior or am I missing something? I can provide more data about my setup and configuration files if needed, but it's pretty much taken straight from the examples.
8 Replies
robust-apricot
robust-apricot•2y ago
Can you show how you wrote your queryClient?
sunny-green
sunny-greenOP•2y ago
Sure, this is in my App.tsx (Some providers removed for brevity): 
import { queryClient } from "./queries"

export const Providers: FC<PropsWithChildren> = props => (
    <QueryClientProvider client={queryClient}>
        <ReactQueryDevtools initialIsOpen={false} />
        {props.children}
    </QueryClientProvider>
)
import { queryClient } from "./queries"

export const Providers: FC<PropsWithChildren> = props => (
    <QueryClientProvider client={queryClient}>
        <ReactQueryDevtools initialIsOpen={false} />
        {props.children}
    </QueryClientProvider>
)
And this is in queries.ts: 
export const queryClient = new QueryClient()
export const queryClient = new QueryClient()
Could it be the fact that I'm importing it from another file?
robust-apricot
robust-apricot•2y ago
The export should be fine. Maybe how you're using this Providers component is causing unwanted renders?
sunny-green
sunny-greenOP•2y ago
This is how it's used, I don't see how anything could rerender here: 
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { App, Providers } from "~/App"

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <Providers>
            <App />
        </Providers>
    </StrictMode>,
)
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { App, Providers } from "~/App"

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <Providers>
            <App />
        </Providers>
    </StrictMode>,
)
Am I correct in assuming that my situation is not expected behavior, though? That's something already, I can try to narrow down at what point it occurs then :-)
robust-apricot
robust-apricot•2y ago
I just tried quickly in our app because it sounds like we have very similar setups. An HMR didn't wipe my queryCache so I'm not sure off the top of my head
sunny-green
sunny-greenOP•2y ago
Alright, good to know. I'll try to boil it down and see where it's going wrong, I'll report back if I find anything.
robust-apricot
robust-apricot•2y ago
Yeah at this point is when you usually get the dreaded response "show a codesandbox reproduction"
sunny-green
sunny-greenOP•2y ago
Haha don't worry, I expected as much, just wanted to make sure it's not a known limitation before I sink work into debugging it

Did you find this page helpful?