Using fetchExchange and @urql/exchange-multipart-fetch for a Form with Next.js

[sa-webb]

I am using urql in a Next.js app and I'm a bit confused about how to use the fetchExchange and the multipart-fetch-exchange for a single form that collects both text and media data. Unfortunately, I cannot find any examples and I'm having trouble "thinking in urql."

Here is my approach (open to criticism): I have two separate resolvers for the form - profileResolver and avatarResolver.

First, a user inputs their name, then upload an avatar image - triggering the mediaResolver that returns a Cloudinary url string. After, the user populates the remaining fields making the form is valid for submission - triggering the profileResolver.

Currently, I have my form page wrapped with only a fetchExchange client and it's working perfectly (without media).
export default withUrqlClient(createUrqlClient, { ssr: false })(ProfileForm);

So in order for me to be able to upload media, do I need to isolate and wrap the Avatar component in its own multipart-fetch exchange? Or is there a way to optionally pass the multi-part-exchange e.g. {multipartFetchExchange: true} in the page exchange and they work collectively?

Thanks in advance for any help!

[kitten]

Typically, as we'd expect that only one client or client config to be used, exchanges are designed as a pipeline and not per-component plugins.

https://formidable.com/open-source/urql/docs/advanced/persistence-and-uploads/#file-uploads

[...] which is a drop-in replacement for the default fetchExchange [...]
When the multipartFetchExchange sees at least one File in the variables it receives for a mutation, then it will send a multipart/form-data POST request instead of a standard application/json one.

Ergo it behaves like the normal fetch exchange and will otherwise switch as needed to support file uploads

[sa-webb]

Thank you for the help! Clearly, I confused myself somewhere along the way. Cheers