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
Sturlen
Sturlenβ€’10mo ago
what specific features are you looking for in react-query that you aren't getting with fetch?
Justus
Justusβ€’10mo ago
Mostly all the nice parts of react query like isLoading, onSuccess, onSettled. I don’t want to write all of that using react hooks
Sturlen
Sturlenβ€’10mo ago
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
Justus
Justusβ€’10mo ago
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.
No description
Sturlen
Sturlenβ€’10mo ago
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
Want results from more Discord servers?
Add your server