flat-fuchsia

Propagate changes when using `queryClient.setQueryData`

I wanted to use react query as the sole state management of the system I'm working on. for some reason using queryClient.setQueryData even though it updates the data doesn't send an update to affected hooks. Here is my workaround but I doesn't feel nice to use. Is it intended behavior ?

    // Note: This is the only way i've found for the state to propagate when the store changes
    const { data: remoteStore, status: storeStatus } = useQuery({
      queryKey: kStore(context.activity),
      queryFn: () => getProgress({ ctx: context, config }), // Returns the ModuleStore of the server
      cacheTime: 2.628e9, // 2 months
    })
    const [store, setStore] = useState<ModuleStore>(remoteStore ?? {})
    useEffect(() => {
      if (remoteStore && storeStatus === "success") setStore(remoteStore)
    }, [remoteStore])

    // Note: This is the only way i've found for the state to propagate when the store changes
    const { data: remoteStore, status: storeStatus } = useQuery({
      queryKey: kStore(context.activity),
      queryFn: () => getProgress({ ctx: context, config }), // Returns the ModuleStore of the server
      cacheTime: 2.628e9, // 2 months
    })
    const [store, setStore] = useState<ModuleStore>(remoteStore ?? {})
    useEffect(() => {
      if (remoteStore && storeStatus === "success") setStore(remoteStore)
    }, [remoteStore])

7 Replies

extended-salmon•2y ago

Why would you do this useEffect? Why is a dependency missing

flat-fuchsiaOP•2y ago

When you do :

queryClient.setQueryData(kStore(context.activity), () => /* ... */)

queryClient.setQueryData(kStore(context.activity), () => /* ... */)

The changes doesn't propagate to

const { data: remoteStore, status: storeStatus } = useQuery({
      queryKey: kStore(context.activity),
      // ...
})

const { data: remoteStore, status: storeStatus } = useQuery({
      queryKey: kStore(context.activity),
      // ...
})

so to work around this problem, I use a useState coupled to a useEffect since onSuccess is deprecated now. The useState is there to be able to set a value in local and have it update, then I use some mutation not show above to update the progress. I know this looks akward because I'm having a hard time find a solution to my problem with this. Maybe this isn't the right solution at all but I would like to be able to do something along those lines.

foreign-sapphire•2y ago

for some reason using queryClient.setQueryData even though it updates the data doesn't send an update to affected hooks.

show a reproduction of this please; setQueryData definitely should updated affected hooks

flat-fuchsiaOP•2y ago

Ok good to know, here is the example : https://codesandbox.io/p/devbox/heuristic-poitras-jp2xgh?file=%2Fsrc%2FApp.tsx%3A22%2C61 Maybe I forgot to call something else ? But I would really like to avoid invalidating the query as I don't want to refetch the data.

foreign-sapphire•2y ago

I click the button and the number increases. I fail to see what the problem here is? What would you expect to work differently?

flat-fuchsiaOP•2y ago

hmm it didn't work when I sent it, looks weird I'll look into it further Ok it looks like hot reloading breaks it if you try to change the id of the Test component it doesn't update on the dom anymore Should I ask vite guys about it or I need to change something so it can be stable through reloads ? (though in my case it didn't even work with full page reload) https://codesandbox.io/p/devbox/heuristic-poitras-forked-893cnm?file=%2Fsrc%2FApp.tsx%3A66%2C21 the query doesn't get listed anymore in the dev tool as well doing

  const [client] = useState(new QueryClient());

  const [client] = useState(new QueryClient());

in the root of the App seem to resolve this hot reload issue

extended-salmon•2y ago

Yes. This is also an eslint rule. Else you’re cache will be wiped on render

Gaming

Programming

Propagate changes when using `queryClient.setQueryData`

Did you find this page helpful?