Bug when invalidating queries
Hello, I hope you're all doing fine, I'm currently creating an npm package for my work where i'm using react-query to fetch some data. there is one functionality where I have to invalidate query in case of a mutation success. I'm testing my npm package with storybook and it works fine. The problem i'm facing is when i used the npm package in another project sometimes the invalidation doesn't work and the query doesn't fire. Do you have any idea why this is happening? is it related to react-query or to the npm package itself? can you help me?
8 Replies
like-gold•3y ago
Does the data fetching and the invalidation both happen within the npm package? If not, does it share the same queryClient instance with the "host" app?
If you can provide a link to the sources, that would probably help 🙂
sunny-greenOP•3y ago
@julien Yes the data fetching and the invalidation both happen in the npm package. The host app doesn't even use react-query. I'm afraid I can't provide code snippets because it's confidential. But like I said sometimes it works and sometimes it don't on the host app
@julien this is the main component that's being exported :
import { LocalizationProvider } from '@mui/x-date-pickers'
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import React, { Suspense } from 'react'
import Fields from './Fields/Fields'
import { useStore } from './store'
import './../i18n/index'
import { CircularProgress } from '@mui/material'
type Props = {
interface: string
itemId: number
update: number
language: 'en' | 'fr'
apiUrl: string
token: string
}
const CustomFields = (props: Props) => {
const queryClient = new QueryClient()
const setApiUrl = useStore((state) => state.setApiUrl)
const setUpdate = useStore((state) => state.setUpdate)
const setToken = useStore((state) => state.setToken)
setApiUrl(props.apiUrl)
setUpdate(props.update)
setToken(props.token)
return (
<QueryClientProvider client={queryClient}>
<Suspense fallback={<CircularProgress />}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Fields
update={props.update}
interface={props.interface}
itemId={props.itemId}
language={props.language}
token={props.token}
/>
</LocalizationProvider>
</Suspense>
</QueryClientProvider>
)
}
export default CustomFields
like-gold•3y ago
If
CustomFields is imported and used in multiple places, the different <QueryClientProvider> need to share the same QueryClient instance, otherwise they are isolated from each other and don't share the same cache, query instances etc... A naive implementation of that would be to put the queryClient instance as a singleton on the window.
Or you could let the host app wrap their root component in <QueryClientProvider client={queryClient}>. Or expose your own component that calls <QueryClientProvider client={queryClient}> under the hood.sunny-greenOP•3y ago
@julien I've actually added the QueryClientProvider in my host app and still it didn't work. I didn't quite understand the 2 other solutions you provided
like-gold•3y ago
So you have only one QueryClientProvider now or do you still have some inside the package?
sunny-greenOP•3y ago
@julien I had 2 query clients when I tried it but I removed the one inside the npm package and It worked but it used to work sometimes before I tried this solution so I still have to test it do you think it might be the solution?
like-gold•3y ago
Yes, you need a single queryClient instance for this to work. Otherwise, you'll have multiple caches that will ignore each other. You can have multiple
<QueryClientProvider> though that's fine, as long as they share the same queryClient.
So you can either:
- move the <QueryClientProvider> fully to the host app and remove it from the package
- Or keep multiple <QueryClientProvider> inside the package (like it was) but they have to share the same queryClient instance. For example, when initializing your package, you can create the queryClient and put it on the window: window.yourPackageQueryClient = new QueryClient(). And then rewrite the QueryClientProviders: <QueryClientProvider client={window.yourPackageQueryClient} /> (that's an example, there are other ways than putting it on the window, you could also have it in one module and import it in different places).
Similar issue: https://discord.com/channels/719702312431386674/1077795832872570901/1077989241608474725sunny-greenOP•3y ago
@julien thanks alot for the help Julien it's working now .