File upload is not working using react-query with graphql in react native

[Gopika-Ramanan]

Mutation: mutation UploadFile($file: Upload!) {
uploadFile(file: $file)
}

Trying to upload an image selected from gallery by using react-native-image-crop-picker

const file = new File([result[0].data], fileName, {type: result[0].mime, lastModified: result[0].modificationDate})

1. result[0].data : base64-encoded string
2. fileName: selected file name
3. type like "image/jpeg"
4. lastModified: modification date from react-native-image-crop-picker

[TkDodo]

not sure what the question here is? If it works without react-query, it should work with react-query. The mutation is just a wrapper that delays the execution of the function until you call mutate, and gives you loading / success / errors states back ..

[evilz]

Upload file in GraphQL should follow those spec : https://github.com/jaydenseric/graphql-multipart-request-spec

I think React query does not handle it by default ??
What is the best way to handle this ?

• Wrapper on the client ? to rewrite the fetch ?
• specific useFileUploadMutation function ?
• other ?

[TkDodo]

react query is not a data fetching library, it's a promise-based, async state manager. It doesn't know anything about graphQL, so whatever question you have about graphQL - react-query doesn't do anything.

so, it entirely depends on what you use for making the actual request. Is it fetch ? Is it graphql-request. Is it urql-core ? Whatever it is - that's where you have to search for your answer.