Using GraphQL Code Generator (TypeScript) with Apollo

Let’s say you have a GraphQL API and now you want to start accepting file uploads. This is possible using the following the Upload Scalar type from graphql-upload, as detailed here https://www.apollographql.com/docs/apollo-server/data/file-uploads/ (keep in mind you will need to use the graphql-multipart-request-spec to actually upload files, as explained here https://github.com/jaydenseric/graphql-multipart-request-spec)

However, when using GraphQL Code Generator with TypeScript you might run into an issue with the Upload scalar type as this is not a default GraphQL scalar type. To fix this we will need to add 2 things:

1. Update the schema to accept the scalar Type

First off we need to tell the schema the scalar type actually exists. We can do this by simply adding scalar Upload to the top of the schema file.

2. Update the codegen configuration

Now we need to update our configuration so it will use the correct typing for the newly defined scalar type. We can do this by using the scalars configuration key. (as can be found here https://graphql-code-generator.com/docs/plugins/typescript)

The simplest way to configure this is as follows:

config:
scalars:
Upload: import('graphql-upload').FileUpload

All set! Now the resulting code generation will have something like this:

export type Scalars = {
...
Upload: import('graphql-upload').FileUpload;
};

This will way you can make your custom file upload resolvers completely type safe!

--

--

--

Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Customizing environment variables in React

Image result for create-react-app

10 of Javascript String Methods, All you need to know.

Subtle differences between Javascript DOM properties

How well do we know about React JS? Let’s dive to see

The angle made by two lines is called? (CSS MPT 2022)

Four JavaScript Design Patterns in React

Obtain Bronze Rates Using JSON API

A Step-By-Step Guide to Creating a Twitter Clone With React and Supabase — Part 2

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Liam Martens

Liam Martens

Developer

More from Medium

Authentication made easy with NestJS — part 4 of how to build a GraphQL + MongoDB…

Using DotEnv Config Files in TypeScript

Going TypeStack with NX Monorepo and Docker (Part 1)

How to Handle Objection.Js