Using Typescript in a graphQL server

When you are using typescript you don’t want to get into the land of anys and untyped variables and functions, who would! So to ease your mind when you develop your graphql server (in my case (apollo-server) we can use a couple of tools that help you with this.

Let’s take a look at them.

apollo-cli

Apollo CLI brings together your GraphQL clients and servers with tools for validating your schema, linting your operations for compatibility with your server, and generating static types for improved client-side type safety.

This tool is for generating the schema.json for your API.

If

  • you already have it,
  • want to dynamically introspect it from your API endpoint,
  • or know how to get/build it,

skip to the next tool. If not, continue.

First, installation:

npm install --save-dev apollo-codegen
# Or, with Yarn
yarn add -D apollo-codegen

Then execute or add a npm script with

apollo-codegen introspect-schema path/2/your/schema.graphql --output path/2/your/new/generated/schema.json

This will generate the JSON schema for your API. This is helpful to, for example, validate queries/mutations/subscriptions against it. But that’s is subject of another post (comment on this one if you are interested!).

Now let’s go to what you came for.

graphql-code-generator

GraphQL code generator, with flexible support for multiple languages and platforms, and the ability to create custom generated projects based on GraphQL schema or operations.

This is a pretty complete code generator that has what they call templates, which are like plugins for outputting different code from the graphQL types.

The template that we want is called graphql-codegen-typescript-template.

Let’s start using it:

npm install --save-dev graphql-code-generator graphql-codegen-typescript-template
# Or, with Yarn
yarn add -D graphql-code-generator graphql-codegen-typescript-template

Now, it has many options for generating the types, but what’s important is that all options need

  • the JSON schema of your graphQL API
  • and your .graphql declaration files
# if you have everything
gql-gen --schema path/2/your/schema.json --template typescript --out path/2/your/generated/types.ts path/2/your/new/schema.graphql
# if you don't have the schema and want to get it from the API and/or you have more than 1 .graphql file
gql-gen --schema https://localhost:3000/graphql --template typescript --out path/2/your/generated/types.ts path/2/your/*.graphql

With these commands you will get a file with all the types definitions, resolvers and subscriptions (although there’s a bug in the subscriptions resolvers right now). For resolvers, interfaces are created, that we can use in our code.

What I do is create a separate classes with static functions for mutations, queries and subscriptions. For example:

import { GraphQLResolveInfo } from 'graphql';
import { QueryResolvers, Something } from 'path/2/your/graphql/generated/types';

class MyQueries implements QueryResolvers.Resolvers {
    public getSomething(
        parent: any,
        args: QueryResolvers.GetSomethingArgs,
        context: any,
        info: GraphQLResolveInfo
    ) {
        // use the types here at your convenience
        return new Promise<Something>((resolve, reject) => {
            resolve({
               // object that implements `Something`
            });
        });
    }
}

You can explore the definitions that gql-gen created for you and start using the types and interfaces to type your server code.

I have a couple of other posts in mind, about how to organize graphQL files and typing gRPC in node. Let me know if you’re interested!

Til the next one, Cheers!

Blog Logo

Tomas Alabes

Software Engineer, author, blogger and obsessive learner, from Argentina living in Silicon Valley


Published

Image

Tomas Alabes' Blog

My personal site's blog

Back to Overview