Using absinthe with urql to upload files gives me `No query document supplied`

qwexvf · March 13, 2025, 7:14am

No Query Document Supplied Error with File Upload in Phoenix/Absinthe + React/Urql

I’m encountering a “No query document supplied” error when implementing file uploads using Phoenix/Absinthe with React/Urql. The error occurs when attempting to upload an image using the built-in multipart upload functionality in @urql/core@4.

Setup

Backend (Phoenix/Absinthe):

plug Plug.Parsers,
  parsers: [:urlencoded, :multipart, :json, Absinthe.Plug.Parser],
  pass: ["*/*"],
  json_decoder: Jason

# Schema Definition
field :upload_file, :string do
  arg(:users, non_null(:upload))
  arg(:metadata, :upload)
  resolve(fn args, _ ->
    # this is a `%Plug.Upload{}` struct
    args.users
    {:ok, "success"}
  end)
end

Frontend (React/Urql):

github.com/urql-graphql/urql

examples/with-multipart/src/FileUpload.jsx

main

import React, { useState } from 'react';
import { gql, useMutation } from 'urql';

const UPLOAD_FILE = gql`
  mutation UploadFile($file: Upload!) {
    uploadFile(file: $file) {
      filename
    }
  }
`;

const FileUpload = () => {
  const [selectedFile, setSelectedFile] = useState();
  const [result, uploadFile] = useMutation(UPLOAD_FILE);

  const { data, fetching, error } = result;

  const handleFileUpload = () => {
    uploadFile({ file: selectedFile });
  };

This file has been truncated. show original

Error Response

{
  "errors": [
    {
      "message": "No query document supplied"
    }
  ]
}

Environment

Phoenix + Absinthe (Backend)
React + Urql (Frontend)
Using @urql/core@4 with built-in multipart upload support

I’ve verified that:

The multipart parser is properly configured in Phoenix
The schema definition matches the urql example
The frontend implementation follows the official urql example

Any guidance on resolving this error would be appreciated.

qwexvf · March 13, 2025, 11:35am

just found out this absinthe-upload/lib/absinthe/upload.ex at master · shavit/absinthe-upload · GitHub

im goona try this