how to upload image use @urql/vue

[cleveng]

import { useMutation } from '@urql/vue'
const customRequest = async event => {
      const files = event.target.files
      if (files && files.length > 0) {
        console.log(files[0] instanceof File) // true

        try {
          const res = await mutation({
            file: files[0]
          })

          if (res.error) {
            const title =
              res.error?.graphQLErrors[0]?.message ||
              res.error?.networkError?.message ||
              'retry again'
            console.log(title) // Invalid value for argument "file", expected type "Upload"
          }
          // content-type: application/json

          if (res.data?.uploadFile) {
            const data = res.data?.uploadFile
            console.log(data)
          }
        } catch (error) {
          console.log(error)
        }
      }
    }

This mutation failed to execute with the prompt: Invalid value for argument "file", expected type "Upload", which means the content-type of the file was not converted automatically.

However, it works properly in another version implemented with Svelte.

import { mutationStore, getContextClient } from '@urql/svelte'

  const client = getContextClient()
  const mutation = ({ file }: { file: File }) =>
    mutationStore({
      client,
      query: UploadFileDocument,
      variables: { file },
    })

const form = superForm<FormSchema>(
    {
      file: undefined as File | undefined,
    },
    {
      validators: zod4Client(formSchema),
      SPA: true,
      resetForm: false,
      onUpdate: async ({ form: request }) => {
        loading = true

        const isOk = formSchema.safeParse(request.data)
        if (!isOk.success) {
          toast.error('登录失败，请检查表单', {
            id: __TOAST_ID__,
          })
          return
        }

        const file = request.data.file as File
        console.log(file)

        try {
          mutation({ file }).subscribe(res => {
            if (!res.data) {
              toast.error('上传失败，请重试', {
                id: __TOAST_ID__,
              })

              form.reset()
              return
            }

            toast.success('上传成功', {
              id: __TOAST_ID__,
            })
            console.log(res.data?.uploadFile)
          })
        } catch (error) {
          console.error(error)
        }
      },
    }
  )

The Svelte implementation can automatically convert its content-type to multipart/form-data for file upload.

How should I modify it to support file uploads in Vue 3?

[barry166]

@urql/vue should not need a different upload API from Svelte. File upload detection happens in @urql/core: with core v4+, if a File or Blob is present anywhere in variables, the normal fetchExchange switches the request to GraphQL multipart/form-data.

So the mutation call shape is already right:

await mutation({ file: files[0] })

If it still sends content-type: application/json, check that your Vue app is actually using @urql/core v4+ and the standard fetchExchange, and that no custom exchange/fetch wrapper is JSON-stringifying the body or forcing a content-type header. Also make sure the generated mutation variable type is File/Blob, not a serialized object/string.