T
TanStack•3y ago
plain-purple

Blobs

Is it possible to cache blobs?
15 Replies
complex-teal
complex-teal•3y ago
Hi 👋 I'd imagine so, yeah. Have you tried it?
plain-purple
plain-purpleOP•3y ago
yes. I have been trying for quite a while, and the query always tries to fetch the data instead of caching. Investigating the cache it self I can see that nothing is saved to my surprise.
quickest-silver
quickest-silver•3y ago
Hi do you have a codesandbox ?
complex-teal
complex-teal•3y ago
A sandbox would be useful here as above 🙂
plain-purple
plain-purpleOP•3y ago
HadiSDev
CodeSandbox
morning-wind-ptw4d6 - CodeSandbox
morning-wind-ptw4d6 by HadiSDev using @tanstack/react-query, @tanstack/react-query-devtools, axios, react, react-dom
plain-purple
plain-purpleOP•3y ago
So basically fetch is called all the time
fair-rose
fair-rose•3y ago
How do you see fetched is called all the time in your sandbox? I forked it to add another component relying on the same query and the data is loaded from cache: https://codesandbox.io/s/polished-haze-srpo49?file=/src/hooks.jsx
juliendelort
CodeSandbox
polished-haze-srpo49 - CodeSandbox
polished-haze-srpo49 by juliendelort using @tanstack/react-query, @tanstack/react-query-devtools, axios, react, react-dom
plain-purple
plain-purpleOP•3y ago
2 sec
quickest-silver
quickest-silver•3y ago
I'm not sure what to expect. The queryFn returns the blob, so the blob is stored in the cache. The fact that the DevTools displays an empty Object as data might be a display issue.
No description
quickest-silver
quickest-silver•3y ago
And here
No description
quickest-silver
quickest-silver•3y ago
Since the data of the query IS the blob, then data.name would not work
plain-purple
plain-purpleOP•3y ago
It is true I can see the cache tag in the network tab. Let me see if I can see it in my project So I still have the issue. I am wondering if the cat image is cached because of react query or just standard browser image caching. How does query handle blobs in storage?
quickest-silver
quickest-silver•3y ago
console.log(queryClient.getQueryData(["something", "thumbnail", "1234"])); You could add something like this in your index file I'm still not sure what is the issue here. The query is fine, blob is cached, staleTime is 3000000 so query data will remain for a while => no additional call to fetch the image. And yes, you could also benefit from browser caching
plain-purple
plain-purpleOP•3y ago
thanks. That made it a bit easier for me to see. Sorry for wasting time. I appreciate your help guys
quickest-silver
quickest-silver•3y ago
no pb

Did you find this page helpful?