Replies: 9 comments 43 replies
-
I would also like to set state onSuccess even when the data is cached. I'm setting state such that I can differentiate between resting, loading, fetching more and filtering...if I don't get a callback when the query hits the cache I can't set the state back to resting. I should add that I too am enjoying hooking things up with react-query :) |
Beta Was this translation helpful? Give feedback.
-
Adding my story as a data point in case others stumble upon this behavior as well. const SomeComponent = ({ children }: { children: ReactNode }) => {
const [renderItems, setRenderItems] = useState([])
useQuery(..., {
onSuccess(APIData){
// 🔴 onSuccess will not trigger if data is grabbed from cache
const renderData = util.transform(APIData); // all this does is transform the API data into another format
setRenderItems(renderData) // so of course this doesn't trigger and my component below won't re-render with new daat
}
})
return (
<SomeListComponent items={renderItems} />
)
} When I enabled caching (this applies to the in memory Solution:
The key thing here is that since I am no longer using OnSuccess, I am able to get the data from the cache. const SomeComponent = ({ children }: { children: ReactNode }) => {
const {data: APIData} = useQuery(...)
const renderItems = APIData ? util.transform(APIData): []; ✅ works
return (
<SomeListComponent items={renderItems} />
)
} |
Beta Was this translation helpful? Give feedback.
-
I'm hoping to have some callback regardless of whether it's freshly fetched or retrieved from cache as well. My use is case is to trigger some side effect, e.g. redirect with some default params |
Beta Was this translation helpful? Give feedback.
-
I see the problem when using the for ex: we have switch A x B, what call some endpoint with A or B, and response we consume like only solution I have in mind I have to use useEffect to check if data was updated, but that is not good approach , duple every useQuery with useEffect |
Beta Was this translation helpful? Give feedback.
-
a common situation is: we use a store to share data among components, the store data comes from RQ and can be changed by user action const [complexData setComplexData] = useAtom(complexDataAtom)
const { data } = useQuery(…, {
onSuccess(apiData) {
setComplexData(apiData)
}
})
// component A
setComplexData((draft) => draft.a = someUserValue)
// component B
setComplexData((draft) => draft.b = someUserValue) but if switch the query key a -> b -> a, the store data cannot be set to correct data with queryKey a, still keep the previous data from queryKey b, the only way to keep the data update is useEffect(() => {
setComplexData(data)
}, [data]) it’s so weird, i just need a callback when data fetched, no matter from server or from cache🥲 |
Beta Was this translation helpful? Give feedback.
-
closing discussions is a new thing, but I'll make use of it now. |
Beta Was this translation helpful? Give feedback.
-
亲,你的邮件东阳已经收到了
|
Beta Was this translation helpful? Give feedback.
-
Here is my use case. I'm trying to collect some metrics , and measure the performance improvement from RQ. Beside, I'm using the persister with RQ. and It would be helpful If I can collect the cache rate metrics and adjust the cache strategy. |
Beta Was this translation helpful? Give feedback.
-
Hi!
I used apollo previously on a client project as per the client's request and I really regretted ever doing that. The experience was dreadful, especially when dealing with the cache.
react-query which I then used by my own free will on another project :D has been a breath of fresh air.
However, I do find strange that the
onSuccess
callback is not getting called when the result is retrieved from cache. It's a bit limiting when you try to useonSuccess
andonError
to set state.Could we add that in somehow?
PS: I understand that it's expected behavior based on what the documentation says - but it could be clearer in the docs.
Beta Was this translation helpful? Give feedback.
All reactions