Uploading to a GraphQL API (Apollo, Rails, Shrine.rb)

Uppy
1

Hi,

I’m working on an app that uses Rails + GraphQL Ruby on the backend, and React + Apollo Client on the frontend. I’m using apollo-upload-client on the frontend to handle multipart GraphQL requests to upload files, and the ApolloUploadServer middleware and Shrine on the backend to receive the files. The plan is for the files to end up on S3 after some processing on the backend, to create thumbnails and so on.

I would like to integrate Uppy into my React application, but I’m not too sure how it would fit into the GraphQL process. Right now I’m building a form that contains a file upload (profile picture) along with some other text fields (profile). From what I understand, I have 3 options:

  1. Upload from Uppy to S3 directly, using presigning (Shrine presign_endpoint plugin), then submit the information about the uploaded file as part of the GraphQL mutation to my server. The server will then fetch the uploaded image from S3, process it (generate thumbnails), etc.
  2. Build a separate endpoint to handle file uploads through XHR. I would rather not do this because the React app I’m building now is just one of the potential future frontends, and I would like to keep to a single API if at all possible.
  3. Build a GraphQL plugin for Uppy to implement the GraphQL multipart request spec.

Am I missing anything? Is there some other obvious way to go about adding Uppy to my process? I would be very happy to read suggestions.

Thank you in advance!

2

Very well said! You could also pass your upload pipeline through Transloadit, using the Transloadit Plugin. This can help you handle your thumbnails generation directly, and help you pass your file down to S3 out of the box. So you won’t have to go through the apollo-upload-client -> ApolloUploadServer -> Shrine -> S3 hassle.

Transloadit is a paid service (albeit, it’s free for students), so this may attract some additional cost for you. But I just thought it was worth mentioning, since you may also find this approach helpful.