Use React Query + Fetch for file upload
Hey there, I'm using Cloudflare's presigned URL to upload files. To upload the file I'm using the fetch API. How can I use react query for that fetch action? React Query works seamlessly with trpc, but how can I make it work for a good old fetch or axios request?
I couldn't find a question like this before. If it does exist, please point me to the thread! Thanks everyone for your help in advance 🙏🙌
5 Replies
what specific features are you looking for in react-query that you aren't getting with fetch?
Mostly all the nice parts of react query like isLoading, onSuccess, onSettled. I don’t want to write all of that using react hooks
a react-query mutation might be what you're looking for then. A mutation can be started when the user starts an upload and gives you a nice way to tell if the upload has finished, failed, etc. : https://tanstack.com/query/v4/docs/framework/react/reference/useMutation
useMutation | TanStack Query Docs
const {
data,
Yes definitely, and that's what I tried. But when using
useMutation I'm getting this error. I think it's because React Query is set up differently in t3.
could you post the code for the full component? I think there might be an issue with passing to many arguments to the
mutationFn, but it's hard to tell without the full context