Upload files in NestJS & GraphQL

The challenge with uploading files with GraphQL is that GraphQL isn't friendly for handling multipart requests and a bit of configuration is needed. There might be a better approach out there, nevertheless, I'll show you my way that gets things done.

Note

You can decide to use the Apollo version to navigate around the security restrictions introduced on version 4 e.g. Cors, CSRF, etc

You should have a basic NestJS project setup, you can choose to follow along on NestJS 101.

Follow along on the GitHub repo, note that this is a focus on NestJS GraphQL only. This repo contains other parts as well.

Getting Started

Set up a basic NestJS project. You can skip this part if you already set up the project.

On your terminal:

You should have a folder structure like this:

Now let's configure GraphQL and Apollo server(Apollo helps in data fetching & management). Also, let's do a quick setup for file upload. We need graphql-upload package to manage file upload into our app. Also, you've to configure this as a middleware to enable files to be integrated into the GraphQL URL/environment.

Install the following dependencies:

In the app.module.ts file, configure graphql-upload to be used by the app

In the app.module.ts , make sure to put the default uploads: false and disable default playground(playground will depend on the version of apollo-server you've installed, for me am using version 4). Also at the export of app, configure the Middleware to manage file uploads

Now, that we are done with the configurations, the complex part is over, let's go to the sweet stuff, file uploads.

Create new filesUpload module using nestjs-cli

Once, the above is done, then filesUploadModule should be in the app.module.ts.Now, let's create the necessary mutations. We need to upload files to AWS S3, and Cloudinary and save files from the frontend to the backend folder. Make sure to rely on graphql-upload to manage the file types.

Am going to use streams to manage file uploads, especially large file. Files have CreateReadStream from the file system that helps to read files in chunks rather than the entire file, check out this article on readable streams.

Then finally, we can create the service to now manage the file uploads to the residential location. Make sure to configure the AWS Key and secret key using AWS SDK, and Cloudinary credentials. Instead of 3 functions/mutations, you can have one mutation then have a variable identifier to upload to specific platform using conditional statements

The backend part is now complete and we can upload files. Start the backend:

Your graphql playground should look something like this, once you select the mutation, then there's files to select on the variables input

We shall connect to the frontend on our next series, stay tuned