Multipart GraphQL UploadHandler

[tylermmorton]

Hey all! Firstly, loving remix so far. I've been working on building out an app using Remix + GraphQL. This week I spent quite a while working on multipart uploads using GraphQL and I wanted to share my solution in case anyone is riding the same struggle bus or doing something similar. The UploadHandler I created implements jaydenseric/graphql-multipart-request-spec

Here's an image from the spec.

The GraphQL server is implemented using 99designs/gqlgen -- it also supports the spec I mentioned above with just a couple of additional transport settings. (docs)

func (s *server) createGraphqlHandler() http.Handler {
	var mb int64 = 1 << 20

	// Initialize the GraphQL server and configure resolvers
	gqlConfig := graphql.Config{
		Resolvers: &resolver.Resolver{
			// ...
		},
	}

	gqlServer := handler.NewDefaultServer(graphql.NewExecutableSchema(gqlConfig))

	// Enables multipart/form-data file uploads
	gqlServer.AddTransport(transport.POST{})
	gqlServer.AddTransport(transport.MultipartForm{
		MaxMemory:     32 * mb,
		MaxUploadSize: 50 * mb,
	})

	return gqlServer
}

And here's my Remix UploadHandler -- It's rough and could be cleaned up so don't judge 😅 ... I based it off the pre-existing MemoryUploadHandler and extended it to pass the file data in the correct format.

export function createGraphQLUploadHandler({
  headers,
  filter,
  maxPartSize = 3000000,
}: GraphQLUploadHandlerOptions = {}): UploadHandler {
  return async ({ filename, contentType, name, data }) => {
    if (filter && !(await filter({ filename, contentType, name }))) {
      return undefined;
    }

    let size = 0;
    let chunks = [];
    for await (let chunk of data) {
      size += chunk.byteLength;
      if (size > maxPartSize) {
        throw new MaxPartSizeExceededError(name, maxPartSize);
      }
      chunks.push(chunk);
    }

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

    const formData = new FormData();
    const map: { [key: string]: string[] } = {};
    const variables = {
      file: null,
    };

    // the order these fields are appended does matter /!\
    formData.append("operations", JSON.stringify({ query, variables }));

    if (typeof filename === "string") {
      map["0"] = ["variables.file"];
      formData.append("map", JSON.stringify(map));
      formData.append("0", new File(chunks, filename, { type: contentType }));
    } else {
      map["0"] = ["variables.file"];
      formData.append("map", JSON.stringify(map));
      formData.append("0", new Blob(chunks, { type: contentType }), filename);
    }

    const response = await fetch(process.env.GRAPHQL_ENDPOINT, {
      method: "POST",
      body: formData,
      headers: {
        ...headers,
      },
    });

    if (!response.ok) {
      throw new Error("failed to upload file.");
    }

    const responseData = await response.json();
    if (responseData && responseData.data) {
      return responseData.data.uploadFile;
    } else {
      throw new Error("failed to retrieve uploaded file id");
    }
  };
}

and here's the handler in action:

const UPLOAD_FORM_KEY = "img";

type ActionData = {
  errorMsg?: string;
  imgSrc?: string;
  imgUrl?: string;
};

export const action: ActionFunction = async ({ request }) => {
  const session = await authenticator.isAuthenticated(request);
  if (!session) {
    return redirect("/login");
  } else {
    // UPLOAD CODE
    const uploadHandler = composeUploadHandlers(
      createGraphQLUploadHandler({
        headers: {
          Authorization: `Bearer ${session.token}`,
        },
        maxPartSize: process.env.UPLOAD_MAX_PART_SIZE,
      })
    );

    const uploadResponse = await parseMultipartFormData(request, uploadHandler);

    const upload = uploadResponse.get(UPLOAD_FORM_KEY);
    if (upload == null) {
      throw new Error("failed to upload file");
    }

    return json({
      imgSrc: `${process.env.CDN_ENDPOINT}/${upload.toString()}`,
    });
  }
};

export default function Index() {
  const data = useActionData<ActionData>();
  return (
    <>
      <Form method="post" encType="multipart/form-data">
        <input type="file" name={UPLOAD_FORM_KEY} accept="image/*" />
        <button type="submit">upload image</button>
      </Form>
      {data?.errorMsg && <h2>{data.errorMsg}</h2>}
      {data?.imgSrc && (
        <>
          <h2>uploaded image</h2>
          <img alt="uploaded" src={data.imgSrc} />
        </>
      )}
    </>
  );
}

Thanks for checking it out! Hope someone finds this useful! 👍