DEV Community: murat

Creating Nextjs JWT token using LDAP for Authentication & Authorization & use it in Nestjs GraphQL backend

murat — Sun, 26 Dec 2021 13:18:28 +0000

Introduction

In our new project, we're creating a GraphQL backend using Nestjs which is a wonderful framework for Nodejs. Our frontend app is in Nextjs. Awesome Reactjs framework. The React Framework
for Production as they say! Nextjs has built in api route feature. In which we can implement our authentication module where we create JWT. We use next-auth for authentication in Nextjs. It provides the same functionalities in server side and client side rendering.

Since we're in an enterprise environment, we need to use our own Active Directory. So, we're supposed to implement an LDAP authentication flow. Moreover, we want to use the same JWT both for authentication and authorization. Since we can add custom claims to our JWT, it's quite reasonable to use it for authorization as well.

Eventually, we'll be using graphql queries and mutations. So, we need to implement authorization in our graphql resolvers. Our resolvers are supposed to be able to authorize the JWT created by Nextjs. But, our backend (nestjs) uses passportjs for authentication! Can we really do it? Yess :-)

You can find both finished backend and frontend projects in Github.

Internal details of both projects are beyond the scope of this article. We solely focus on our major goal.

Running existing projects

My node & npm versions are 14.17.2 & 8.1.3 respectively.

GraphQL backend

After you clone backend project checkout 06-auth branch. Please clean your npm cache. I needed to run npm cache clean -f. You may need to do the same. Then npm install. You need to create a postgresql database. You can eighter use an existing one or ,if you have docker desktop installed, you can just use the existing docker compose file in the root directory of the project. Just run docker-compose up

Existing .env file contains database info;

DB_NAME=countrydb
DB_HOST=localhost
DB_PORT=5432
DB_USERNAME=postgres
DB_PASSWORD=postgres

If your db is ready, you need to run the database migrations. Npm sripts for migrations are ready to use. Just run yarn migration:run If everything went alright, you're supposed to have a countrydb filled with sample data. Just run yarn start:dev. You must have a running graphql backend on http://localhost:3100/graphql

Nextjs frontend

After you cloned frontend project, just run npm install and yarn dev. When the project runs, navigate to http:\\localhost:3000. You must see login page;

Authentication in Nextjs

Using LDAP

Please check .env file in the root directory. It contains necessary LDAP info. If you'd like to do LDAP authentication, read on. Otherwise proceed to next section.

GRAPHQL_URL_CLIENT=http://localhost:3100/graphql
GRAPHQL_URL_SSR=http://localhost:3100/graphql
TOOLBAR_COLOR='red'
LDAP_HOST=<your-ldap-host>
LDAP_DN=<your-ldap-dn>
LDAP_PASSWORD=<your-ldap-password>
LDAP_BASE_DN=<your-base-dn>
TOKEN_MAX_AGE=3600
TOKEN_SECRET=topSecret71

It's a common Nextjs pattern to use a catch-all api route for authentication;

pages/api/auth/[...nextauth].ts

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import ldap from 'ldapjs';
import jwt from 'jsonwebtoken';
import { JWT } from 'next-auth/jwt';

async function authenticate(username: string, password: string) {
  const client = ldap.createClient({
    url: process.env.LDAP_HOST as string,
  });

  const entries: ldap.SearchEntry[] = [];

  return new Promise((resolve, reject) => {
    client.bind(
      process.env.LDAP_DN as string,
      process.env.LDAP_PASSWORD as string,
      (error) => {
        if (error) {
          reject('LDAP bound failed');
        } else {
          const opts: ldap.SearchOptions = {
            filter: `(&(sAMAccountName=${username}))`,
            scope: 'sub',
            attributes: ['dn', 'sn', 'cn', 'sAMAccountName'],
          };

          client.search(
            process.env.LDAP_BASE_DN as string,
            opts,
            (err, res) => {
              if (err) {
                reject(`User ${username} LDAP search error`);
              } else {
                res.on('searchRequest', (searchRequest) => {
                  //console.log('searchRequest: ', searchRequest.messageID);
                });
                res.on('searchEntry', (entry) => {
                  entries.push(entry);

                  client.bind(entry.dn, password, (err, res) => {
                    if (err) {
                      reject(`User ${username} username or password problem`);
                    } else {
                      resolve({
                        username,
                        password,
                      });
                    }
                  });
                });
                res.on('searchReference', (referral) => {
                  //console.log('referral: ' + referral.uris.join());
                });
                res.on('error', (err) => {
                  reject('LDAP SEARCH error');
                });
                res.on('end', (result) => {
                  if (entries.length == 0) {
                    reject(`User ${username} username or password problem`);
                  }
                });
              }
            }
          );
        }
      }
    );
  });
}

export default NextAuth({
  secret: process.env.TOKEN_SECRET,

  jwt: {
    secret: process.env.TOKEN_SECRET,
    encode: async (data: any) => {
      const { secret, token, maxAge } = data;
      const jwtClaims = {
        username: token.username,
        rights: token.rights,
      };

      const encodedToken = jwt.sign(jwtClaims, secret, {
        expiresIn: '1h',
        algorithm: 'HS512',
      });
      return encodedToken;
    },
    async decode(data: any) {
      const { secret, token, maxAge } = data;
      const verify = jwt.verify(token, secret) as JWT;

      return verify;
    },
  },
  session: {
    jwt: true,
    maxAge: parseInt(process.env.TOKEN_MAX_AGE as string),
  },
  callbacks: {
    async jwt(token, user) {
      if (user?.username) {
        token.username = user.username;
        token.rights = ['removeCity'];
      }

      let expSeconds = token.exp as number;

      return token;
    },

    async session(session, token) {
      session.type = token.type;
      session.username = token.username;
      session.rights = token.rights;

      return session;
    },
  },
  providers: [
    Providers.Credentials({
      name: 'LDAP',
      async authorize(credentials: any, req) {
        const { username, password } = credentials;

        if (!username || !password) {
          throw new Error('enter username or password');
        }
        try {
          await authenticate(username, password);
          return {
            username,
          };
        } catch (error) {
          console.log(error);
          throw new Error(error as string);
        }
      },
    }),
  ],
});

Basically, we're creating our NextAuth module here. In providers array, we declare that we're using Credentials. NextAuth has tons of providers, you can pick any. Here we'll be creating JWT using username & password. So, we use Credentials provider. We supply our own authorize method here. It encapsulates username & password handling and LDAP logic.

In session part, we declare to use JWT and setting maxAge of our token in seconds. We set it to 3600 seconds in .env file.

In jwt part, we set the secret. Secret is very important and should be kept somewhere safe. We'll be deploying to Kubernetes. So, kubernetes secrets is the place to keep it. Our GraphQL backend will be using the same secret to verify the token. We need to override the default encode & decode mechanisms of NextAuth. That's why we use jsonwebtoken. While encoding our token we should supply algorithm as below. The same algorithm is supposed to be used in GraphQL resolvers by Passportjs;

const encodedToken = jwt.sign(jwtClaims, secret, {
  expiresIn: '1h',
  algorithm: 'HS512',
});

Callbacks part is important. jwt callback is called when a token is created or updated. We add our username and rights claims here. session callback is called when a session requested by the client. You're supposed to add the data to return to client. Not the sensitive ones of course!

authenticate method contains ldap query logic. What it does is to create an ldap client using process.env.LDAP_HOST and bind this client using process.env.LDAP_DN & process.env.LDAP_PASSWORD. If successfully bound, search on the client using process.env.LDAP_BASE_DN and custom filter options. If an entry found, searchEntry event raised. Then we bind the found entry again using found entry's dn and supplied password;

client.bind(entry.dn, password, (err, res) => {
  if (err) {
    reject(`User ${username} username or password problem`);
  } else {
    resolve({
      username,
    });
  }
});

If successfull, then resolve.

If You Don't want to bother with LDAP, just craete a JWT and use it

If LDAP search doesn't interest you, you're welcome. Just replace authenticate method with the one below. No password check will be carried out, just a JWT will be created.

async function authenticate(username: string, password: string) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        username,
        password,
      });
    });
  });
}

Let's try to login with any dummy username & password. You're supposed to see below;

Congratulations! You can test viewing countries & cities and also add city and country. Also please test you can logout and login again.

What about our JWT

Please open your browser's developer tools. I'm using Chrome. In Application tab you can see next-auth.session-token cookie as below;

As you see, next-auth keeps the token in a HttpOnly cookie against cross side scripting. You can also see its expiration time. Let's copy the value of the cookie and navigate to https://jwt.io/ and past our token;

You can see the header and the payload of our token. As you may notice, our token marked as 'InvalidSinature'. Because we did not supply a secret. Let's enter our secret, topSecret71 the one which we use when we create our token, and then paste the token again. It's verified now;

Let's Protect our removeCity & removeCountry Mutations in our GraphQL Backend

You can check our GraphQL schema in http://localhost:3100/graphql We have various city and country related queries and mutations. What needs to be protected here is only removeCity & removeCountry mutations. We don't want to impose any authorization on other mutations, only these two of them concern us.

So, we created an auth module in our Nestjs app. First, we add JwtStrategy;

src/auth/jwt.strategy.ts

import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { ExtractJwt, Strategy } from 'passport-jwt';

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      secretOrKey: process.env.TOKEN_SECRET,
      algorithms: ['HS512'],
    });
  }

  async validate(payload: any): Promise<any> {
    return payload;
  }
}

In our backend we'll be expecting to receive the token in request header as bearer token. We're using the same token & algorithm as we create the token on frontend.

src/auth/auth.module.ts

@Module({
  imports: [
    ConfigModule.forRoot(),
    PassportModule.register({ defaultStrategy: 'jwt' }),
    JwtModule.register({
      secret: process.env.TOKEN_SECRET,
      signOptions: {
        expiresIn: '1h',
        algorithm: 'HS512',
      },
    }),
  ],

  providers: [AuthService, JwtStrategy],
  exports: [JwtStrategy, PassportModule],
  controllers: [AuthController],
})
export class AuthModule {}

Here we register PassportModule and export JwtStrategy, PassportModule

We use Nestjs guard machanism to check if the request has a valid token. Let's create jwt-auth guard;

src/auth/jwt-auth.guard.ts

import { ExecutionContext, Injectable } from '@nestjs/common';
import { GqlExecutionContext } from '@nestjs/graphql';
import { AuthGuard } from '@nestjs/passport';

@Injectable()
export class JwtAuthGuard extends AuthGuard('jwt') {
  getRequest(context: ExecutionContext) {
    const ctx = GqlExecutionContext.create(context);
    const req = ctx.getContext().req;
    return req;
  }
}

If jwt is valid, then we're creating a request from GraphQL execution context. Thank you NestJS :-) Eventually we use this guard in our resolvers to protect sensitive mutations;

src/country/country.resolvers.ts

.
.
.
 @Mutation(() => Int, { nullable: true })
  @UseGuards(JwtAuthGuard)
  removeCountry(
    @GetUser() user: any,
    @Args('id', { type: () => Int, nullable: false }) id: number,
  ) {
    return this.countryService.remove(id);
  }
  .
  .
  .

Authorizing Routes, Checking Rights

Authentication is done. Now we need to check the authenticated JWT if it contains the necessary right claim to run our sensitive mutations. Let's create user decorator;

src/auth/get-user.decorator.ts

import {
  createParamDecorator,
  ExecutionContext,
  UnauthorizedException,
} from '@nestjs/common';
import { GqlExecutionContext } from '@nestjs/graphql';

export const GetUser = createParamDecorator(
  (data, context: ExecutionContext) => {
    const fieldName = context.getHandler().name;

    const ctx = GqlExecutionContext.create(context).getContext();
    const user = ctx.req.user;
    const rights = user.rights as string[];

    if (!rights.includes(fieldName)) {
      throw new UnauthorizedException(`You must have ${fieldName} right`);
    }

    return user;
  }
);

In createParamDecorator we have ExecutionContext. Initially we obtain the actual handler's name. i.e., actual query or mutation name. We name it fieldName. After that, we created our execution context. Which contains the request object. This request object has user object that has the token info;

const ctx = GqlExecutionContext.create(context).getContext();
const user = ctx.req.user;
const rights = user.rights as string[];

Now the last thing to do is to check if the rights array of the user object has a right with the same name ar our handler. If not, throw UnauthorizedException. Eventually we use the user decorator in relevant mutation declarations in the rosolvers;

.
.
.

  @Mutation(() => Int, { nullable: true })
  @UseGuards(JwtAuthGuard)
  removeCountry(
    @GetUser() user: any,
    @Args('id', { type: () => Int, nullable: false }) id: number,
  ) {
    return this.countryService.remove(id);
  }
  .
  .
  .

  @Mutation(() => Int, { nullable: true })
  @UseGuards(JwtAuthGuard)
  removeCity(
    @GetUser() user: any,
    @Args('id', { type: () => Int, nullable: false }) id: number,
  ) {
    return this.cityService.remove(id);
  }
  .
  .
  .

We've set authorization check for removeCity & removeCountry mutations. Apart from having a valid JWT, a user is supposed to have necessary rights to execute them as well. Please recall that we'd supply a rights array in next-auth callback;

token.username = user.username;
token.rights = ['removeCity'];

Here we manually add one single right just to demonstrate. Ideally, the relevant rights of the authenticated user should be collected from maybe a database.
With this configuration, we're supposed to be able to remove a city. However, when we try to remove a country, we're expecting to receive a 401, Unauthorized error. Let's give it a try. First, you can add one country;

And add a city;

Now, navigate to cities page. Cannes should be in the list. Delete it by clicking the delete icon. It should disappear from the list.
Now, navigate to countries page. Andorra should be in the list. Try to delete it. You're supposed to see below warning;

Final words

If we're developing production ready apps, for both Nodejs & Reactjs environments, we absolutely need solid frameworks. Both Nextjs and Nestjs are awesome. You don't need to invent wheel. Just pick the best solution and use it!.

As a GraphQL developer, Nestjs makes you feel really at home!

In this article, our particular goal was to use the same JWT created by next-auth in both backend & frontend.

That was fun 😎

Creating GraphQL Api Using NestJS For Multiple Databases

murat — Fri, 05 Nov 2021 06:08:23 +0000

About GraphQL

In recent years GraphQL has become very popular due to major advantages it offers against well known REST. Briefly,

It eliminates over fetching & under fetching problems in REST
With GraphQL, we don't need to version or api as in REST
GraphQL imposes an opinionated structure which easily leads to standardization whithin teams
Although this article is on creating an api, GraphQL is the best friend of frontend developers. The idea behind is to let the UI component decide its data reqirements and send a query to GraphQL to fetch exactly what it needs.

You can refer to graphql-at-paypal-an-adoption-story for a well detailed story

About NestJS

Javascript developers loved Nodejs. Number of projects with Nodejs is getting heigher every day. Using the same language in frontend and also in backend is really awesome. Today we can create our web projects in much more isomorphic manner. This really reduce impedance mismatch between these two worlds.

If we scaffold a barebone development environment, we need to solve many cross-cutting concerns by ourselves. So, using a framework saves us from these headaches.

NestJS is a popular NodeJS framework. It has received near 1 million weekly download on npm and is being used in many projects. So, we can easily say that it's battle tested. It uses typescript out of the box. To me, it's very important for a reliable development framework.

NestJS has good documentation NestJS. You can also read for more detail on NestJS's advantages why-choose-nest-js-over-other-node-frameworks

Let's start

You can find the completed project in Github in branch 07-legacydb

We'll create a countries GraphQL api. Our data model shown below

One country has many cities
One city belongs to only one country
One country can join many treaties
One treaty has many countries

As can be noted, while there is a one-to-many relation between country & city, there is a many-to-many relation between country & treaty

Project creation

NestJS has a very practical cli. For many tasks we'll be using it. Initially we need to install NestJS globally

npm install -g @nestjs/cli after installation we can check the version nest -v
To create a new project nest new countries-graphql. It'll ask your preferred package manager utility (npm or yarn) that's all.

Let's open countries-graphql directory (preferably in VSCode). As you see, a full featured project structure created. No need to bother with linting or typescript. Let's delete test directory, src\app.controller.spec.ts, src\app.controller.ts. Our initial project looks like below

We should be able to run with yarn start:dev

In package.json file's script part has all the necessary scripts ready for starting or building the project. Very nice, we don't need to bother about watching changes etc...

As seen, there are src\app.module.ts and src\app.service.ts. NestJS imposes a module bases structure. While our application itself is a module, all our business logics will be in their own module. This leads to clean domain structure and all business logic will be created in its own service.

GraphQL Code First

There are two approches for creating GraphQL schema;

Schema / SDL (Schema Definition Language) first
Code first

In the first approach, you define your GraphQL schema in SDL. Then you generate stub resolvers and add your code there.
The second approach is based on generating the schema from your code. i.e., you're not writing any SDL here. Code first is more developer friendly and we'll be following code first in this article.

Let's install some packages;

yarn add graphql @nestjs/graphql apollo-server-express

We'll add country, city and treaty modules. nest cli is very clever and lets you create various resource types. You see the list with nest --help

      ┌───────────────┬─────────────┬──────────────────────────────────────────────┐
      │ name          │ alias       │ description                                  │
      │ application   │ application │ Generate a new application workspace         │
      │ class         │ cl          │ Generate a new class                         │
      │ configuration │ config      │ Generate a CLI configuration file            │
      │ controller    │ co          │ Generate a controller declaration            │
      │ decorator     │ d           │ Generate a custom decorator                  │
      │ filter        │ f           │ Generate a filter declaration                │
      │ gateway       │ ga          │ Generate a gateway declaration               │
      │ guard         │ gu          │ Generate a guard declaration                 │
      │ interceptor   │ in          │ Generate an interceptor declaration          │
      │ interface     │ interface   │ Generate an interface                        │
      │ middleware    │ mi          │ Generate a middleware declaration            │
      │ module        │ mo          │ Generate a module declaration                │
      │ pipe          │ pi          │ Generate a pipe declaration                  │
      │ provider      │ pr          │ Generate a provider declaration              │
      │ resolver      │ r           │ Generate a GraphQL resolver declaration      │
      │ service       │ s           │ Generate a service declaration               │
      │ library       │ lib         │ Generate a new library within a monorepo     │
      │ sub-app       │ app         │ Generate a new application within a monorepo │
      │ resource      │ res         │ Generate a new CRUD resource                 │
      └───────────────┴─────────────┴──────────────────────────────────────────────┘

We'll create our modules as resource. Use the command nest g resource country --no-spec We're not creating tests in this article, so --no-spec flag prohibits test files from being generated

nest cli asks what kind of resource to ceate. As you can see, NestJS offers wide variaty of options. Let's pick GraphQL code first

Then we'be asked wether to ceate CRUD end points. Select yes.

Would you like to generate CRUD entry points? (Y/n)

Eventually, our country module has beed created. It's a full fledged module with its service, resolver, entities, dto.

NestJS added CountryModule added to app module as import. Every modules should be imported by app module;

src/app.module.ts

import { Module } from '@nestjs/common';
import { AppService } from './app.service';
import { CountryModule } from './country/country.module';

@Module({
  imports: [CountryModule],
  providers: [AppService],
})
export class AppModule {}

We need to import GraphQLModule in app.module.ts and tell it we're using code first;

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { join } from 'path';
import { AppService } from './app.service';
import { CountryModule } from './country/country.module';

@Module({
  imports: [
    GraphQLModule.forRoot({
      autoSchemaFile: join(process.cwd(), 'schema.gql'),
    }),
    CountryModule,
  ],
  providers: [AppService],
})
export class AppModule {}

Let's run with yarn start:dev. If everything goes well, your app should be running and schema file should be generated;

src/schema.gql

# ------------------------------------------------------
# THIS FILE WAS AUTOMATICALLY GENERATED (DO NOT MODIFY)
# ------------------------------------------------------

type Country {
  """Example field (placeholder)"""
  exampleField: Int!
}

type Query {
  country(id: Int!): Country!
}

type Mutation {
  createCountry(createCountryInput: CreateCountryInput!): Country!
  updateCountry(updateCountryInput: UpdateCountryInput!): Country!
  removeCountry(id: Int!): Country!
}

input CreateCountryInput {
  """Example field (placeholder)"""
  exampleField: Int!
}

input UpdateCountryInput {
  """Example field (placeholder)"""
  exampleField: Int
  id: Int!
}

This is our schema file generated in SDL. As we proceed to created our resolvers, this file will be updated automatically.

Navigate to http://localhost:3000/graphql. NestJS uses graphql playground by default. It's a lovely GraphQL IDE. We can check our schema here.

Complete GraphQL Schema

We have a basic GraphQL schema. Let's complete it with actual types. Initially, we'll create city and treaty modules as we did for country.

Run nest g resource city --no-spec & nest g resource treaty --no-spec. Note that, these two new modules are added to app.module.ts. Let's update country, city & treaty entities as below;

src/country/entities/country.entity.ts

import { Field, Int, ObjectType } from '@nestjs/graphql';
import { City } from './../../city/entities/city.entity';
import { Treaty } from './../../treaty/entities/treaty.entity';

@ObjectType()
export class Country {
  @Field(() => Int)
  id: number;

  @Field()
  name: string;

  @Field(() => Int, { nullable: true })
  population: number;

  @Field(() => [City], { nullable: true })
  cities: City[];

  @Field(() => [Treaty], { nullable: true })
  treaties: Treaty[];

  @Field(() => City, { nullable: true })
  capital: City;
}

src/city/entities/city.entity.ts

import { Field, Int, ObjectType } from '@nestjs/graphql';

@ObjectType()
export class City {
  @Field(() => Int)
  id: number;

  @Field()
  name: string;

  @Field({ nullable: true })
  touristic: boolean;

  @Field(() => Int, { nullable: true })
  population: number;
}

src/treaty/entities/treaty.entity.ts

import { Field, Int, ObjectType } from '@nestjs/graphql';
import { Country } from './../../country/entities/country.entity';

@ObjectType()
export class Treaty {
  @Field(() => Int)
  id: number;

  @Field({ nullable: false })
  name: string;

  @Field(() => [Country], { nullable: true })
  countries: Country[];
}

NestJS uses decorators to includes a class and its properties in GraphQL schema. @ObjectType() converts this class to schema type. @Field() decorator adds the selected property of the class to its parent schema type. While class itself is in typescript syntax, decorators use SDL syntax. Let's examine Treaty class;

 @Field(() => Int)
  id: number;

we use number for numeric datatypes in typescript. However, in GraphQL schema we want to make it an integer. So, in decorator we let NestJS know this.

GraphQL SDL has these scalar types
Int, Float, String, Boolean, ID

For the name field, on the other hand, we don't need to explicitly indicate an SDL type. GraphQL converts string to String. We can set some properties to fields. Here we set { nullable: false }

  @Field({ nullable: false })
  name: string;

A treaty has joined countries. It's an array. Note that, we indicate an array of country differently in typescript & in SDL

  @Field(() => [Country], { nullable: true })
  countries: Country[];

Let's start the app and observe the schema update.

Adding TypeORM

Let's stop nestjs and install some packages;

yarn add typeorm @nestjs/typeorm pg we're using Postgresql. So, need to install pg. In the final part, we'll use mssql as well.

We can keep db connection params in .env file. This way, we can have our prod db params as environment variables in deployment environment.

.env

DB_NAME=countrydb
DB_HOST=localhost
DB_PORT=5432
DB_USERNAME=postgres
DB_PASSWORD=postgres

Now add type orm config file;

ormconfig.js

module.exports = {
  name: 'countrydb',
  type: 'postgres',
  host: process.env.DB_HOST,
  port: parseInt(process.env.DB_PORT),
  database: process.env.DB_NAME,
  username: process.env.DB_USERNAME,
  password: process.env.DB_PASSWORD,
  entities: ['src/**/*entity.ts'],
  migrations: ['src/migrations/**/*.ts'],
  logging: false,
  cli: {
    entitiesDir: 'src',
    migrationsDir: 'src/migrations',
  },
  options: { trustServerCertificate: true },
};

Nest is using naming conventions. If a file is an entity, nest name the file as *.entity.ts. In all three of our modules you can see them. In this config file we simply give the database connection info and also where to find the entities and where to create the migrations.

Note that, we'll be using our entities as graphql schema models and also as our db models. It's very nice not to create different models for both purposes. To achieve this, we need to add typeorm decorators to our country, city and treaty entities;

todo/////*tALK ABOUT entities and type orm decorators

npm scripts for migrations

nestjs comes with ts-node installed. We'd want to create our migrations using our typescript entities. So, those three weird script should be added to package.json;

    "migration:generate": "ts-node ./node_modules/typeorm/cli.js migration:generate -c countrydb -n ",
    "migration:run": "ts-node ./node_modules/typeorm/cli.js migration:run -c countrydb",
    "migration:revert": "ts-node ./node_modules/typeorm/cli.js migration:revert -c countrydb"

-c flag is for connection name. Since we'll add a second one, we had to name them.

We have three operations about migrations;

migration:generate, creates a new migration comparing the models current state and the databse schema

migration:run, executes the not-yet-executed migrations in the database. The ones already executed, have no effect.

migration:revert, reverts the final migration

Our entities decorated with typeorm decorators are as follows;

src/city/entities/city.entity.ts

import { Field, Int, ObjectType } from '@nestjs/graphql';
import { Country } from '../../country/entities/country.entity';
import {
  Column,
  Entity,
  JoinColumn,
  ManyToOne,
  PrimaryGeneratedColumn,
} from 'typeorm';

@Entity()
@ObjectType()
export class City {
  @PrimaryGeneratedColumn()
  @Field(() => Int)
  id: number;

  @Column()
  @Field()
  name: string;

  @Column({ nullable: true })
  @Field({ nullable: true })
  touristic: boolean;

  @Column({ nullable: true })
  @Field(() => Int, { nullable: true })
  population: number;

  @ManyToOne(() => Country, (country) => country.cities)
  @JoinColumn({ name: 'country_id' })
  country: Country;

  @Column({ type: 'int', name: 'country_id' })
  countryId: number;
}

}

src/country/entities/country.entity.ts

import { Field, Int, ObjectType } from '@nestjs/graphql';
import {
  Column,
  Entity,
  JoinColumn,
  JoinTable,
  ManyToMany,
  OneToMany,
  OneToOne,
  PrimaryGeneratedColumn,
} from 'typeorm';
import { City } from './../../city/entities/city.entity';
import { Treaty } from './../../treaty/entities/treaty.entity';

@Entity()
@ObjectType()
export class Country {
  @PrimaryGeneratedColumn()
  @Field(() => Int)
  id: number;

  @Column()
  @Field()
  name: string;

  @Column({ type: 'int', nullable: true })
  @Field(() => Int, { nullable: true })
  population: number;

  @OneToMany(() => City, (city) => city.country)
  @Field(() => [City], { nullable: true })
  cities: City[];

  @ManyToMany(() => Treaty, (treaty) => treaty.countries, { cascade: true })
  @Field(() => [Treaty], { nullable: true })
  @JoinTable({
    name: 'country_treaty', // table name for the junction table of this relation
    joinColumn: {
      name: 'country_id',
      referencedColumnName: 'id',
    },
    inverseJoinColumn: {
      name: 'treaty_id',
      referencedColumnName: 'id',
    },
  })
  treaties: Treaty[];

  @OneToOne(() => City)
  @Field(() => City, { nullable: true })
  @JoinColumn({ name: 'capital_city_id' })
  capital: City;
}

}

src/treaty/entities/treaty.entity.ts

import { Field, Int, ObjectType } from '@nestjs/graphql';
import { Column, Entity, ManyToMany, PrimaryGeneratedColumn } from 'typeorm';
import { Country } from './../../country/entities/country.entity';

@Entity()
@ObjectType()
export class Treaty {
  @PrimaryGeneratedColumn()
  @Field(() => Int)
  id: number;

  @Column()
  @Field({ nullable: false })
  name: string;

  @ManyToMany(() => Country, (country) => country.treaties)
  @Field(() => [Country], { nullable: true })
  countries: Country[];
}

}

Currently we have an empty countrydb. Let's create our initial migration using yarn migration:generate Init. Now you must have a migration like below. First part is the timestamp and would change in each run.

src/migrations/1634739033521-Init.ts

import { MigrationInterface, QueryRunner } from 'typeorm';

export class Init1634791876559 implements MigrationInterface {
  name = 'Init1634791876559';

  public async up(queryRunner: QueryRunner): Promise<void> {
    await queryRunner.query(
      `CREATE TABLE "treaty" ("id" SERIAL NOT NULL, "name" character varying NOT NULL, CONSTRAINT "PK_7876e417863f6fa3c9a51d0d3eb" PRIMARY KEY ("id"))`,
    );
    await queryRunner.query(
      `CREATE TABLE "country" ("id" SERIAL NOT NULL, "name" character varying NOT NULL, "population" integer, "capital_city_id" integer, CONSTRAINT "REL_f3e41ef5df2a6a975986042fdf" UNIQUE ("capital_city_id"), CONSTRAINT "PK_bf6e37c231c4f4ea56dcd887269" PRIMARY KEY ("id"))`,
    );
    await queryRunner.query(
      `CREATE TABLE "city" ("id" SERIAL NOT NULL, "name" character varying NOT NULL, "touristic" boolean, "population" integer, "country_id" integer NOT NULL, CONSTRAINT "PK_b222f51ce26f7e5ca86944a6739" PRIMARY KEY ("id"))`,
    );
    await queryRunner.query(
      `CREATE TABLE "country_treaty" ("country_id" integer NOT NULL, "treaty_id" integer NOT NULL, CONSTRAINT "PK_3e59c9693b624da2b8779527a10" PRIMARY KEY ("country_id", "treaty_id"))`,
    );
    await queryRunner.query(
      `CREATE INDEX "IDX_2010956a26a968fa554b6eb759" ON "country_treaty" ("country_id") `,
    );
    await queryRunner.query(
      `CREATE INDEX "IDX_0ff0d4a234014c46946032aa42" ON "country_treaty" ("treaty_id") `,
    );
    await queryRunner.query(
      `ALTER TABLE "country" ADD CONSTRAINT "FK_f3e41ef5df2a6a975986042fdf9" FOREIGN KEY ("capital_city_id") REFERENCES "city"("id") ON DELETE NO ACTION ON UPDATE NO ACTION`,
    );
    await queryRunner.query(
      `ALTER TABLE "city" ADD CONSTRAINT "FK_08af2eeb576770524fa05e26f39" FOREIGN KEY ("country_id") REFERENCES "country"("id") ON DELETE NO ACTION ON UPDATE NO ACTION`,
    );
    await queryRunner.query(
      `ALTER TABLE "country_treaty" ADD CONSTRAINT "FK_2010956a26a968fa554b6eb7598" FOREIGN KEY ("country_id") REFERENCES "country"("id") ON DELETE CASCADE ON UPDATE CASCADE`,
    );
    await queryRunner.query(
      `ALTER TABLE "country_treaty" ADD CONSTRAINT "FK_0ff0d4a234014c46946032aa421" FOREIGN KEY ("treaty_id") REFERENCES "treaty"("id") ON DELETE NO ACTION ON UPDATE NO ACTION`,
    );
  }

  public async down(queryRunner: QueryRunner): Promise<void> {
    await queryRunner.query(
      `ALTER TABLE "country_treaty" DROP CONSTRAINT "FK_0ff0d4a234014c46946032aa421"`,
    );
    await queryRunner.query(
      `ALTER TABLE "country_treaty" DROP CONSTRAINT "FK_2010956a26a968fa554b6eb7598"`,
    );
    await queryRunner.query(
      `ALTER TABLE "city" DROP CONSTRAINT "FK_08af2eeb576770524fa05e26f39"`,
    );
    await queryRunner.query(
      `ALTER TABLE "country" DROP CONSTRAINT "FK_f3e41ef5df2a6a975986042fdf9"`,
    );
    await queryRunner.query(
      `DROP INDEX "public"."IDX_0ff0d4a234014c46946032aa42"`,
    );
    await queryRunner.query(
      `DROP INDEX "public"."IDX_2010956a26a968fa554b6eb759"`,
    );
    await queryRunner.query(`DROP TABLE "country_treaty"`);
    await queryRunner.query(`DROP TABLE "city"`);
    await queryRunner.query(`DROP TABLE "country"`);
    await queryRunner.query(`DROP TABLE "treaty"`);
  }
}

You can run it with yarn migration:run. After this, our db is supposed to have country, city, treaty, country-treaty and migrations tables. migrations table keeps track of your migrations. It now has one record. More to come soon!

id|timestamp    |name             |
--+-------------+-----------------+
 2|1634739033521|Init1634739033521|

For our nest application to start, we need to supply TypeORM connection data from environment variables to app.module.js. First install nest config module;

yarn add @nestjs/config and update app.module.ts;

src/app.module.ts

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { join } from 'path';
import { AppService } from './app.service';
import { CountryModule } from './country/country.module';
import { CityModule } from './city/city.module';
import { TreatyModule } from './treaty/treaty.module';
import { TypeOrmModule } from '@nestjs/typeorm';
import { Country } from './country/entities/country.entity';
import { City } from './city/entities/city.entity';
import { Treaty } from './treaty/entities/treaty.entity';
import { ConfigModule } from '@nestjs/config';

@Module({
  imports: [
    ConfigModule.forRoot(),
    GraphQLModule.forRoot({
      autoSchemaFile: join(process.cwd(), 'schema.gql'),
    }),
    TypeOrmModule.forRoot({
      name: 'countrydb',
      type: 'postgres',
      host: process.env.DB_HOST,
      port: parseInt(process.env.DB_PORT),
      database: process.env.DB_NAME,
      username: process.env.DB_USERNAME,
      password: process.env.DB_PASSWORD,
      entities: [Country, City, Treaty],
      //logging: true,
    }),
    CountryModule,
    CityModule,
    TreatyModule,
  ],
  providers: [AppService],
})
export class AppModule {}

logging is very useful to see generated SQL commands.

Let's start the app. You should have all green;

Resolvers...

Query & mutation declarations reside in resolver files. They construct our GraphQL schema.

src/city/city.resolver.ts

import { Resolver, Query, Mutation, Args, Int } from '@nestjs/graphql';
import { CityService } from './city.service';
import { City } from './entities/city.entity';
import { CreateCityInput } from './dto/create-city.input';
import { UpdateCityInput } from './dto/update-city.input';

@Resolver(() => City)
export class CityResolver {
  constructor(private readonly cityService: CityService) {}

  @Mutation(() => City)
  createCity(@Args('input') input: CreateCityInput) {
    return this.cityService.create(input);
  }

  @Query(() => [City], { name: 'cities' })
  findAll() {
    return this.cityService.findAll();
  }

  @Query(() => City, { name: 'city' })
  findOne(@Args('id', { type: () => Int }) id: number) {
    return this.cityService.findOne(id);
  }

  @Mutation(() => City)
  updateCity(@Args('input') input: UpdateCityInput) {
    return this.cityService.update(input);
  }

  @Mutation(() => Int, { nullable: true })
  removeCity(@Args('id', { type: () => Int, nullable: false }) id: number) {
    return this.cityService.remove(id);
  }
}

src/country/country.resolver.ts

import { Resolver, Query, Mutation, Args, Int } from '@nestjs/graphql';
import { CountryService } from './country.service';
import { Country } from './entities/country.entity';
import { CreateCountryInput } from './dto/create-country.input';
import { UpdateCountryInput } from './dto/update-country.input';

@Resolver(() => Country)
export class CountryResolver {
  constructor(private readonly countryService: CountryService) {}

  @Mutation(() => Country)
  createCountry(
    @Args('input', { nullable: false })
    input: CreateCountryInput,
  ) {
    return this.countryService.create(input);
  }

  @Query(() => [Country], { name: 'countries' })
  findAll() {
    return this.countryService.findAll();
  }

  @Query(() => Country, { name: 'country' })
  findOne(@Args('id', { type: () => Int }) id: number) {
    return this.countryService.findOne(id);
  }

  @Mutation(() => Country)
  updateCountry(@Args('input') input: UpdateCountryInput) {
    return this.countryService.update(input);
  }

  @Mutation(() => Int, { nullable: true })
  removeCountry(@Args('id', { type: () => Int, nullable: false }) id: number) {
    return this.countryService.remove(id);
  }

  @Mutation(() => Country, { name: 'addCountryToTreaty' })
  addToTreaty(
    @Args('countryId', { type: () => Int, nullable: false }) countryId: number,
    @Args('treatyId', { type: () => Int, nullable: false }) treatyId: number,
  ) {
    return this.countryService.addToTreaty(countryId, treatyId);
  }
  @Mutation(() => Country, { name: 'removeCountryFromTreaty' })
  removeFromTreaty(
    @Args('countryId', { type: () => Int, nullable: false }) countryId: number,
    @Args('treatyId', { type: () => Int, nullable: false }) treatyId: number,
  ) {
    return this.countryService.removeFromTreaty(countryId, treatyId);
  }
}

src/treaty/treaty.resolver.ts

import { Resolver, Query, Mutation, Args, Int } from '@nestjs/graphql';
import { TreatyService } from './treaty.service';
import { Treaty } from './entities/treaty.entity';
import { CreateTreatyInput } from './dto/create-treaty.input';
import { UpdateTreatyInput } from './dto/update-treaty.input';

@Resolver(() => Treaty)
export class TreatyResolver {
  constructor(private readonly treatyService: TreatyService) {}

  @Mutation(() => Treaty)
  createTreaty(@Args('input') input: CreateTreatyInput) {
    return this.treatyService.create(input);
  }

  @Query(() => [Treaty], { name: 'treaties' })
  findAll() {
    return this.treatyService.findAll();
  }

  @Query(() => Treaty, { name: 'treaty' })
  findOne(@Args('id', { type: () => Int }) id: number) {
    return this.treatyService.findOne(id);
  }

  @Mutation(() => Treaty)
  updateTreaty(@Args('input') input: UpdateTreatyInput) {
    return this.treatyService.update(input);
  }

  @Mutation(() => Treaty)
  removeTreaty(@Args('id', { type: () => Int }) id: number) {
    return this.treatyService.remove(id);
  }
}

Query & mutations are not supposed to contain business logic. Theye are rather like façades to services which contains actual logic. This pattern is very useful as you may need to trigger your logic for somewhere other than query or mutation resolvers, such as background jobs.

Please note that we're injecting services in resolvers constructor. Nestjs has dependency injection out of the box. Writing tests are quite easy this way.

Services

src/city/city.service.ts

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { CreateCityInput } from './dto/create-city.input';
import { UpdateCityInput } from './dto/update-city.input';
import { City } from './entities/city.entity';

@Injectable()
export class CityService {
  constructor(
    @InjectRepository(City, 'countrydb') private cityRepo: Repository<City>,
  ) {}

  async create(input: CreateCityInput): Promise<City> {
    return await this.cityRepo.save(input);
  }

  async findAll(): Promise<City[]> {
    return await this.cityRepo.find();
  }

  async findOne(id: number): Promise<City> {
    return await this.cityRepo.findOne(id);
  }

  async update(input: UpdateCityInput): Promise<City> {
    let found = await this.cityRepo.findOne(input.id);
    return await this.cityRepo.save({ ...found, ...input });
  }

  async remove(id: number) {
    let found = await this.cityRepo.findOne(id);
    if (found) {
      await this.cityRepo.remove(found);
      return id;
    } else {
      return null;
    }
  }
}

src/country/country.service.ts

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Treaty } from 'src/treaty/entities/treaty.entity';
import { Repository } from 'typeorm';
import { CreateCountryInput } from './dto/create-country.input';
import { UpdateCountryInput } from './dto/update-country.input';
import { Country } from './entities/country.entity';

@Injectable()
export class CountryService {
  constructor(
    @InjectRepository(Country, 'countrydb')
    private countryRepo: Repository<Country>,
    @InjectRepository(Treaty, 'countrydb')
    private treatyRepo: Repository<Treaty>,
  ) {}

  async create(input: CreateCountryInput): Promise<Country> {
    return await this.countryRepo.save(input);
  }

  async findAll(): Promise<Country[]> {
    return await this.countryRepo.find({ relations: ['cities', 'treaties'] });
  }

  async findOne(id: number): Promise<Country> {
    return await this.countryRepo.findOne(id);
  }

  async update(input: UpdateCountryInput): Promise<Country> {
    let found = await this.countryRepo.findOne(input.id);
    return await this.countryRepo.save({ ...found, ...input });
  }

  async remove(id: number) {
    let found = await this.countryRepo.findOne(id);
    if (found) {
      await this.countryRepo.remove(found);
      return id;
    } else {
      return null;
    }
  }

  async addToTreaty(countryId: number, treatyId: number): Promise<Country> {
    let foundCountry = await this.countryRepo.findOne(
      { id: countryId },
      { relations: ['treaties'] },
    );
    let foundTreaty = await this.treatyRepo.findOne({ id: treatyId });

    if (foundCountry && foundTreaty) {
      foundCountry.treaties = foundCountry.treaties
        ? [...foundCountry.treaties, foundTreaty]
        : [foundTreaty];

      return this.countryRepo.save(foundCountry);
    } else {
      throw new Error(`Founding country or treaty problem`);
    }
  }

  async removeFromTreaty(
    countryId: number,
    treatyId: number,
  ): Promise<Country> {
    let foundCountry = await this.countryRepo.findOne(
      { id: countryId },
      { relations: ['treaties'] },
    );
    let foundTreaty = await this.treatyRepo.findOne({ id: treatyId });

    if (foundCountry && foundTreaty) {
      foundCountry.treaties = foundCountry.treaties
        ? [...foundCountry.treaties.filter((f) => f.id != treatyId)]
        : [];

      return this.countryRepo.save(foundCountry);
    } else {
      throw new Error(`Founding country or treaty problem`);
    }
  }
}

src/treaty/treaty.service.ts

import { Treaty } from './entities/treaty.entity';
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { CreateTreatyInput } from './dto/create-treaty.input';
import { UpdateTreatyInput } from './dto/update-treaty.input';

@Injectable()
export class TreatyService {
  constructor(
    @InjectRepository(Treaty, 'countrydb')
    private treatyRepo: Repository<Treaty>,
  ) {}

  async create(input: CreateTreatyInput): Promise<Treaty> {
    return await this.treatyRepo.save(input);
  }

  async findAll(): Promise<Treaty[]> {
    return await this.treatyRepo.find({ relations: ['countries'] });
  }

  async findOne(id: number): Promise<Treaty> {
    return await this.treatyRepo.findOne(id);
  }

  async update(input: UpdateTreatyInput): Promise<Treaty> {
    let found = await this.treatyRepo.findOne(input.id);
    return await this.treatyRepo.save({ ...found, ...input });
  }

  async remove(id: number) {
    let found = await this.treatyRepo.findOne(id);
    if (found) {
      await this.treatyRepo.remove(found);
      return id;
    } else {
      return null;
    }
  }
}

As seen above, all our logic is in services. Please note that we're injecting db entity repositories in service constructors. @nestjs/typeorm wrapper makes it possible, wonderful!

Input types

Our last graphql schema element is input. We receive everything from GraphQL schema as strict types. In addition, what we supply to it is supposed to be schema type as well. To achive this, we're decorating our input classes with @InputType() from @nestjs/graphql wrapper. Nest automatically generated dto directories in our modules. We decorate its fields similarly with @Field(). Let's see city module inputs;

src/city/dto/create-city.input.ts

import { InputType, Int, Field } from '@nestjs/graphql';

@InputType()
export class CreateCityInput {
  @Field({ nullable: false })
  name: string;

  @Field(() => Int, { nullable: true })
  population: number;

  @Field(() => Int, { nullable: false })
  countryId: number;
}

src/city/dto/update-city.input.ts

import { CreateCityInput } from './create-city.input';
import { InputType, Field, Int, PartialType } from '@nestjs/graphql';

@InputType()
export class UpdateCityInput extends PartialType(CreateCityInput) {
  @Field(() => Int, { nullable: false })
  id: number;
}

update input extends create input and adds a mandatory id field.

Let's give it a try...

We'll use graphql playground in http://localhost:3000. First, query countries;

query countries {
  countries {
    id
    name
    population
    treaties {
      id
      name
    }
  }
}

And the reply from graphql is empty since we've not yet created any. Let's create three countries;

mutation createCountry {
  createCountry(input: { name: "Japan", population: 35000 }) {
    id
    name
  }
}

mutation createCountry {
  createCountry(input: { name: "France", population: 25000 }) {
    id
    name
  }
}

mutation createCountry {
  createCountry(input: { name: "Germany", population: 55000 }) {
    id
    name
  }
}

Now run the countries query again, you must have three now;

{
  "data": {
    "countries": [
      {
        "id": 2,
        "name": "France",
        "population": 25000,
        "treaties": []
      },
      {
        "id": 1,
        "name": "Japan",
        "population": 35000,
        "treaties": []
      },
      {
        "id": 3,
        "name": "Germany",
        "population": 55000,
        "treaties": []
      }
    ]
  }
}

it's important to note that, the shape of the result determined by the query we sent. You can test all the mutations and queries your self. There're all functional!

Adding continent field to country

Let's say we need to add a continent field to country. Moreover, since continent data is not to subject to change, we want the continent to be enum. Let's create Continent enum;

src/country/enums.ts

import { registerEnumType } from '@nestjs/graphql';

export enum Continent {
  Asia = 'Asia',
  Europe = 'Europe',
  America = 'America',
  Africa = 'Africa',
}

registerEnumType(Continent, { name: 'Continent' });

We need to register enums with registerEnumType. Let's add below field to country entity;

  @Column({ type: 'enum', enum: Continent, nullable: true })
  @Field(() => Continent, { nullable: true })
  continent: Continent;

We're using the same enum for our db, and also for our graphql schema, awesome! Finally we need to update CreateCountryInput with below field;

  @Field(() => Continent, { nullable: true })
  continent: Continent;

Now we should create a new typeorm db migration to update countrydb accordingly; yarn migration:generate Continent. Our second migration should be like this;

import { MigrationInterface, QueryRunner } from 'typeorm';

export class Continent1634807399486 implements MigrationInterface {
  name = 'Continent1634807399486';

  public async up(queryRunner: QueryRunner): Promise<void> {
    await queryRunner.query(
      `CREATE TYPE "public"."country_continent_enum" AS ENUM('Asia', 'Europe', 'America', 'Africa')`,
    );
    await queryRunner.query(
      `ALTER TABLE "country" ADD "continent" "public"."country_continent_enum"`,
    );
  }

  public async down(queryRunner: QueryRunner): Promise<void> {
    await queryRunner.query(`ALTER TABLE "country" DROP COLUMN "continent"`);
    await queryRunner.query(`DROP TYPE "public"."country_continent_enum"`);
  }
}

Only necessary DDL commands are added to newly created migration. We're updating our db incrementally. We can have our migrations to execute manually added DML commands. Our treaty table is empty. Let's insert some;

import { MigrationInterface, QueryRunner } from 'typeorm';

export class Continent1634807399486 implements MigrationInterface {
  name = 'Continent1634807399486';

  public async up(queryRunner: QueryRunner): Promise<void> {
    await queryRunner.query(
      `CREATE TYPE "public"."country_continent_enum" AS ENUM('Asia', 'Europe', 'America', 'Africa')`,
    );
    await queryRunner.query(
      `ALTER TABLE "country" ADD "continent" "public"."country_continent_enum"`,
    );

    await queryRunner.query(
      `INSERT INTO "treaty"(name) VALUES ('Kyoto Protocol'),('Paris Agreement'),('Vienna Convention');`,
    );
  }

  public async down(queryRunner: QueryRunner): Promise<void> {
    await queryRunner.query(`ALTER TABLE "country" DROP COLUMN "continent"`);
    await queryRunner.query(`DROP TYPE "public"."country_continent_enum"`);
    await queryRunner.query(`DELETE FROM "treaty"`);
  }
}

We've added insert and delete DML commands to up and down functions of Continent migration respectively. Let's run it, yarn migration:run

Country table is supposed to have a continent field of type country_continent_enum. Besides, treaty table must have three records inserted. We can see Continent enum in our graphql schema;

Let's check migrations table. It now has a new record of Continent migration. This way we're versioning countrydb. When we deploy our code to prod, our prod countrydb migration level will be updated and we can trace it easily. No manuel DDL update would be necessary, wonderful!

id|timestamp    |name                  |
--+-------------+----------------------+
 1|1634791876559|Init1634791876559     |
 2|1634807399486|Continent1634807399486|

We can update the countries with continent. Since it's enum type, no need to write, just hit ctrl+space and select from continents, nice!

mutation updateCountry {
  updateCountry(input: { id: 1, continent: Asia }) {
    id
    name
    continent
  }
}

Query a legacy database

We may need to query an existing legacy database. It'll be a db first approach. So, we'll create its module, service, resolver one by one;

nest g module legacy --no-spec

nest g service legacy --no-spec

nest g resolver legacy --no-spec

Our legacydb is a mssql. Need to install mssql package

yarn add mssql

We need to add one more TypeOrmModule among app module's imports array;

 TypeOrmModule.forRoot({
      name: 'legacydb',
      type: 'mssql',
      host: process.env.LEGACY_DB_HOST,
      port: parseInt(process.env.LEGACY_DB_PORT),
      username: process.env.LEGACY_DB_USERNAME,
      password: process.env.LEGACY_DB_PASSWORD,
      database: process.env.LEGACY_DB_NAME,
      extra: {
        trustServerCertificate: true,
      },
    }),

new .env file should be as below;

DB_NAME=countrydb
DB_HOST=localhost
DB_PORT=5432
DB_USERNAME=postgres
DB_PASSWORD=postgres
LEGACY_DB_HOST=localhost\SQLEXPRESS
LEGACY_DB_PORT=1433
LEGACY_DB_USERNAME=dummy_user
LEGACY_DB_PASSWORD=dummy_password
LEGACY_DB_NAME=legacydb

Let's say legacydb has a company table which we'll query from;

id|name     |products             |
--+---------+---------------------+
 1|Apple    |iphone, ipad, macbook|
 2|Samsung  |Android devices      |
 3|Del Monte|Food                 |
 4|Tesla    |Electric cars        |

Let's create a dto object to be used as result type of our query;

src/legacy/dto/legacy.company.ts

import { Field, Int, ObjectType } from '@nestjs/graphql';

@ObjectType()
export class Company {
  @Field(() => Int, { nullable: true })
  id: number;

  @Field({ nullable: true })
  name: string;

  @Field({ nullable: true })
  products: string;
}

src/legacy/legacy.service.ts

import { Injectable } from '@nestjs/common';
import { getManager } from 'typeorm';
import { Company } from './dto/legacy.company';

@Injectable()
export class LegacyService {
  async findCompanies(companyName: string): Promise<Company[]> {
    return new Promise(async (resolve, reject) => {
      try {
        const entityManager = getManager('legacydb');
        let strQueryCompany = `SELECT id, name, products FROM legacydb.dbo.company WHERE name = @0;`;

        let result = await entityManager.query(strQueryCompany, [companyName]);

        resolve(result);
      } catch (error) {
        reject(error);
      }
    });
  }
}

src/legacy/legacy.resolver.ts

import { LegacyService } from './legacy.service';
import { Args, Query, Resolver } from '@nestjs/graphql';
import { Company } from './dto/legacy.company';

@Resolver()
export class LegacyResolver {
  constructor(private legacyService: LegacyService) {}

  @Query(() => [Company])
  async companies(
    @Args('companyName', { nullable: true }) companyName: string,
  ) {
    return await this.legacyService.findCompanies(companyName);
  }
}

We can see our Company type and companies query in graphql schema;

Our query is supposed to run as below;

Finally, we're querying two databases from the same graphql api 👍

Using Expressjs as Backend for Create React App using Docker Compose

murat — Thu, 24 Jun 2021 16:49:46 +0000

Creating an app using reactjs is really fascinating. You see it running on your developer machine and you're done! Really? Now you need to think about packaging, deployment, handling environment variables and sending request to your own backend. Here we'll be going through these steps. Not going into the details of creating a Reactjs app. Completed application is in Github repo.
Main motivation of creating such a development environment is to keep Create React App (CRA) intact and avoid creating external dependencies to any serverside technology. We'll sum up this consideration at the end.

Project Creation

My nodejs version is 14.17.5

We'll create our Reactjs project with famous CRA starter;
npx create-react-app cra-expressjs-docker --template typescript

We'll use Material-Ui for a bare minimum ui design;
npm i @material-ui/core

Let's add React-Router for page navigation;
npm i react-router-dom @types/react-router-dom

Need to add axios for http requests and react-json-view to display a javascript object
npm i axios react-json-view

Let's add pages;

src/pages/Greetings.tsx

import {
  Button,
  createStyles,
  Grid,
  makeStyles,
  Theme,
  Typography,
} from "@material-ui/core";
import TextField from "@material-ui/core/TextField";
import { useState } from "react";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    grid: {
      margin: 20,
    },
    message: {
      margin: 20,
    },
  })
);

const Greetings = () => {
  const classes = useStyles({});
  return (
    <Grid
      className={classes.grid}
      container
      direction="column"
      alignItems="flex-start"
      spacing={8}
    >
      <Grid item>
        <TextField variant="outlined" size="small" label="Name"></TextField>
      </Grid>
      <Grid item container direction="row" alignItems="center">
        <Button variant="contained" color="primary">
          Say Hello
        </Button>
      </Grid>
    </Grid>
  );
};

export default Greetings;

src/pages/Home.tsx

import {
  createStyles,
  Grid,
  makeStyles,
  Theme,
  Typography,
} from "@material-ui/core";
import React from "react";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    grid: {
      margin: 20,
    },
  })
);

const Home = () => {
  const classes = useStyles({});
  return (
    <Grid className={classes.grid} container direction="row" justify="center">
      <Typography color="textSecondary" variant="h2">
        Welcome to Fancy Greetings App!
      </Typography>
    </Grid>
  );
};

export default Home;

and update App.tsx like below;
src/App.tsx

import {
  AppBar,
  createStyles,
  makeStyles,
  Theme,
  Toolbar,
} from "@material-ui/core";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
import Greetings from "./pages/Greetings";
import Home from "./pages/Home";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    href: {
      margin: 20,
      color: "white",
    },
  })
);

const App = () => {
  const classes = useStyles({});
  return (
    <BrowserRouter>
      <AppBar position="static">
        <Toolbar>
          <Link className={classes.href} to="/">
            Home
          </Link>
          <Link className={classes.href} to="/greetings">
            Greetings
          </Link>
        </Toolbar>
      </AppBar>
      <Switch>
        <Route path="/greetings">
          <Greetings />
        </Route>
        <Route exact path="/">
          <Home />
        </Route>
      </Switch>
    </BrowserRouter>
  );
};

export default App;

Now our Reactjs app is ready. Although it lacks greetings funtionalities yet, you can still navigate between pages.

Adding GraphQL Code Generator

Although we're not going to add a GraphQL server for the time being, we can use GraphQL Code Generator to generate types to be used both in client side and also in server side. GraphQL Code Generator is a wonderful tool and definitely worth to get used to.

Let's install necessary packages, npm i @apollo/client@3.3.16 graphql@15.5.2

npm i --save-dev @graphql-codegen/add@2.0.1 @graphql-codegen/cli@1.17.10 @graphql-codegen/typescript@1.17.10 @graphql-codegen/typescript-operations@1.17.8 @graphql-codegen/typescript-react-apollo@2.0.7 @graphql-codegen/typescript-resolvers@1.17.10

Let's create two files;
codegen.yml

overwrite: true
generates:
  ./src/graphql/types.tsx:
    schema: client-schema.graphql
    plugins:
      - add:
          content: "/* eslint-disable */"
      - typescript
      - typescript-operations
      - typescript-react-apollo
      - typescript-resolvers
    config:
      withHOC: false
      withHooks: true
      withComponent: false

client-schema.graphql

type DemoVisitor {
  name: String!
  id: Int!
  message: String
}

also need to add "codegen": "gql-gen" to scripts part in our package.json

Now we can run codegenerator with npm run codegen

Adding Exressjs serverside using typescript

Create a server directory in the root directory and npm init -y there. Then install the packages;

npm i express ts-node typescript
npm i -D @types/express @types/node nodemon

Since our server code is in typescript, it needs to be compiled to javascript. So, we need to instruct typescript compiler (tsc) somehow. You can do this by giving inline cli parameters. However, a more elegant way is to add a tsconfig file.

server/tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "dist",
    "rootDirs": ["./", "../src/graphql"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [".", "../src/graphql"]
}

What's important is module: "CommonJS" nodejs modules are of CommonJS module type.

Let me remind you, our goal is to keep CRA intact, just add serverside to it.

And add our server app;
server/src/index.ts

import express from "express";
import path from "path";

const app = express();
app.use(express.json());

const staticPath = path.resolve(__dirname, "../build/static");
const buildPath = path.resolve(__dirname, "../build");
const indexPath = path.resolve(__dirname, "../build/index.html");

app.use("/", express.static(buildPath));
app.use("/static", express.static(staticPath));

app.all("/", (req, res) => {
  res.sendFile(indexPath);
});

app.post("/api/greetings/hello", (req, res) => {
  const name = (req.body.name || "World") as string;

  res.json({
    greeting: `Hello ${name}! From Expressjs on ${new Date().toLocaleString()}`,
  });
});

app.listen(3001, () =>
  console.log("Express server is running on localhost:3001")
);

Lets's build client side Reactjs app using npm run build in root directory

If you check build/index.html you can see some script tags that points to some compiled artifacts under build/static. In our server/app/index.ts we created below paths to be used;

const staticPath = path.resolve(__dirname, "../build/static");
const buildPath = path.resolve(__dirname, "../build");
const indexPath = path.resolve(__dirname, "../build/index.html");

app.use("/", express.static(buildPath));
app.use("/static", express.static(staticPath));

Also we return index.html which contains our CRA app as below;

app.all("/", (req, res) => {
  res.sendFile(indexPath);
});

And this is how we response POST requests;

app.post("/api/greetings/hello", (req, res) => {
  const name = req.query.name || "World";
  res.json({
    greeting: `Hello ${name}! From Expressjs on ${new Date().toLocaleString()}`,
  });
});

Finally, we need scripts part to our server package.json as below;

"scripts": {
    "server:dev": "nodemon --exec ts-node --project tsconfig.json src/index.ts",
    "server:build": "tsc --project tsconfig.json"    
  },

Basically what server:dev does is to use ts-node to start our Expressjs written in typescript according to tsconfig.json.

For nodemon watch the changes in serverside typescript files and restart Expressjs automatically upon save, we need to add below configuration file to root directory;

nodemon.json

{
  "watch": ["."],
  "ext": "ts",
  "ignore": ["*.test.ts"],
  "delay": "3",
  "execMap": {
    "ts": "ts-node"
  }
}

We can test our server with npm run server:dev. If we update and save index.ts, server is supposed to be restarted.

Since our CRA app is running on localhost:3000 and Expressjs on localhost:3001, sending an http request from CRA app to Expressjs normally causes CORS problem. Instead of dealing with CORS, we have an option to tell CRA app to proxy http request to Expressjs in our development environment. To do that, we need to add proxy tag to our package.json

"proxy": "http://localhost:3001",

Adding more routes to Expressjs

We have a /api/greetins/hello route. We can add another route for goodbye. Let's do this in a separate module;

server/src/routes/Greetings.ts

import express from "express";
import { DemoVisitor } from "../../../src/graphql/types";

const router = express.Router();

router.post("/hello", (req, res) => {
  const name = (req.body.name || "World") as string;
  const id = Number(req.body.id || 0);

  const myVisitor: DemoVisitor = {
    id,
    name,
    message: `Hello ${name} :-( From Expressjs on ${new Date().toLocaleString()}`,
  };

  res.json(myVisitor);
});

router.post("/goodbye", (req, res) => {
  const name = (req.body.name || "World") as string;
  const id = Number(req.body.id || 0);

  const myVisitor: DemoVisitor = {
    id,
    name,
    message: `Goodbye ${name} :-( From Expressjs on ${new Date().toLocaleString()}`,
  };

  res.json(myVisitor);
});

export default router;

Note that we're making use DemoVisitor model, which we already generated by GraphQL Code Generator in our client side, here on server side! Nice isn't it ?

And our index.ts become simplified;
server/src/index.ts

import express from "express";
import path from "path";
import greetings from "./routes/Greetings";

const app = express();
app.use(express.json());

const staticPath = path.resolve(__dirname, "../static");
const buildPath = path.resolve(__dirname, "..");
const indexPath = path.resolve(__dirname, "../index.html");

app.use("/", express.static(buildPath));
app.use("/static", express.static(staticPath));

app.get("/*", (req, res) => {
  res.sendFile(indexPath);
});

app.use("/api/greetings", greetings);

app.listen(3001, () =>
  console.log("Express server is running on localhost:3001")
);

Let's check is the server still runs OK with npm run server:dev

Finally, we'll update Greetings.tsx to use its backend;

src/pages/Greetings.tsx

import {
  Button,
  createStyles,
  Grid,
  makeStyles,
  Theme,
  Typography,
} from "@material-ui/core";
import TextField from "@material-ui/core/TextField";
import { useState } from "react";
import axios from "axios";
import { Visitor } from "graphql";
import { DemoVisitor } from "../graphql/types";
import ReactJson from "react-json-view";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    grid: {
      margin: 20,
    },
    message: {
      margin: 20,
    },
  })
);

const Greetings = () => {
  const classes = useStyles({});
  const [name, setName] = useState("");
  const [helloMessage, setHelloMessage] = useState<DemoVisitor>({
    name: "",
    id: 0,
    message: "",
  });
  const [goodbyeMessage, setGoodbyeMessage] = useState<DemoVisitor>({
    name: "",
    id: 0,
    message: "",
  });

  const handleChange = (event: any) => {
    setName(event.target.value);
  };
  const handleHello = async (event: any) => {
    const { data } = await axios.post<DemoVisitor>(
      `/api/greetings/hello`,
      {
        name,
        id: 3,
      },
      {
        headers: { "Content-Type": "application/json" },
      }
    );

    setHelloMessage(data);
  };
  const handleGoodbye = async (event: any) => {
    const { data } = await axios.post<DemoVisitor>(
      `/api/greetings/goodbye`,
      {
        name,
        id: 5,
      },
      {
        headers: { "Content-Type": "application/json" },
      }
    );

    setGoodbyeMessage(data);
  };
  return (
    <Grid
      className={classes.grid}
      container
      direction="column"
      alignItems="flex-start"
      spacing={8}
    >
      <Grid item>
        <TextField
          variant="outlined"
          size="small"
          label="Name"
          onChange={handleChange}
        ></TextField>
      </Grid>
      <Grid item container direction="row" alignItems="center">
        <Button variant="contained" color="primary" onClick={handleHello}>
          Say Hello
        </Button>
        <ReactJson
          src={helloMessage}
          displayDataTypes={false}
          shouldCollapse={false}
        ></ReactJson>
      </Grid>
      <Grid item container direction="row" alignItems="center">
        <Button variant="contained" color="primary" onClick={handleGoodbye}>
          Say Goodbye
        </Button>
        <ReactJson
          src={goodbyeMessage}
          displayDataTypes={false}
          shouldCollapse={false}
        ></ReactJson>
      </Grid>
    </Grid>
  );
};

export default Greetings;

Now we have a fully functional isomorphic app. Let's now Dockerize it.

Handling Environment variables

Our last task is to handle environment variables. A full fledged prod ready app is supposed to be controlled via its environment variables. If you bootstrap your reactjs app using a server side template, you can do it while you render the index.html. However, this is a different approach from using Create React App. Our main focus is to obey CRA structure and building our dev infrastructure this way.

Let's change the color of the app bar using an environment variable.

First, add a javascript file to hold our toolbar color environment variable with a default color red. We're simply adding REACT_APP_TOOLBAR_COLOR variable to window scope.

public/env-config.js

window.REACT_APP_TOOLBAR_COLOR='red';

We need to update index.html to use env-config.js

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <script src="/env-config.js"></script>

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

The only change is to add <script src="/env-config.js"></script>

Let's update our AppBar to use REACT_APP_TOOLBAR_COLOR value.

src/App.tsx

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    href: {
      margin: 20,
      color: "white",
    },
    appBar: {
      backgroundColor: window["REACT_APP_TOOLBAR_COLOR"],
    },
  })
);

const App = () => {
  const classes = useStyles({});
  return (
    <BrowserRouter>
      <AppBar position="static"  className={classes.appBar}>

We've just added appBar style and used it.
You may receive typescript compiler error saying Element implicitly has an 'any' type because index expression is not of type 'number'. We can add "suppressImplicitAnyIndexErrors": true to tsconfig.json to suppress this error.

Let's test what we did by right click to docker-compose.yaml and select Compose up.

You must have a red app bar now!

What we actually need to do is to control this toolbar color parameter using docker-compose.yaml environment variables.
We need to add two shell script files;

generate_config_js.sh

#!/bin/sh -eu
if [ -z "${TOOLBAR_COLOR:-}" ]; then
    TOOLBAR_COLOR_JSON=undefined
else
    TOOLBAR_COLOR_JSON=$(jq -n --arg toolbar_color "$TOOLBAR_COLOR" '$toolbar_color')
fi

cat <<EOF
window.REACT_APP_TOOLBAR_COLOR=$TOOLBAR_COLOR_JSON;
EOF

docker-entrypoint.sh

#!/bin/sh -eu
 echo "starting docker entrypoint" >&1
/app/build/generate_config_js.sh >/app/build/env-config.js
node /app/build/server
echo "express started" >&1

First shell script is to use TOOLBAR_COLOR environment variable which we'll be supplying in docker-compose.yaml.

Second one is to update our existing env-config.js with the first shell and start node server.

Creating Docker image of our Application

If your prod environment is a Kubernetes cluster, naturally you need to create a Docker image of your app. You should also decide how to respond to the initial http request to bootstrap your Reactjs app. Although adding nginx inside our image may seem reasonable, dealing with nginx configuration adds quite a lot intricacy to the scenario. Moreover, you're still lacking a backend in which you can create some business logic!

A far easier option can be using Expressjs as backend. This way, you avoid configuration issues, in addition, you will have a backend for frontend!

We already created our Expressjs and have a running full fledged app in dev mode. We can start to create our Docker image.
First of all, let's remember, our ultimate purpose is not to make any change to CRA. It's innate build algorithm will be valid. We're just decorating our CRA with a backend.

We've already added server:build script, lets try it out with npm run server:build. It produces javascript codes from typescript;

You're supposed to have the output in a dist folder inside server folder;

Now we need to add a Dockerfile in the root folder to craete docker image of our app;

Dockerfile

FROM node:slim as first_layer

WORKDIR /app
COPY . /app

RUN npm install && \
    npm run build

WORKDIR /app/server
RUN npm install && \
    npm run server:build

FROM node:slim as second_layer

WORKDIR /app
COPY --from=client_build /app/build /app/build
COPY --from=client_build /app/public /app/public
COPY --from=client_build /app/server/dist/server/src /app/build/server
COPY --from=client_build /app/server/node_modules /app/build/server/node_modules

COPY --from=client_build /app/docker-entrypoint.sh /app/build/docker-entrypoint.sh
COPY --from=client_build /app/generate_config_js.sh /app/build/generate_config_js.sh

RUN apt-get update && \
    apt-get install dos2unix && \
    apt-get install -y jq && \
    apt-get clean

RUN chmod +rwx /app/build/docker-entrypoint.sh && \
    chmod +rwx /app/build/generate_config_js.sh && \
    dos2unix /app/build/docker-entrypoint.sh && \
    dos2unix /app/build/generate_config_js.sh

EXPOSE 3001
ENV NODE_ENV=production

ENTRYPOINT ["/app/build/docker-entrypoint.sh"]

.dockerignore

**/node_modules
/build
/server/dist

We have one Dockerfile and eventually we'll have a single Docker image which includes both client and server app. However, these two apps differ in terms of handling node_modules. When we build client app, CRA produces browser downloadable .js files. After that, we don't need node_modules. So, we should get rid of it not to bloat our docker image needlessly. On the other hand, at the end of the build process of the nodejs server app, we won't have a single .js file and node_modules directory should be kept for the server to run correctly!
So, we created a two layered dockerfile. In the first one, we install both client and server packages and also build them too.
When we start the second layer, we copy only necessary artifacts from the first layer. At this point we could exclude node_modules of the CRA app.

After copying necessary files & directories, we need to install dos2unix and jq Ubuntu packages. While the former will be used to correct line endings of the shell files according linux, the latter is for json handling, in which we use in generate_config_js.sh file.

Second RUN command updates the file attributes by setting their chmod and correct the line endings.

Finally, ENTRYPOINT ["/app/build/docker-entrypoint.sh"] is our entry point.

docker-entrypoint.sh

#!/bin/sh -eu
 echo "starting docker entrypoint" >&1
/app/build/generate_config_js.sh >/app/build/env-config.js
node /app/build/server
echo "express started" >&1

Basically, it creates env-config.js file with the output of the execution of generate_config_js.sh and starts the node server.

If you're using Docker in VS Code, definitely you would need to install

It's an awesome extension and lets you monitor and perform all docker tasks without even writing docker commands.

Assuming you've installed the docker vscode extension, you can right click Dockerfile and select Build image.... If everything goes well, docker image is built as craexpressjsdocker:latest.

Now, let's add a docker-compose.yaml file to run the docker image. Here we supply TOOLBAR_COLOR environment variable too.

version: "3.4"
services:
  client:
    image: craexpressjsdocker:latest
    ports:
      - "3001:3001"
    environment:
      TOOLBAR_COLOR: "purple"

Let's try it out. Just right click docker-compose.yaml and select Compose up. You must have your app running on http://localhost:3001 with a purple pp bar. Let's change the toolbar color parameter in docker-compose.yaml to another color and again select Compose up. You must have your up with updated app bar color. Congratulations!

Final words

Let's recap what we have achieved;

We added an Expressjs server side to a bare metal CRA app without ejecting or changing its base structure. We just decorated it with a server side. So, we can update the CRA any time in the future.
Since we keep CRA as it is, development time is also kept unchanged. i.e., we still use webpack dev server and still have HMR. We can add any server side logic and create docker image as a whole app.
We've encupsulated all the complexity in Docker build phase, in Dockerfile. So, development can be done without any extra issues. This makes sense from a developer's perspective to me.
Since our BFF (Backend For Frontend) is not a separate api hosted with a different URL, we don't need to deal with CORS issues, neighther need we create a reverse proxy.
We have a ready-to-deploy docker image of our app to any Kubernetes cluster.
We can use environment variables in our CRA even though we did not use any server templating.

Happy coding 🌝

xUnit testing with DotNet Core 3.1 GraphQL api using EF Core, Postgresql & Docker

murat — Tue, 29 Dec 2020 10:02:48 +0000

Introduction

We had created a GraphQL api using dotnet core 3.1 in our previous post creating-dotnet-core-3-1-graphql-api-using-ef-core-postgresql-docker You can clone this project and continue from here.

We'll be adding xunit testing to our project. Complete github repo is here.

1. Adding a test project

Firstly, we need to add a new project to our existing Visual Studio solution using project template xUnit Test Project (.NET Core). Project name is Testing. Upon creation, we update the .csproj file as below;

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.8.0" />
    <PackageReference Include="xunit" Version="2.4.1" />
    <PackageReference Include="xunit.runner.visualstudio" Version="2.4.1" />
    <PackageReference Include="Microsoft.AspNetCore.TestHost" Version="3.1.10" />
  </ItemGroup>
  <ItemGroup>
    <ProjectReference Include="..\GraphQL.WebApi\GraphQL.WebApi.csproj" />
  </ItemGroup>
  <ItemGroup>
    <None Update="appsettings.Development.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </None>
  </ItemGroup>
</Project>

We'll be adding tests to this project. We can build the whole solution.

2. Adding a test database

When writing tests, main problem is to create test data. We may have so many tests and don't want them pollute our existing development db. Traditional way to achive this is to create a mock db context. However, maintaining such a mock context can be quite boring. Because we may need to update it when we change the db models. A much more efficient approach is to run a test db using Docker compose. Our project is on code-first basis and already have a docker-compose.yaml to create my development db. Why don't we use this infrastructure to create a test db and apply our db migrations on it, finally run the test easily?

docker-compose.yaml

version: "3.3"
networks:
  graph-starter:
services:
  graphdb:
    restart: always
    image: postgres:12.2-alpine
    ports:
      - "5432:5432"
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
      - POSTGRES_DB=graphdb
    volumes:
      - /var/lib/postgresql/data
    networks:
      - graph-starter 
  testdb:
    restart: always
    image: postgres:12.2-alpine
    ports:
      - "5433:5432"
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
      - POSTGRES_DB=testdb
    volumes:
      - /var/lib/postgresql/data
    networks:
      - graph-starter

As you can see, we added testdb into services. Then running docker-compose up -d we have both graphdb & testdb.

3. Completing Testing scaffolding & applying db migrations to test database

Now we will update testing project so that all the migrations will be applied when we run a dummy test. In testing project, we need to add the db connection string. Our testdb is running on port 5433;

appsettings.Development.json

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "ConnectionString": "Server=localhost;Port=5433;Database=testdb;Username=postgres;Password=postgres"
}

We'd like to create a test server to mimic our web api server and create testdb context. First part of the TestClassFixture constructor is to configure the webHostBuilder to use appsettings.Development.json. Then we're creating Server, Client and DbContext. TestServer is supplied by Microsoft.AspNetCore.TestHost which we already added to .csproj file.
It's important to note that we're creating the test server using our GraphQL.WebApi's original Startup file. So, we don't need to maintain a separate startup logic for the test environment! Then we created GqlResult<T> and GqlResultList<T> we'll come to them later.

Helpers/TestClassFixture.cs

using GraphQL.WebApi;
using GraphQL.WebApi.Repository;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.TestHost;
using Microsoft.Extensions.Configuration;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net.Http;

namespace Testing.Helpers
{
    public class TestClassFixture : IDisposable
    {      
        public DatabaseContext DbContext { get; set; }
        public TestServer Server { get; set; }
        public HttpClient Client { get; set; } 
        public TestClassFixture()
        {
            var webHostBuilder = WebHost.CreateDefaultBuilder();
            webHostBuilder.UseDefaultServiceProvider(options => options.ValidateScopes = false);
            webHostBuilder.UseEnvironment("Development");

            webHostBuilder.ConfigureAppConfiguration((builderContext, config) =>
            {
                config.SetBasePath(Directory.GetCurrentDirectory());
                config.AddJsonFile($"appsettings.Development.json", optional: false, reloadOnChange: true)
                             .AddEnvironmentVariables();                

            });

            Server = new TestServer(webHostBuilder.UseStartup<Startup>());
            Client = Server.CreateClient();
            DbContext = Server.Host.Services.GetService(typeof(DatabaseContext)) as DatabaseContext;
        }       
        public void Dispose()
        {
            DbContext.Dispose();
            Client.Dispose();
            Server.Dispose();
        }
    }
    public class GraphQLError
    {
        public string Key { get; set; }
        public string Value { get; set; }

    }
    public class GqlResult<T>
    {
        public GqlResult(string serviceResultJson, string queryName)
        {
            var rawResultJObject = JObject.Parse(serviceResultJson);
            var dataJObject = rawResultJObject["data"];
            Data = dataJObject == null ? default(T) : dataJObject[queryName].ToObject<T>();
            var graphQLErrorsJArray = (JArray)rawResultJObject["graphQLErrors"];
            GraphQLError = graphQLErrorsJArray == null ? null : graphQLErrorsJArray.ToObject<IList<GraphQLError>>()[0];

        }

        public T Data { get; set; }
        public GraphQLError GraphQLError { get; set; }
    }
    public class GqlResultList<T>
    {
        public GqlResultList(string serviceResultJson, string queryName)
        {
            var rawResultJObject = JObject.Parse(serviceResultJson);

            var dataJObject = rawResultJObject["data"];
            var dataArray = dataJObject == null ? new JArray() : (JArray)rawResultJObject["data"][queryName];
            Data = dataArray.ToObject<IList<T>>();
            var graphQLErrorsJArray = (JArray)rawResultJObject["graphQLErrors"];
            GraphQLError = graphQLErrorsJArray == null ? null : graphQLErrorsJArray.ToObject<IList<GraphQLError>>()[0];

        }

        public IList<T> Data { get; set; }
        public GraphQLError GraphQLError { get; set; }
    }
}

Let's add & run our very first test. UnitTest1.cs is already created when we add Testing project. Let's use it.

UnitTest1.cs

using Testing.Helpers;
using Xunit;

namespace Testing
{
    public class UnitTest1: IClassFixture<TestClassFixture>
    {
        [Fact]
        public void Test1()
        {
            Assert.True(1 == 1);
        }
    }
}

Upon building the solution, we'll be seeing our test in the test explorer inside Visual Studio. Writing and running xunit tests in Visual Studio is awesome!

()

Using this fantastic test we'd like to see TestClassFixture in action. In the test explorer right click test1 and select run. If everyting goes well, test explorer is supposed to seen as below;

Our fantastic test has passed. Let's check testdb

Very well, our db migrations are applied to testdb.

We can generally create two types of tests; unit tests & integration tests. If we invoke a class method directly, we'll call it unit test. If we use an HttpClient to send http requests, we'll be referring them as integration tests.

4. Creating unit tests

Let's say we have a CountryHelper and it has two methods, CreateCountry & QueryCountry. Testing those two methods can be good example for unit tests. Let's create the helper;

Interfaces/ICountryHelper.cs

using GraphQL.WebApi.Models;

namespace GraphQL.WebApi.Interfaces
{
    public interface ICountryHelper
    {
        Country CreateCountry(string countryName);
        Country QueryCountry(string countryName);
    }
}

Helpers/CountryHelper.cs

using GraphQL.WebApi.Interfaces;
using GraphQL.WebApi.Models;
using System.Linq;

namespace GraphQL.WebApi.Helpers
{
    public class CountryHelper: ICountryHelper
    {   
        private readonly IGenericRepository<Country> _countryRepository;
        public CountryHelper(IGenericRepository<Country> countryRepository)
        {
            _countryRepository = countryRepository;                
        }

        public Country CreateCountry(string countryName)
        {
            var newCountry = new Country
            {
                name = countryName
            };
            return _countryRepository.Insert(newCountry);
        }
        public Country QueryCountry(string countryName)
        {
            return _countryRepository.GetAll().FirstOrDefault(c => c.name == countryName);
        }
    }
}

Now let's create CountryTests class and add the initial Creates_Country test;

Tests/CountryTests.cs

using GraphQL.WebApi.Interfaces;
using GraphQL.WebApi.Models;
using Testing.Helpers;
using Xunit;

namespace Testing.Tests
{
    public class CountryTests: IClassFixture<TestClassFixture>
    {
        private readonly TestClassFixture _fixture;
        private readonly ICountryHelper _countryHelper;
        public CountryTests(TestClassFixture fixture, ICountryHelper countryHelper)
        {
            _fixture = fixture;
            _countryHelper = countryHelper;
        }    

        [Theory]
        [InlineData("Japan")]
        public void Creates_Country(string countryName)
        {   
            var newCountry = _countryHelper.CreateCountry(countryName);

            Assert.True(newCountry != default(Country));
            Assert.True(newCountry.id != 0);
        }
    }
}

Since we need to supply test parameters to the test, we used InlineData here. If we don't need to supply data, we can use Fact instead. Detailed usage of xUnit is beyond our scope, tough.

Right click to the test and run (or debug). After the test success, test explorer indicates success;

Let's check the testdb

Now let's create an exception case and test it. To do this, we'll add unique constraints to name fields of country & city tables in DatabaseContext.

Repositories/DatabaseContext.cs

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            base.OnModelCreating(modelBuilder);

            modelBuilder.Entity<City>(entity =>
            {
                entity.Property(e => e.creation_date).HasDefaultValueSql("(now())");
                entity.HasIndex(e => e.name).IsUnique(true);

            });


            modelBuilder.Entity<Country>(entity =>
            {
                entity.Property(e => e.creation_date).HasDefaultValueSql("(now())");
                entity.HasIndex(e => e.name).IsUnique(true);
            });
        }

Then add a new migration with dotnet ef migrations add UniqNames. Now kill the databases with docker-compose down and recreate them docker-compose up -d.

First run of our test is supposed to success as usual. If we run it for the second time, text explorer will suffer;

Entity framework exception is raised as expected. However, what makes a test real unit, is its independence from previous runs. i.e., consecutive executions of a unit test must result in the same result. Let's change our test;

        public void Creates_Country(string countryName)
        {   
            var newCountry = _countryHelper.CreateCountry($"{countryName}{TestClassFixture.RandomString(5)}");

            Assert.True(newCountry != default(Country));
            Assert.True(newCountry.id != 0);
        }

Now we concatenate countryName parameter with a randomly generated string to create unique country name. After running the test three times our country table is as follows;

Now we want to handle above exception by deliberately raising it and test. Let's change the CreateCountry helper method as below. First we need to make sure that the exception caught is caused by duplicate key value. Other exceptions are not handled in this scenario. ExecutionError comes from GraphQL package. This is a special exception class for GraphQL applications. It's easy to handle on the clientside, say using ApolloClient.

        public Country CreateCountry(string countryName)
        {
            var newCountry = new Country
            {
                name = countryName
            };
            Country createdCountry = null;
            try
            {
                createdCountry = _countryRepository.Insert(newCountry);
            }
            catch (DbUpdateException dbException)
            {
                if (dbException.InnerException.Message.Contains("duplicate key value"))
                {
                    throw new ExecutionError("duplicate_country_not_allowed", dbException.InnerException);
                }
                else
                {
                    throw dbException;
                }
            }
            return createdCountry;
        }

Our next test is Dont_Create_Dublicate_Country. We handle the duplicate country name situation by catching DbUpdateException and checking duplicate key value message. We use Assert.Throws<T> here.

        [Theory]
        [InlineData("France")]
        public void Dont_Create_Dublicate_Country(string countryName)
        {
            var uniqCountryName = $"{countryName}{TestClassFixture.RandomString(5)}";

            //first create the country
            var newCountry = _countryHelper.CreateCountry(uniqCountryName);
            Assert.True(newCountry != default(Country));
            Assert.True(newCountry.id != 0);

            //try to create same country!
            ExecutionError testException = Assert.Throws<ExecutionError>(() =>
            {
                _countryHelper.CreateCountry(uniqCountryName);
            });
            Assert.True(testException.Message == "duplicate_country_not_allowed");
        }

If any other exception other than duplicate key value situtation, the test will of course fail.

These two tests shed enough light onto writing unit tests. Let's write integration tests.

5. Creating integration tests

In our graphql api we have queries & mutations. Inside them, we receive http requests and execute the business logic. Their implimentation may vary depending on your design. Generally, I prefer encapsulating business logic in my domain models. In this case, queries and mutations acts like façades. They have their own logic to execute after receiving the request. You may want to execute various checks and controls. In this regard, testing queries & mutations is supposed to be done by sending http requests. Here comes the integration test.
In TestClassFixture constructor we created Client = Server.CreateClient();. Simply put, we're creating an http client by using test server. So, we can send query and mutation requests as http posts.

Tests/QueryTests.cs

[Fact]        
        public async Task Queries_Existing_Countries_By_Name()
        {
            var countryName = TestClassFixture.RandomString(5);
            var newCountry1 = _countryHelper.CreateCountry($"{countryName}{TestClassFixture.RandomString(5)}");
            Assert.True(newCountry1 != default(Country));
            Assert.True(newCountry1.id != 0);

            var newCountry2 = _countryHelper.CreateCountry($"{countryName}{TestClassFixture.RandomString(5)}");
            Assert.True(newCountry2 != default(Country));
            Assert.True(newCountry2.id != 0);

            var newCountry3 = _countryHelper.CreateCountry($"{countryName}{TestClassFixture.RandomString(5)}");
            Assert.True(newCountry3 != default(Country));
            Assert.True(newCountry3.id != 0);

            var param = new JObject();
            param["query"] = @"query countries($name:String!){
                                  countries(name:$name){
                                    id
                                    name
                                  }}";

            dynamic variables = new JObject();
            variables.name = countryName;

            param["variables"] = variables;
            var content = new StringContent(JsonConvert.SerializeObject(param), UTF8Encoding.UTF8, "application/json");
            var response = await _fixture.Client.PostAsync("graphql", content);
            var serviceResultJson = await response.Content.ReadAsStringAsync();

            var gqlResult = new GqlResultList<Country>(serviceResultJson, "countries");

            Assert.True(gqlResult.GraphQLError == null);
            Assert.True(gqlResult.Data != null);
            Assert.True(gqlResult.Data.Count == 3);
        }

Test scenorio here is to query countries and expect to receive three items. To achieve this, first we create three countries. To be able to run the test consecutively without any problem, we create unique country name and its variations. Using these country names, we create them using our existing country helper. We can rely on our country helper since it's already tested in its unit test.

At this point we construct our query and its variables as JObjects. Below lines are common in all our integration tests;

            var content = new StringContent(JsonConvert.SerializeObject(param), UTF8Encoding.UTF8, "application/json");
            var response = await _fixture.Client.PostAsync("graphql", content);
            var serviceResultJson = await response.Content.ReadAsStringAsync();

Basically, we create our string content from the constructed query, send an http post via http client in our fixture class, and finally read string content to obtain serviceResultJson
Now we add assertions. We need to create a typed result to make assertions on it. GqlResultList<T> and GqlResult<T> are just for that. We may expect a single object or a list of object. Here we can assert that our gqlResult.Data is not to be null and has exactly three items in it.
You can run Queries_Existing_Countries_By_Name test. You should see success in the test explorer.

Final words...

Importance of testing in software development is clear to everyone. Written tests are like guarding walls around our code base. We're living in a DevOps world and want to be able to deliver our development as easy & frequent as possible. An indispensible concept in this era, I beleive, is confidence. Developers need to develop confidently. Also deployments should be done confidently. Otherwise, undesired situations can happen with your end users and the cost can be beyond anticipated.

One major drawback of writing well structured tests is that developer teams need to spend considerable amount of time for that. In this writing, we tried to show how easy and effective to write unit & integration tests for a GraphQL api using dotnet core 3.1, xUnit & Docker.

Thanks for reading...

Gatsby.js + Apollo Client 3 + Graphql Code Generator + Typescript

murat — Sat, 21 Nov 2020 15:42:21 +0000

Introduction

In a previous article we had created an app using Apollo Client 2.6 to persist our form data previous article using Apollo Client 2.6

In this article we'll discover Apollo Client 3 for even more complicated senarios. We'll be using Gatsby instead of famous Create React App starter project.

You can test the working app demo or go through Github project

Let's start...

Why do we use Gatsby when we already have Create React App (CRA)

CRA is a super Reactjs starter. It saves you from many possible trouble caused by especially packaging and building. You can develop a basic app in just minutes. For educational or POC purposes it's an ideal choice. Say, you developed a library in Github and want the users to be able to test it once they cloned it. You can just add a demo CRA app to your Github project to test your library.

However, real life projects frequently call for more features which are beyond the scope of CRA. Performance may be the first one.

Dynamic app vs static app

CRA creates a dynamic app which lives in the browser. DOM object is rendered in the browser after the necessary artifacts, CSS, javascript, fonts etc... are loaded. Since DOM is notorious enough for its poor mutation performance, rendering client side obviously is not the perfect choice when high render performance is expected. Gatsbyjs on the other hand, is a static site genetation tool (SSG). We have our pages already compiled and ready to be displayed (dehydrated) on the server. React uses shadow DOM to match up the existing content with what the application renders. This process avoids expensive and unnecessary DOM manipulations (hydration). This is what lies beneath blazingly fast React web pages. Gatsby provides this feature out of the box.

Landing page

In CRA, when you browse to a route, all the app is loaded initially, then client side route happens. That's why the initial page load in CRA can be slow. When you need to create a landing page, you don't need to load all the app just to display one page, for a landing page it's important to show up ASAP. Gatsbtjs shines here. Since a Gatsby app is composed of pre-build, ready-to-render pages, you can create lightning fast landing pages.

Search Engine Optimization

Since Gatsby sites are server-side rendered, all the page contents are available to search engine crawlers. If SEO matters to you, CRA is not for you.

Microfrontends

This item was my reason to go into detail of Gatsby, so it's crucial to me. CRA is not created to construct a microfrontend architecture. To create a microfrontend structure with CRA, you need to eject it and find your own way!
On the other hand, Gatsby is very suitable for this purpose. You can add your dynamic apps, say a CRA app, to your Gatsby app. So, in addition to your static routes, you can host your dynamic, client-side routing apps like /app1/, /app2/ as well.

Let's start

First we need to install gatsby-cli;

npm i -g gatsby-cli

There are many Gatsby starters for various purposes. For this article I started with hello world Gatsby starter

gatsby new gatsbyjs_apollo_client_graphql_codegen https://github.com/gatsbyjs/gatsby-starter-hello-world

Adding typescript

There are three steps for this;

Adding tsconfig.json file
Adding gatsby-plugin-typescript to gatsby-config.js

Install gatsby-plugin-typescript

Finally, change the extensions of the pages created by Gatsby to .tsx

Using images in Gatsby

Gatsby makes use of Graphql extensively. You access all the static assets using Graphql. This paradigm makes really great sense if you already using Graphql. In this project we add our home page image accordingly.

Below npm packages must be installed;

    "gatsby-image": "^2.4.21",
    "gatsby-plugin-sharp": "^2.6.43",
    "gatsby-source-filesystem": "^2.3.35",
    "gatsby-transformer-sharp": "^2.5.20",

And gatsby-config.js is configured with these plugins. Order of the plugins is important.

const path = require(`path`);

module.exports = {
  /* Your site config here */
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    'gatsby-plugin-typescript',
  ],
};

src\components\image.tsx

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import Img from 'gatsby-image';

const Image = () => {
  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "gate.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 300) {
            base64
            aspectRatio
            sizes
            src
            srcSet
            originalImg
            originalName
          }
        }
      }
    }
  `);

  if (!data?.placeholderImage?.childImageSharp?.fluid) {
    return <div>Picture not found</div>;
  }

  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
};

export default Image;

Here we use gatsby-image for optimized images in lazy loading. useStaticQuery is used from gatsby to query static resources in build time.

What's really awesome, you can use famous GraphiQL out of the box to test and create these static queries. After you npm start your project, just navigate to http://localhost:8000/___graphql and run our image query like this;

How about dynamic data?

OK, Gatsby is great with static pages. But what if we need dynamic data? Is it only meant to be used with such static content? For a perfect answer to this question, you can watch Jason Lengstorf talking about beyond static with Gatsby.

We can easily make use of Apollo Client here. All we need to do is to create an Apollo Provider and pass it down from the very root of our component tree...

Entering Apollo Client realm

We have a wonderful friend, graphql code generator. We install its packages as dev dependencies first;

    "@graphql-codegen/add": "^2.0.1",
    "@graphql-codegen/cli": "^1.17.10",
    "@graphql-codegen/typescript": "^1.17.10",
    "@graphql-codegen/typescript-operations": "^1.17.8",
    "@graphql-codegen/typescript-react-apollo": "^2.0.7",
    "@graphql-codegen/typescript-resolvers": "^1.17.10"

It generates our types using graphql schema saving us from creating ,sometimes hundreds of, models manually and provides perfectly typed structure. First we create codegen.yml. We declare schema URL, our queries file and let codegen know which file it's supposed to generate types into. Also codegen will generate query hooks and use typescript.

client-schema.graphql

type Car {
  brand: String
  model: String
  year: String
  fastEnough: Boolean!
}

type City {
  name: String
  country: String
  population: Int
}

extend type Country{
  selected: Boolean
}

type SelectedCountryType{
  code: String
  name: String
  capital: String
}

codegen.yml

schema: https://countries.trevorblades.com/
documents:
  - ./apollo/queries.ts
overwrite: true
generates:
  ./graphql/types.tsx:
    schema: client-schema.graphql
    plugins:
      - add:
          content: '/* eslint-disable */'
      - typescript
      - typescript-operations
      - typescript-react-apollo
      - typescript-resolvers
    config:
      withHOC: false
      withHooks: true
      withComponent: false
      useIndexSignature: true

Our queries.ts file includes Countries query;

import gql from 'graphql-tag';
const QUERY_COUNTRIES = gql`
  query countries($arg: CountryFilterInput) {
    countries(filter: $arg) {
      code
      name
      emoji
    }
  }
`;
export const Queries = {
  QUERY_COUNTRIES,
};

We need to add "codegen": "gql-gen" to scripts section in package.json. When we run npm run codegen, graphql\types.tsx file is supposed to be created now.

Apollo Client 3 (AC 3)

Apollo Client 3 has breaking changes. Now we need to install only one package;

"@apollo/client": "^3.2.5"

AC 3 has a very important change, no more client resolvers! Creating resolvers was really cumbersome and to me, it's very reasonable to remove it in this new paradigm.
What we need is to create the cache instantiating InMemoryCache. A lot of new things happening here. A completely saperate article can be dedicated to using cache in AC 3. Let's talk about our usage here.

Reactive Variables

This is a mechanism to store local state data. They are not (yet) inside Apollo Client cache. We can store any kind of data with them. One big advantage they bring is, we don't need to write queries to manuplate our local data! Really a big positive mind shift.Any update on them triggers an update on the query that uses it. You can control whether or not to trigger rendering, we'll be going into this.

Type Policies

We can customize our types using @client directive as you may know. Here we have a Country type and we need to add a selected property to it. This property is not (and should not be) in the original Country type definition. We need such a property only for our client side select / deselect operation. In AC 2, we needed to create a resolver to query countries with selected property. In AC 3, we just create a type policy on Country type. We just created a selected field under fields making use of selectedCountryVar reactive variable. Any update on this reactive variable will trigger update of our useCountriesLazyQuery hook and the query result will include updated selected data depending on code value. Much cleaner than using resolvers.

Another new entity in the type policy is keyFields. We just talked about the usage of selected property. Now we want to remove the selected country. In AC 2, we could have done this by using cache.WriteData. In my app, there was an extensive usage of cache.WriteData. Unfortunately, in AC 3 there's no cache.WriteData! Not a big problem, we can just update them with cache.ReadQuery and cache.WriteQuery. AC 3 offers more; cache.evict. We need to set the keyFields to use them later to remove this cache entry by evicting it.

apollo\cache.ts

import { InMemoryCache, makeVar } from '@apollo/client';
import { Car, City, Country, SelectedCountryType } from '../graphql/types';

export const cache: InMemoryCache = new InMemoryCache({
  typePolicies: {
    Country: {
      keyFields: ['code'],
      fields: {
        selected: (_, { readField }) => {
          const code = readField('code');
          return code === selectedCountryVar().code;
        },
      },
    },
    Query: {
      fields: {
        countries: {
          merge: (existing, incoming) => {
            return incoming;
          },
        },
      },
    },
  },
});

export const codeVar = makeVar<string>('');

export function makeSelectedCountryType(
  partial: Partial<SelectedCountryType>
): SelectedCountryType {
  return {
    code: '',
    name: '',
    capital: '',
    ...partial,
  };
}

export const selectedCountryVar = makeVar<SelectedCountryType>(
  makeSelectedCountryType({})
);

export const carFormVar = makeVar<Car>({
  brand: '',
  model: '',
  year: '',
  fastEnough: false,
});

export const cityFormVar = makeVar<City>({
  name: '',
  country: '',
  population: undefined,
});

Let's create Apollo Client

apollo\ApolloProxy.ts

import { ApolloClient, ApolloLink, createHttpLink } from '@apollo/client';
import fetch from 'isomorphic-fetch';
import { cache } from './cache';

const httpLink = createHttpLink({
  uri: 'https://countries.trevorblades.com/',
  fetch,
});
const link = ApolloLink.from([httpLink]);

export const client = new ApolloClient({
  link,
  cache,
});

Now we need to create and pass down the ApolloProvider

apollo\wrap-root-element.tsx

import React from 'react';
import { ApolloProvider } from '@apollo/client';
import { client } from './ApolloProxy';

export const wrapRootElement = ({ element }) => (
  <ApolloProvider client={client}>{element}</ApolloProvider>
);

We need to somehow let Gatsby use this wrap-root-element.tsx to wrap the whole app tree. That's where we use gatsby-browser.js

gatsby-browser.js

export { wrapRootElement } from './apollo/wrap-root-element';

We're now ready to create our pages making use of these AC 3 features. Let's create some pages to show off. We'll create header.tsx and layout.tsx components for our simple layout;

src\components\header.tsx

import {
  AppBar,
  createStyles,
  makeStyles,
  Theme,
  Toolbar,
} from '@material-ui/core';
import { Link } from 'gatsby';
import React from 'react';

const useStyles = makeStyles((theme: Theme) => {
  return createStyles({
    href: {
      margin: 20,
      color: 'white',
    },
    appBar: {
      width: '100%',
    },
  });
});

const Header = () => {
  const classes = useStyles({});
  return (
    <AppBar position="static">
      <Toolbar>
        <Link className={classes.href} to="/">
          Home
        </Link>
        <Link className={classes.href} to="/cars">
          Cars
        </Link>
        <Link className={classes.href} to="/cities">
          Cities
        </Link>
        <Link className={classes.href} to="/countries">
          Countries
        </Link>
      </Toolbar>
    </AppBar>
  );
};

export default Header;

src\components\layout.tsx

import React from 'react';
import Header from './header';

interface Props {
  children: React.ReactNode;
}

const Layout = ({ children }: Props) => {
  return (
    <>
      <Header />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0 1.0875rem 1.45rem`,
        }}>
        <main>{children}</main>
        <footer
          style={{
            marginTop: `2rem`,
          }}>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.com">Gatsby</a>
        </footer>
      </div>
    </>
  );
};

export default Layout;

Our index (home), cars, cities & countries pages;

src\pages\index.tsx

import React from 'react';
import Image from '../components/image';
import Layout from '../components/layout';
import './index.css';

export default function Home() {
  return (
    <Layout>
      <h1>Hi people</h1>
      <p>This is Gatsby & Graphql Code Generator & Apollo Client 3</p>

      <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
        <Image />
      </div>
    </Layout>
  );
}

Our first functional page is cars.tsx. Here we have a basic Formik form and want to persist that form data to AC 3 cache when we click persist cars button.

onClick={() => carFormVar(formik.values)}

We use carFormVar reactive variable as Formik initial value. carFormVar is already created with the initial field values in cache.ts. Altough there's nothing fancy here, updating directly reactive variable without dealing with query syntax is important. If go to a different route other than cars page and route back, you'll find your form expectedly filled with your data;

src\pages\cars.tsx

import {
  Button,
  Checkbox,
  createStyles,
  FormControl,
  FormControlLabel,
  Grid,
  InputLabel,
  makeStyles,
  MenuItem,
  Paper,
  Select,
  Theme,
  Typography,
} from '@material-ui/core';
import clsx from 'clsx';
import TextField from '@material-ui/core/TextField';
import { Formik, useFormikContext } from 'formik';
import * as React from 'react';
import { Car } from '../../graphql/types';
import DisplayFormikState from '../components/DisplayFormikState';
import { carFormVar } from '../../apollo/cache';
import { RouteComponentProps } from '@reach/router';
import Layout from '../components/layout';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    button: {
      margin: theme.spacing(1),
      width: 250,
    },
    input: {
      width: 250,
    },
    formControl: {
      width: 250,
    },
    visible: {
      visibility: 'visible',
    },
    hidden: {
      visibility: 'hidden',
    },
    paper: {
      width: '100%',
      margin: '20px 0px 0px 0px',
      padding: 20,
    },
  })
);

interface CarFormProps {}

const CarForm: React.FunctionComponent<CarFormProps> = (
  props: CarFormProps
) => {
  const classes = useStyles(props);
  const formik = useFormikContext<Car>();

  const submitCountClassName = clsx({
    [classes.visible]: formik.submitCount > 0,
    [classes.hidden]: formik.submitCount === 0,
  });

  return (
    <form>
      <Paper variant="outlined" className={classes.paper}>
        <Grid container direction="column" justify="center" alignItems="center">
          <TextField
            className={classes.input}
            name="brand"
            label="Brand"
            value={formik.values.brand}
            onChange={formik.handleChange}
            variant="outlined"
            margin="normal"
          />

          <TextField
            className={classes.input}
            name="model"
            label="Model"
            value={formik.values.model}
            onChange={formik.handleChange}
            variant="outlined"
            margin="normal"
          />

          <FormControl
            margin="normal"
            variant="outlined"
            className={classes.formControl}>
            <InputLabel id="demo-simple-select-outlined-label">Year</InputLabel>
            <Select
              labelId="demo-simple-select-outlined-label"
              id="demo-simple-select-outlined"
              value={formik.values.year}
              onChange={(e) => {
                formik.setFieldValue('year', e.target.value);
              }}
              labelWidth={30}>
              <MenuItem value={''}>
                <em>None</em>
              </MenuItem>
              <MenuItem value={'2017'}>2017</MenuItem>
              <MenuItem value={'2018'}>2018</MenuItem>
              <MenuItem value={'2019'}>2019</MenuItem>
            </Select>
          </FormControl>
          <FormControlLabel
            control={
              <Checkbox
                name="fastEnough"
                checked={formik.values.fastEnough}
                value="fastEnough"
                onChange={(e) => {
                  formik.setFieldValue('fastEnough', e.target.checked);
                }}
              />
            }
            label="Fast Enough"></FormControlLabel>

          <Button
            variant="contained"
            color="primary"
            className={classes.button}
            onClick={() => carFormVar(formik.values)}>
            Persist Cars
          </Button>
          <Typography
            className={submitCountClassName}
            variant="subtitle1"
            color="textSecondary">
            {`Car form is persisted ${formik.submitCount}. time`}
          </Typography>
          <DisplayFormikState {...formik.values} />
        </Grid>
      </Paper>
    </form>
  );
};

interface ICars extends RouteComponentProps {}

const Cars: React.FunctionComponent<ICars> = (props: ICars) => {
  return (
    <Layout>
      <Formik initialValues={carFormVar()} onSubmit={(values) => {}}>
        <CarForm />
      </Formik>
    </Layout>
  );
};

export default Cars;

Our second page is cities. It's again a Formik form. However, use case is different. Normally, Formik state is meant to be ephemeral and is to be persisted deliberately. Our cars page was build just like that. If you ever tried to keep your form state on, for instance, React Context, and update it on each field's onChange handler you've probably seen that it causes undesired renders and that's why Formik documentaion points that the form state should be kept ephemeral.
Using reactive variables in AC 3, we can do better. We created cityFormVar in our cache with the initial values again. Fields' change handler is;

const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
  formik.handleChange(event);
  cityFormVar({ ...cityFormVar(), [event.target.name]: event.target.value });
};

After updating Formik state, we update cityFormVar at the same time.

Let's navigate to cities page and update some fields. As you see, on each key stroke, only Formik renders, which is a usual Formik behavior. Cities page is not rendered unnecessarily. If you navigate to a different page and come back, you'll find your form filled with your data.

We use cityFormVar reactive variable as Formik initial data as below. Updating cityFormVar don't force the page render. Which is our desired behaviour.

<Formik initialValues={cityFormVar()} onSubmit={(values) => {}}>

If we use it as below, cities page would rerender in every update of cityFormVar. So, reactive variables let us control the rendering...

const cityForm = useReactiveVar(cityFormVar);
.
.
.
<Formik initialValues={cityForm} onSubmit={(values) => {}}>

src\pages\cities.tsx

import * as React from 'react';
import { Formik, useFormikContext } from 'formik';
import TextField from '@material-ui/core/TextField';
import {
  Grid,
  Button,
  makeStyles,
  Theme,
  createStyles,
  Typography,
  Paper,
} from '@material-ui/core';
import DisplayFormikState from '../components/DisplayFormikState';
import { City } from '../../graphql/types';
import clsx from 'clsx';
import { cityFormVar } from '../../apollo/cache';
import { RouteComponentProps } from '@reach/router';
import Layout from '../components/layout';
import useRenderCount from '@hooks/render-count';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    button: {
      margin: theme.spacing(1),
      width: 250,
    },
    input: {
      width: 250,
    },
    visible: {
      visibility: 'visible',
    },
    hidden: {
      visibility: 'hidden',
    },
    paper: {
      width: '100%',
      margin: '20px 0px 0px 0px',
      padding: 20,
    },
  })
);

interface CityFormProps {}
const CityForm = (props: CityFormProps) => {
  const classes = useStyles(props);
  const renderCount = useRenderCount();
  const formik = useFormikContext<City>();
  const submitCountClassName = clsx({
    [classes.visible]: formik.submitCount > 0,
    [classes.hidden]: formik.submitCount === 0,
  });

  const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    formik.handleChange(event);
    cityFormVar({ ...cityFormVar(), [event.target.name]: event.target.value });
  };

  return (
    <form>
      <Paper variant="outlined" className={classes.paper}>
        <Grid container direction="column" justify="center" alignItems="center">
          <TextField
            className={classes.input}
            name="name"
            label="Name"
            value={formik.values.name}
            onChange={changeHandler}
            variant="outlined"
            margin="normal"
          />

          <TextField
            className={classes.input}
            name="country"
            label="Country"
            value={formik.values.country}
            onChange={changeHandler}
            variant="outlined"
            margin="normal"
          />

          <TextField
            className={classes.input}
            name="population"
            label="Population"
            value={formik.values.population}
            onChange={changeHandler}
            variant="outlined"
            margin="normal"
          />

          <DisplayFormikState {...formik.values} />
          <Typography>Render count : {renderCount}</Typography>
        </Grid>
      </Paper>
    </form>
  );
};

interface ICities extends RouteComponentProps {}

const Cities: React.FunctionComponent<ICities> = (props: ICities) => {
  const renderCount = useRenderCount();

  return (
    <Layout>
      <Formik initialValues={cityFormVar()} onSubmit={(values) => {}}>
        <CityForm />
      </Formik>
      <Typography>Render count : {renderCount}</Typography>
    </Layout>
  );
};

export default Cities;

Our third page is Countries. Here is the use case;

When the page initially renders, query countries and display.

We use useCountriesLazyQuery hook which graphql code generator has already generated.

Top part is again a simple Formik form using only codeVar reactive variable. Initially set to empty string in the cache.ts.
To query the countries, we use an api https://countries.trevorblades.com/ You can check it out and create different queries.
We defined our countries query in queries.ts and use this file in codegen.yml. After the very first render we run the query handler which uses lazy query hook;

  useEffect(() => {
    queryHandler(codeVar());
  }, []);

Result data is displayed using Material-UI table.

We can re-query countries depending on the two charactes entered as code parameter.

We update the codeVar in the textbox's change handler. So, we can run the query for different country codes.

We can select any country with a checkbox

First cell of each row of the table is a checkbox to select that country;

  <TableCell align="center">
    <Checkbox
      className={classes.checkbox}
      checked={country.selected}
      disableRipple={true}
      onChange={() => {
        const { __typename, selected, ...rest } = country;
        selectedCountryVar({ ...rest });
      }}
      inputProps={{ 'aria-label': 'primary checkbox' }}
    />
  </TableCell>

We created a selectedCountryVar reactive variable in cache.ts. When the checkbox is checked, selectedCountryVar is updated with the selected country. useCountriesLazyQuery re-queries upon this change since the selected field depends on selectedCountryVar. selected field's value is created dynamically as true or false comparing selectedCountryVar().code and each contry's code value;

  fields: {
          selected: (_, { readField }) => {
            const code = readField('code');
            return code === selectedCountryVar().code;
          },
        },

In AC 2, we needed to manipulate the cache eighter by cache.WriteData or creating a resolver and using cache.ReadQuery & cache.WriteQuery to make one record selected. Reactive variables simplifies it a lot.

We can remove any country

Last cell of the table rows is an icon button to remove the country. We already set keyFields: ['code'] in Country type policy in cache.ts. Now we can identify the country to find its id to evict from the cache cache.evict({ id: cache.identify(country) });. useCountriesLazyQuery hook gets notified by that cache update and requeries. So, countries page re-renderes with the remainin countries in the cache.

  <TableCell align="center">
    <IconButton
      disableRipple={true}
      disableFocusRipple={true}
      className={classes.deleteButton}
      onClick={() => {
        cache.evict({ id: cache.identify(country) });
        cache.gc();

        if (selectedCountryVar().code === country.code) {
          selectedCountryVar(makeSelectedCountryType({}));
        }
      }}>
      <DeleteIcon fontSize="small" />
    </IconButton>
  </TableCell>

We can clear the query result.

So far so good. One final behaviour is to clear the query result and return the page to a state when the query has not yet run. According to Apollo documentation,

          onClick={() => {
            cache.evict({
              id: "ROOT_QUERY",
              fieldName: 'countries',
              broadcast: true
            });
            cache.gc();
          }}

above code is supposed to remove all variances of countries query. i.e., all countries queries run with different arguments by now. AC 3 actually removes those query entities from ROOT_QUERY. That's OK. However, upon this cache update, our useCountriesLazyQuery gets notified and runs the query and fills the cache with all the countries! I tried several options, unfortunately non of them is a perfect fit. I opened an issue https://github.com/apollographql/apollo-client/issues/7300 still to be solved.

src\pages\countries.tsx

import { useApolloClient } from '@apollo/client';
import {
  Button,
  Checkbox,
  Grid,
  IconButton,
  TextField,
  Typography,
} from '@material-ui/core';
import Paper from '@material-ui/core/Paper';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import DeleteIcon from '@material-ui/icons/Delete';
import { RouteComponentProps } from '@reach/router';
import { Formik } from 'formik';
import React, { useEffect } from 'react';
import {
  cache,
  codeVar,
  makeSelectedCountryType,
  selectedCountryVar,
} from '../../apollo/cache';
import { Queries } from '../../apollo/queries';
import {
  CountriesQuery,
  CountriesQueryVariables,
  useCountriesLazyQuery,
} from '../../graphql/types';
import DisplayFormikState from '../components/DisplayFormikState';
import Layout from '../components/layout';

const useStyles = makeStyles({
  table: {
    minWidth: 650,
  },
  checkbox: {
    padding: 0,
  },
  deleteButton: {
    margin: 0,
    padding: 0,
  },
  paper: {
    width: '100%',
    margin: '20px 0px 0px 0px',
    padding: 20,
  },
  tableContainer: {
    height: 500,
    margin: '20px 0px 0px 0px',
    padding: 20,
  },
});

interface CounriesProps extends RouteComponentProps {}

const Countries: React.FunctionComponent<CounriesProps> = (
  props: CounriesProps
) => {
  const classes = useStyles();
  const client = useApolloClient();

  const queryHandler = (code: string) => {
    countriesLazy({
      variables: {
        arg: {
          code: { regex: code },
        },
      },
    });
  };

  useEffect(() => {
    queryHandler(codeVar());
  }, []);

  const [countriesLazy, { data, loading, error }] = useCountriesLazyQuery();

  return (
    <Layout>
      <Grid container direction="column" justify="center" alignItems="center">
        <Paper variant="outlined" className={classes.paper}>
          <Formik initialValues={{ code: codeVar() }} onSubmit={(values) => {}}>
            {({ values, handleChange, resetForm }) => (
              <Grid
                item
                container
                direction="row"
                justify="flex-start"
                alignItems="center">
                <TextField
                  value={values.code}
                  label="code"
                  name="code"
                  variant="outlined"
                  size="small"
                  onChange={(e) => {
                    handleChange(e);
                    codeVar(e.target.value);
                  }}></TextField>

                <Button onClick={() => queryHandler(values.code)}>
                  <Typography variant="caption">Query</Typography>
                </Button>
                <Button
                  onClick={() => {
                    if (data && data.countries && data.countries.length > 0) {
                      selectedCountryVar(makeSelectedCountryType({}));
                      client.writeQuery < CountriesQuery,
                        CountriesQueryVariables >
                          {
                            query: Queries.QUERY_COUNTRIES,
                            data: {
                              countries: [],
                            },
                            variables: {
                              arg: {
                                code: { regex: codeVar() },
                              },
                            },
                          };
                      cache.evict({
                        id: 'ROOT_QUERY',
                        //fieldName: 'countries({"filter":{"code":{"regex":""}}})',
                        fieldName: 'countries',
                        broadcast: false,
                      });
                      cache.gc();
                      codeVar('');
                      resetForm();
                    }
                  }}>
                  <Typography variant="caption">Clear</Typography>
                </Button>
              </Grid>
            )}
          </Formik>
        </Paper>

        {loading && <p>Loading...</p>}
        {error && <p>Error :-(</p>}
        {data && (
          <TableContainer className={classes.tableContainer} component={Paper}>
            <Table
              className={classes.table}
              size="small"
              aria-label="a dense table">
              <TableHead>
                <TableRow>
                  <TableCell></TableCell>
                  <TableCell align="center">Code</TableCell>
                  <TableCell align="left">Name</TableCell>
                  <TableCell align="left">Capital</TableCell>
                  <TableCell></TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {data.countries.map((country) => (
                  <TableRow key={country.code}>
                    <TableCell align="center">
                      <Checkbox
                        className={classes.checkbox}
                        checked={country.selected}
                        disableRipple={true}
                        onChange={() => {
                          const { __typename, selected, ...rest } = country;
                          selectedCountryVar({ ...rest });
                        }}
                        inputProps={{ 'aria-label': 'primary checkbox' }}
                      />
                    </TableCell>
                    <TableCell align="center">{country.code}</TableCell>
                    <TableCell align="left">{country.name}</TableCell>
                    <TableCell align="left">{country.capital}</TableCell>
                    <TableCell align="center">
                      <IconButton
                        disableRipple={true}
                        disableFocusRipple={true}
                        className={classes.deleteButton}
                        onClick={() => {
                          cache.evict({ id: cache.identify(country) });
                          cache.gc();

                          if (selectedCountryVar().code === country.code) {
                            selectedCountryVar(makeSelectedCountryType({}));
                          }
                        }}>
                        <DeleteIcon fontSize="small" />
                      </IconButton>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        )}
        <DisplayFormikState {...selectedCountryVar()} />
      </Grid>
    </Layout>
  );
};

export default Countries;

Thanks for reading !

Creating DotNet Core 3.1 GraphQL api using EF Core, Postgresql & Docker

murat — Sun, 09 Aug 2020 08:36:42 +0000

Introduction

We will create a GraphQL api using dotnet core 3.1 webapi. For someone from dotnet framework and C# background, dotnet core is awesome due to it's platform independence. You can develop not only on Windows, but also on MacOS or Linux. This leads the way to create a Docker image of your app and host it on Kubernetes as a container orchestrator.

Complete github repo is here

In this article, we'll setup our project structure and create a development environment. Here are the steps;

1. Project creation

2. Adding Postgresql using docker compose

3. Adding Entity Framework Core. We'll be using code first

4. Adding GraphQL. We'll create query, mutation and also subscription.

In a second article, we'll be creating our own Docker image and deploy and run it on OpenShift 4.4 platform as our Kubernetes orchestrator.

Lets start...

1. Project creation

We'll be using Visual Studio 2019 as our IDE. Also we need Docker Desktop installed on our development machine. Now we need to check the installed dotnet core SDKs;



D:\>dotnet --list-sdks
2.2.103 [C:\Program Files\dotnet\sdk]
2.2.105 [C:\Program Files\dotnet\sdk]
3.0.101 [C:\Program Files\dotnet\sdk]
3.1.201 [C:\Program Files\dotnet\sdk]
3.1.302 [C:\Program Files\dotnet\sdk]

You can have different SDK versions installed. What we need is SDK 3.1. Now create a folder (mine is graphql-net-core-api-starter) and navigate there. Issue below cli commands to create necessary projects;



dotnet new webapi --name GraphQL.WebApi
dotnet new sln --name graphql-net-core-api-starter

Eventually, our solution structure should be like this;

Make sure that the project file has <TargetFramework>netcoreapp3.1</TargetFramework>

our launch settings is like below;

graphql.webapi\Properties\launchSettings.json



{
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "profiles": {
    "GraphQL.WebApi": {
      "commandName": "Project",
      "launchBrowser": true,
      "launchUrl": "ui/playground",
      "applicationUrl": "http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

Our project's nuget package references are as follows,



<ItemGroup>
    <PackageReference Include="graphiql" Version="2.0.0" />
    <PackageReference Include="GraphQL.Server.Ui.Playground" Version="3.4.0" />
    <PackageReference Include="GraphQL" Version="2.4.0" />
    <PackageReference Include="GraphQL.Server.Transports.WebSockets" Version="3.4.0" />
    <PackageReference Include="GraphQL.Client.Abstractions.Websocket" Version="3.1.3" />
    <PackageReference Include="GraphQL.Server.Transports.AspNetCore" Version="3.4.0" />
    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="3.1.6" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="3.1.6">
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
      <PrivateAssets>all</PrivateAssets>
    </PackageReference>
    <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="3.1.4" />   
    <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="3.1.6" />   
    <PackageReference Include="System.Reactive" Version="4.4.1" />   
    <PackageReference Include="System.Reactive.Compatibility" Version="4.4.1" />   
  </ItemGroup>

navigate to graphql.webapi and issue dotnet run you must have a running api on port 5000 now!

2. Adding Postgresql using docker compose

Let's add below docker-compose.yaml file;



version: "3.3"
networks:
  graph-starter:
services:
  postgresql:
    restart: always
    image: postgres:12.2-alpine
    ports:
      - "5432:5432"
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
      - POSTGRES_DB=graphdb
    volumes:
      - /var/lib/postgresql/data
    networks:
      - graph-starter

In vscode terminal run the command docker-compose up -d After pulling necessary packages from docker hub, our db will be ready. Check it out with the command docker ps -a Its result is supposed to be like;



CONTAINER ID        IMAGE                  COMMAND                  CREATED             STATUS              PORTS                    NAMES
35ba1091da13        postgres:12.2-alpine   "docker-entrypoint.s…"   8 minutes ago       Up 8 minutes        0.0.0.0:5432->5432/tcp   graphql-net-core-api-starter_postgresql_1

We have a postgresql db without even installing it, wonderful!

3. Adding Entity Framework Core

As models increases, repository methods have to be implemented in each repository. Since most of the implementations will be similar and repetitive, a rather generic approach is necessary. To achieve this goal, we will use generic repository pattern. Thereby all models will inherit existing methods and new ones can be added quickly.

As of dotnet core 3.0, you need to install dotnet-ef as separate tool;


 tool install --global dotnet-ef --version 3.1.6

Now we'll create a base entity from which all the other domain models will be extended. We're assuming that all the models will have id as primary key and creation_date fields in database tables.

GraphQL.WebApi\Interfaces\IEntity.cs



using System;
namespace GraphQL.WebApi.Interfaces
{
    public interface IEntity
    {
        int id { get; set; }
        DateTime? creation_date { get; set; }
    }
}

GraphQL.WebApi\Models\BaseEntity.cs



using GraphQL.WebApi.Interfaces;
using System;
namespace GraphQL.WebApi.Models
{
    public abstract class BaseEntity : IEntity
    {
        public int id { get; set; }
        public DateTime? creation_date { get; set; }

    }
}

We can create our generic repository;

GraphQL.WebApi\Interfaces\IGenericRepository.cs



using GraphQL.WebApi.Models;
using System.Collections.Generic;

namespace GraphQL.WebApi.Interfaces
{
    public interface IGenericRepository<T> where T : BaseEntity
    {
        IEnumerable<T> GetAll();
        T GetById(int id);
        T Insert(T entity);
        T Update(T entity);
        void Delete(int id);
    }
}

GraphQL.WebApi\Repositories\GenericRepository.cs



using GraphQL.WebApi.Interfaces;
using GraphQL.WebApi.Models;
using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Linq;

namespace GraphQL.WebApi.Repository
{
    public class GenericRepository<T> : IGenericRepository<T> where T : BaseEntity
    {
        protected readonly DatabaseContext context;
        private DbSet<T> entities;
        string errorMessage = string.Empty;
        public GenericRepository(DatabaseContext context)
        {
            this.context = context;
            entities = context.Set<T>();
        }
        public IEnumerable<T> GetAll()
        {
            return entities.AsEnumerable();
        }
        public T GetById(int id)
        {
            return entities.SingleOrDefault(s => s.id == id);
        }
        public T Insert(T entity)
        {
            if (entity == null) throw new ArgumentNullException("entity");

            entities.Add(entity);
            context.SaveChanges();
            return entity;
        }
        public T Update(T entity)
        {
            if (entity == null) throw new ArgumentNullException("entity");
            context.SaveChanges();
            return entity;
        }
        public void Delete(int id)
        {
            T entity = entities.SingleOrDefault(s => s.id == id);
            entities.Remove(entity);
            context.SaveChanges();
        }
    }
}

We can now define the database context;

GraphQL.WebApi\Repositories\DatabaseContext.cs



using GraphQL.WebApi.Models;
using Microsoft.EntityFrameworkCore;

namespace GraphQL.WebApi.Repository
{
    public class DatabaseContext : DbContext
    {
        public DatabaseContext(DbContextOptions<DatabaseContext> options) : base(options) { }
        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            base.OnModelCreating(modelBuilder);

            modelBuilder.Entity<City>(entity =>
            {
                entity.Property(e => e.creation_date).HasDefaultValueSql("(now())");

            });


        }
    }
}

As the initial domain model City is added to database context. We'll be adding new domain models here. OnModelCreating is the correct place to further shape the models, set default values, create indexes etc.

Let's add City as our first model. Database schema and table name is supplied in table attribute,

GraphQL.WebApi\Models\City.cs



using System.ComponentModel.DataAnnotations.Schema;

namespace GraphQL.WebApi.Models
{
    [Table("city", Schema = "business")]
    public partial class City: BaseEntity
    {
        public string name { get; set; }
        public int? population { get; set; }
    }
}

Basically, we're ready to create our first migration. However, we need a way to supply database connection info to database context in designtime. First add the connection string to application configuraion;

GraphQL.WebApi\appsettings.Development.json



{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "ConnectionString": "Server=localhost;Port=5432;Database=graphdb;Username=postgres;Password=postgres"
}

Then, create database context factory. We first read the db connection string from appsettings.Development.json. Then supply it to DbContextOptionsBuilder. Finally, create the DatabaseContext with it.

GraphQL.WebApi\Repositories\DatabaseContextFactory.cs



using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.Design;
using Microsoft.Extensions.Configuration;
using System;
using System.IO;

namespace GraphQL.WebApi.Repository
{
    public class DatabaseContextFactory : IDesignTimeDbContextFactory<DatabaseContext>
    {
        public DatabaseContext CreateDbContext(string[] args)
        {
            var optionsBuilder = new DbContextOptionsBuilder<DatabaseContext>();

            var path = Directory.GetCurrentDirectory();

            var configuration = new ConfigurationBuilder()
               .SetBasePath(path)              
               .AddJsonFile($"appsettings.Development.json", optional: false, reloadOnChange: true)
               .AddEnvironmentVariables()
               .Build();           

            var connectionString = configuration["ConnectionString"];

            Console.WriteLine($"connectionString:{connectionString}");

            optionsBuilder.UseNpgsql(connectionString);
            return new DatabaseContext(optionsBuilder.Options);
        }
    }
}

Let's build the project and create our initial migration,



D:\Dev\GITHUB\graphql-net-core-api-starter\GraphQL.WebApi>dotnet ef migrations add InitialCreate

If everything went alright, you'll have an initial migration like this,

Let's add another model Country,

GraphQL.WebApi\Models\Country.cs



using System.ComponentModel.DataAnnotations.Schema;

namespace GraphQL.WebApi.Models
{
    [Table("country", Schema = "business")]
    public partial class Country : BaseEntity
    {
        public string name { get; set; }
        public string continent { get; set; }
    }
}

Add this new model to DatabaseContext.cs



 modelBuilder.Entity<Country>(entity =>
{
    entity.Property(e => e.creation_date).HasDefaultValueSql("(now())");
});

Run the command dotnet ef migrations add AddCountry to add a new migration which includes necessary db schema update on top of InitialCreate migration.

Very well. Suddenly realized that we forgot to add foreign key relation between City and Country tables. We need to remove lastly added migration running command dotnet ef migrations remove This will pops out the last migration and it also disapears from Migrations folder.

We can now make the necessary ammendments to the models and create a brand new migration. Updated City.cs is like this,



using System.ComponentModel.DataAnnotations.Schema;

namespace GraphQL.WebApi.Models
{
    [Table("city", Schema = "business")]
    public partial class City: BaseEntity
    {
        public string name { get; set; }
        public int? population { get; set; }
        public int country_id { get; set; }

        [ForeignKey("country_id")]
        public Country Country { get; set; }
    }
}

Note the ForeignKey attribute. It'll add county_id column to city table and create a foreign key relation with primary key id column of country table. Create again AddCountry migration;


 ef migrations add AddCountry

Let's reflect all what we've done so far to database. Issue the command dotnet ef database update If you're lucky enough, your db is supposed to be updated with these new domain models.

As seen here, graphql db updated with city and country tables. I'm using dbeaver for db operations. A fantastic free tool. Highly recommend it.

Finally, we need to update Startup.cs like below to add the DatabaseContext to services collection and register GenericRepository to dependency injection.



 public void ConfigureServices(IServiceCollection services)
  {
      services.AddDbContext<DatabaseContext>(options =>
      {
          options.UseNpgsql(Configuration["ConnectionString"]);
      });
      services.AddScoped(typeof(IGenericRepository<>), typeof(GenericRepository<>));
      services.AddControllers();
  }

If you'd like to have all the migrations executed on your db when the service starts, add below part to Startup.cs Configure



  if (env.IsDevelopment())
        {
            using (var serviceScope = app.ApplicationServices.GetService<IServiceScopeFactory>().CreateScope())
            {
                serviceScope.ServiceProvider.GetRequiredService<DatabaseContext>().Database.Migrate();
            }
        }

Try dotnet run Your webapi is still supposed to run on port 5000.

4. Adding GraphQL

We'll create our GraphQL schema that consist Query, Mutation & Subscription. We'll add pretty many stuff here. After adding necessary folders, project structure is as follows,

Let's start adding our MainMutation

GraphQL.WebApi\Graph\Mutation\MainMutation.cs



using GraphQL.Types;
using GraphQL.WebApi.Interfaces;
using Microsoft.AspNetCore.Hosting;
using System;

namespace GraphQL.WebApi.Graph.Mutation
{
    public class MainMutation : ObjectGraphType
    {
        public MainMutation(IServiceProvider provider, IWebHostEnvironment env, IFieldService fieldService)
        {
            Name = "MainMutation";
            fieldService.ActivateFields(this, FieldServiceType.Mutation, env, provider);
        }
    }
}

MainMutation is a top level entity (like MainQuery and MainSubscription) to be added to GraphQL schema. Normally it includes all mutation definitions in it. i.e., you may have tens of mutations defined here. For a trivial project, that would be quiet alright. However, as the project gets larger and the number of mutations & queries increase, this becomes a problem. Let's say you have a large developers team. Everybody will be updating the same file when they update a mutation. The same is valid for query development. This would lead to merge conflicts when developments are to push to GIT. It's not actually very good in terms of transparency. You'll not be able to see all the mutations and queries at a glance. It's much leaner to create separate files for each schema items. This brings a question, how to load these schema items? Answer is IFieldService

GraphQL.WebApi\Interfaces\IFieldService.cs



using GraphQL.Types;
using Microsoft.AspNetCore.Hosting;
using System;

namespace GraphQL.WebApi.Interfaces
{
    public interface IFieldService
    {
        void ActivateFields(
            ObjectGraphType objectGraph,
            FieldServiceType fieldType,
            IWebHostEnvironment env,
            IServiceProvider provider);

        void RegisterFields();
    }

    public enum FieldServiceType
    {
        Query,
        Mutation,
        Subscription
    }
}

GraphQL.WebApi\Services\FieldService.cs



using GraphQL.Types;
using GraphQL.WebApi.Interfaces;
using Microsoft.AspNetCore.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;

namespace GraphQL.WebApi.Services
{
    public class FieldService : IFieldService
    {
        private IDictionary<FieldServiceType, IList<IFieldServiceItem>> _fieldTable;
        private readonly ISubscriptionServices _subscriptionServices;

        public FieldService(ISubscriptionServices subscriptionServices)
        {
            _subscriptionServices = subscriptionServices;
            _fieldTable = new Dictionary<FieldServiceType, IList<IFieldServiceItem>>();
            _fieldTable.Add(FieldServiceType.Mutation, new List<IFieldServiceItem>());
            _fieldTable.Add(FieldServiceType.Query, new List<IFieldServiceItem>());
            _fieldTable.Add(FieldServiceType.Subscription, new List<IFieldServiceItem>());
        }

        public void ActivateFields(
            ObjectGraphType objectGraph,
            FieldServiceType fieldType,
            IWebHostEnvironment env,
            IServiceProvider provider)
        {

            var serviceItemList = _fieldTable[fieldType];

            foreach (var serviceItem in serviceItemList)
            {
                serviceItem.Activate(objectGraph, env, provider);
            }
        }

        public void RegisterFields()
        {
            var type = typeof(IFieldServiceItem);
            var types = AppDomain.CurrentDomain.GetAssemblies()
                .SelectMany(s => s.GetTypes())
                .Where(p => type.IsAssignableFrom(p));

            foreach (var fieldType in types)
            {
                if (fieldType.IsClass)
                {
                    if (typeof(IFieldMutationServiceItem).IsAssignableFrom(fieldType))
                    {
                        _fieldTable[FieldServiceType.Mutation].Add((IFieldServiceItem)Activator.CreateInstance(fieldType));
                    }
                    else if (typeof(IFieldQueryServiceItem).IsAssignableFrom(fieldType))
                    {
                        _fieldTable[FieldServiceType.Query].Add((IFieldServiceItem)Activator.CreateInstance(fieldType));
                    }
                    else if (typeof(IFieldSubscriptionServiceItem).IsAssignableFrom(fieldType))
                    {
                        _fieldTable[FieldServiceType.Subscription].Add((IFieldServiceItem)Activator.CreateInstance(fieldType));
                    }

                }
            }
        }
    }
}

Now we register this FieldService in Startup.cs



services.AddScoped<IFieldService, FieldService>();

Let's see our GraphQLSchema

GraphQL.WebApi\Graph\Schema\GraphQLSchema.cs



using GraphQL.WebApi.Graph.Mutation;
using GraphQL.WebApi.Graph.Query;
using GraphQL.WebApi.Graph.Subscription;
using GraphQL.WebApi.Interfaces;

namespace GraphQL.WebApi.Graph.Schema
{
    public class GraphQLSchema : GraphQL.Types.Schema
    {
        public GraphQLSchema(IDependencyResolver resolver) : base(resolver)
        {
            var fieldService = resolver.Resolve<IFieldService>();
            fieldService.RegisterFields();
            Mutation = resolver.Resolve<MainMutation>();
            Query = resolver.Resolve<MainQuery>();
            Subscription = resolver.Resolve<MainSubscription>();           
        }
    }
}

In the constructor, first thing to do is to resolve IFieldService and call its RegisterFields() method. What this does is, to collect all the classes which implements IFieldQueryServiceItem and keep them in _fieldTable of the FieldService Then MainMutation, MainQuery and MainSubscription are resolved.

Let's see MainQuery & MainSubscription as well,

GraphQL.WebApi\Graph\Query\MainQuery.cs



using GraphQL.Types;
using GraphQL.WebApi.Interfaces;
using Microsoft.AspNetCore.Hosting;
using System;

namespace GraphQL.WebApi.Graph.Query
{
    public class MainQuery : ObjectGraphType
    {
        public MainQuery(IServiceProvider provider, IWebHostEnvironment env, IFieldService fieldService)
        {
            Name = "MainQuery";
            fieldService.ActivateFields(this, FieldServiceType.Query, env, provider);
        }
    }
}

GraphQL.WebApi\Graph\Subscription\MainSubscription.cs



using GraphQL.Types;
using GraphQL.WebApi.Interfaces;
using Microsoft.AspNetCore.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace GraphQL.WebApi.Graph.Subscription
{
    public class MainSubscription : ObjectGraphType
    {
        public MainSubscription(IServiceProvider provider, IWebHostEnvironment env, IFieldService fieldService)
        {
            Name = "MainSubscription";
            fieldService.ActivateFields(this, FieldServiceType.Subscription, env, provider);
        }
    }
}

Now we need to register them in Startup.cs



 services.AddScoped<MainMutation>();
 services.AddScoped<MainQuery>();

Let's go over the mutations. They all implement IFieldMutationServiceItem and has to implement its Activate method. This leads to standardization and very clean architecture. Our first mutation is addCountry and it expects a mandadory parameter countryName. Each query, mutation & subscrition has its own resolver where they carry out the business logic. addCountry mutation firts receives the parameters and simply inserts new country in the resolver.

GraphQL.WebApi\Graph\Mutation\AddCountryMutation.cs



using GraphQL.Types;
using GraphQL.WebApi.Graph.Type;
using GraphQL.WebApi.Interfaces;
using GraphQL.WebApi.Models;
using Microsoft.AspNetCore.Hosting;
using System;


namespace GraphQL.WebApi.Graph.Mutation
{    public class AddCountryMutation : IFieldMutationServiceItem
    {
        public void Activate(ObjectGraphType objectGraph, IWebHostEnvironment env, IServiceProvider sp)
        {
            objectGraph.Field<CountryGType>("addCountry",
            arguments: new QueryArguments(               
               new QueryArgument<NonNullGraphType<StringGraphType>> { Name = "countryName" }
            ),
            resolve: context =>
            {                
                var countryName = context.GetArgument<string>("countryName");
                var countryRepository = (IGenericRepository<Country>)sp.GetService(typeof(IGenericRepository<Country>));

                var newCountry = new Country
                {
                    name = countryName
                };

                return countryRepository.Insert(newCountry);
            });
        }
    }
}

addCity mutation expects countryId, cityName mandadory parameters and an optional parameter population. After obtaining the parameters it creates a new city. It also notifies CityAddedService which we'll cover shortly.

GraphQL.WebApi\Graph\Mutation\AddCityMutation.cs



using GraphQL.Types;
using GraphQL.WebApi.Dto;
using GraphQL.WebApi.Graph.Type;
using GraphQL.WebApi.Interfaces;
using GraphQL.WebApi.Models;
using Microsoft.AspNetCore.Hosting;
using System;

namespace GraphQL.WebApi.Graph.Mutation
{
    public class AddCityMutation : IFieldMutationServiceItem
    {
        public void Activate(ObjectGraphType objectGraph, IWebHostEnvironment env, IServiceProvider sp)
        {
            objectGraph.Field<CityGType>("addCity",
            arguments: new QueryArguments(
               new QueryArgument<NonNullGraphType<IntGraphType>> { Name = "countryId" },
               new QueryArgument<NonNullGraphType<StringGraphType>> { Name = "cityName" },
               new QueryArgument<IntGraphType> { Name = "population" }
            ),
            resolve: context =>
            {                
                var countryId = context.GetArgument<int>("countryId");
                var cityName = context.GetArgument<string>("cityName");
                var population = context.GetArgument<int?>("population");

                var subscriptionServices = (ISubscriptionServices)sp.GetService(typeof(ISubscriptionServices));
                var cityRepository = (IGenericRepository<City>)sp.GetService(typeof(IGenericRepository<City>));
                var countryRepository = (IGenericRepository<Country>)sp.GetService(typeof(IGenericRepository<Country>));

                var foundCountry = countryRepository.GetById(countryId);

                var newCity = new City
                {
                    name = cityName,
                    country_id = countryId,
                    population=population
                };

                var addedCity = cityRepository.Insert(newCity);
                subscriptionServices.CityAddedService.AddCityAddedMessage(new CityAddedMessage
                {
                    cityName = addedCity.name,
                    countryName = foundCountry.name,
                    id = addedCity.id,
                    message = "A new city added"
                });
                return addedCity;

            });
        }
    }
}

addCountry and addCity mutations return CountryGType and CityGType respectively. Let's go over them,

GraphQL.WebApi\Graph\Type\CityGType.cs



using GraphQL.Types;
using GraphQL.WebApi.Interfaces;
using GraphQL.WebApi.Models;
using System;

namespace GraphQL.WebApi.Graph.Type
{
    public class CityGType : ObjectGraphType<City>
    {
        public IServiceProvider Provider { get; set; }
        public CityGType(IServiceProvider provider)
        {
            Field(x => x.id, type: typeof(IntGraphType));
            Field(x => x.name, type: typeof(StringGraphType));
            Field(x => x.population, type: typeof(IntGraphType));
            Field<CountryGType>("country", resolve: context => {
                IGenericRepository<Country> countryRepository = (IGenericRepository<Country>)provider.GetService(typeof(IGenericRepository<Country>));
                return countryRepository.GetById(context.Source.country_id);
            });
        }
    }
}

GraphQL.WebApi\Graph\Type\CountryGType.cs



using GraphQL.Types;
using GraphQL.WebApi.Interfaces;
using GraphQL.WebApi.Models;
using System;
using System.Linq;

namespace GraphQL.WebApi.Graph.Type
{
    public class CountryGType : ObjectGraphType<Country>
    {
        public IServiceProvider Provider { get; set; }
        public CountryGType(IServiceProvider provider)
        {
            Field(x => x.id, type: typeof(IntGraphType));
            Field(x => x.name, type: typeof(StringGraphType));
            Field<ListGraphType<CityGType>>("cities", resolve: context => {
                IGenericRepository<City> cityRepository = (IGenericRepository<City>)provider.GetService(typeof(IGenericRepository<City>));
                return cityRepository.GetAll().Where(w=> w.Country.id ==  context.Source.id);
            });
        }
    }
}

All the types which will be returned from our GraphQL api are supposed to extend ObjectGraphType If they will have some additional properties that are not originally in the base model, like cities property in CountryGType, we need to create a resolver for them. We add them to DI as follows,



    services.AddScoped<CityGType>();
    services.AddScoped<CountryGType>();

Our other two mutations are deleteCity and updateCity

GraphQL.WebApi\Graph\Mutation\DeleteCityMutation.cs



using GraphQL.Types;
using GraphQL.WebApi.Interfaces;
using GraphQL.WebApi.Models;
using Microsoft.AspNetCore.Hosting;
using System;

namespace GraphQL.WebApi.Graph.Mutation
{
    public class DeleteCityMutation : IFieldMutationServiceItem
    {
        public void Activate(ObjectGraphType objectGraph, IWebHostEnvironment env, IServiceProvider sp)
        {
            objectGraph.Field<StringGraphType>("deleteCity",
            arguments: new QueryArguments(
               new QueryArgument<NonNullGraphType<IntGraphType>> { Name = "cityId" }               
            ),
            resolve: context =>
            {
                var cityId = context.GetArgument<int>("cityId");
                var cityRepository = (IGenericRepository<City>)sp.GetService(typeof(IGenericRepository<City>));
                cityRepository.Delete(cityId);
                return $"cityId:{cityId} deleted";
            });
        }
    }
}

deleteCity is very simple. It's receives cityId mandadory parameter and deletes the city entity through cityRepository.

GraphQL.WebApi\Graph\Mutation\UpdateCityMutation.cs



using GraphQL.Types;
using GraphQL.WebApi.Graph.Type;
using GraphQL.WebApi.Interfaces;
using GraphQL.WebApi.Models;
using Microsoft.AspNetCore.Hosting;
using System;

namespace GraphQL.WebApi.Graph.Mutation
{
    public class UpdateCityMutation : IFieldMutationServiceItem
    {
        public void Activate(ObjectGraphType objectGraph, IWebHostEnvironment env, IServiceProvider sp)
        {
            objectGraph.Field<CityGType>("updateCity",
            arguments: new QueryArguments(
               new QueryArgument<NonNullGraphType<IntGraphType>> { Name = "cityId" },
               new QueryArgument<IntGraphType> { Name = "countryId" },
               new QueryArgument<StringGraphType> { Name = "cityName" },
               new QueryArgument<IntGraphType> { Name = "population" }
            ),
            resolve: context =>
            {
                var cityId = context.GetArgument<int>("cityId");
                var countryId = context.GetArgument<int?>("countryId");
                var cityName = context.GetArgument<string>("cityName");
                var population = context.GetArgument<int?>("population");

                var cityRepository = (IGenericRepository<City>)sp.GetService(typeof(IGenericRepository<City>));
                var foundCity = cityRepository.GetById(cityId);

                if (countryId != null)
                {
                    foundCity.country_id = countryId.Value;
                }
                if (!String.IsNullOrEmpty(cityName))
                {
                    foundCity.name = cityName;
                }
                if (population != null)
                {
                    foundCity.population = population.Value;
                }

                return cityRepository.Update(foundCity);
            });
        }
    }
}

updateCity expects a mandatory cityId of the entity to be updated and three optional parameters. We can update any of the countryId,cityName & population properties.

Let's see our two queries,

GraphQL.WebApi\Graph\Query\Business\CityQuery.cs



using GraphQL.Types;
using GraphQL.WebApi.Graph.Type;
using GraphQL.WebApi.Interfaces;
using GraphQL.WebApi.Models;
using Microsoft.AspNetCore.Hosting;
using System;
using System.Linq;

namespace GraphQL.WebApi.Graph.Query.Business
{
    public class CityQuery : IFieldQueryServiceItem
    {
        public void Activate(ObjectGraphType objectGraph, IWebHostEnvironment env, IServiceProvider sp)
        {
            objectGraph.Field<ListGraphType<CityGType>>("cities",
               arguments: new QueryArguments(
                 new QueryArgument<StringGraphType> { Name = "name" }
               ),
               resolve: context =>
               {            
                   var cityRepository = (IGenericRepository<City>)sp.GetService(typeof(IGenericRepository<City>));
                   var baseQuery = cityRepository.GetAll();
                   var name = context.GetArgument<string>("name");
                   if (name != default(string))
                   {
                       return baseQuery.Where(w => w.name.Contains(name));
                   }
                   return baseQuery.ToList();
               });
        }
    }
}

GraphQL.WebApi\Graph\Query\Business\CountryQuery.cs



using GraphQL.Types;
using GraphQL.WebApi.Graph.Type;
using GraphQL.WebApi.Interfaces;
using GraphQL.WebApi.Models;
using Microsoft.AspNetCore.Hosting;
using System;
using System.Linq;

namespace GraphQL.WebApi.Graph.Query.Business
{
    public class CountryQuery : IFieldQueryServiceItem
    {
        public void Activate(ObjectGraphType objectGraph, IWebHostEnvironment env, IServiceProvider sp)
        {
            objectGraph.Field<ListGraphType<CountryGType>>("countries",
               arguments: new QueryArguments(
                 new QueryArgument<StringGraphType> { Name = "name" }
               ),
               resolve: context =>
               {
                   var countryRepository = (IGenericRepository<Country>)sp.GetService(typeof(IGenericRepository<Country>));
                   var baseQuery = countryRepository.GetAll();
                   var name = context.GetArgument<string>("name");
                   if (name != default(string))
                   {
                       return baseQuery.Where(w => w.name.Contains(name));
                   }
                   return baseQuery.ToList();
               });
        }
    }
}

Both receives name parameter and execute related Linq queries.

GraphQL Subscriptions

Sometimes we need to notify the clientside when a certain operation (query / mutation) is carried out on the api. GraphQL Subscription makes use of websocket technology. We already installed


 Include="GraphQL.Server.Transports.WebSockets" Version="3.4.0" />

nuget package for this purpose.
We configure GraphQL service and add websocket in Configure like this,



  services.AddGraphQL(o => { o.ExposeExceptions = _env.IsDevelopment(); })
    .AddGraphTypes(ServiceLifetime.Scoped)             
    .AddWebSockets();

We've seen that we add Subscription = resolver.Resolve<MainSubscription>(); in our GraphQLSchema.cs

Let's say we'd like to get notified when a new city added to country Germany We don't need any notification in adding city to other countries.
First we create a subscription SubscriptionServices and register as singleton in Startup.cs as


 SubscriptionServices>();

GraphQL.WebApi\Services\SubscriptionServices.cs



using GraphQL.WebApi.Interfaces;

namespace GraphQL.WebApi.Services
{
    public class SubscriptionServices : ISubscriptionServices
    {
        public SubscriptionServices()
        {
            this.CityAddedService = new CityAddedService();
        }
        public CityAddedService CityAddedService { get; }
    }
}

GraphQL.WebApi\Services\CityAddedService.cs



using GraphQL.WebApi.Dto;
using System;
using System.Linq;
using System.Reactive.Linq;
using System.Reactive.Subjects;

namespace GraphQL.WebApi.Services
{
    public class CityAddedService
    {
        private readonly ISubject<CityAddedMessage> _messageStream = new ReplaySubject<CityAddedMessage>(1);
        public CityAddedMessage AddCityAddedMessage(CityAddedMessage message)
        {
            _messageStream.OnNext(message);
            return message;
        }

        public IObservable<CityAddedMessage> GetMessages(string countryName)
        {
            var mess = _messageStream
                .Where(message =>
                    message.countryName == countryName
                ).Select(s => s)
                .AsObservable();

            return mess;
        }
    }
}

CityAddedService uses System.Reactive.Linq and System.Reactive.Subjects. Here we've created a ReplaySubject which will hold only the last one CityAddedMessage, without storing the old messages. It's also important to note that GetMessages method will be called with countryName parameter as we need to decide if the city has been added to the county we just subscribed. We'll be making use of this GetMessages method in CityAddedSubscription

GraphQL.WebApi\Graph\Subscription\CityAddedSubscription.cs



using GraphQL.Resolvers;
using GraphQL.Types;
using GraphQL.WebApi.Dto;
using GraphQL.WebApi.Graph.Type;
using GraphQL.WebApi.Interfaces;
using Microsoft.AspNetCore.Hosting;
using System;

namespace GraphQL.WebApi.Graph.Subscription
{
    public class CityAddedSubscription : IFieldSubscriptionServiceItem
    {
        public void Activate(ObjectGraphType objectGraph, IWebHostEnvironment env, IServiceProvider sp)
        {
            objectGraph.AddField(new EventStreamFieldType
            {
                Name = "cityAdded",
                Type = typeof(CityAddedMessageGType),
                Resolver = new FuncFieldResolver<CityAddedMessage>(context => context.Source as CityAddedMessage),
                Arguments = new QueryArguments(                   
                    new QueryArgument<NonNullGraphType<StringGraphType>> { Name = "countryName" }
                ),
                Subscriber = new EventStreamResolver<CityAddedMessage>(context =>
                {
                    var subscriptionServices = (ISubscriptionServices)sp.GetService(typeof(ISubscriptionServices));
                    var countryName = context.GetArgument<string>("countryName");                  
                    return subscriptionServices.CityAddedService.GetMessages(countryName);
                })
            });
        }
    }
}

As you see, CityAddedSubscription is another schema object like queries & mutaions. So, it also implements IFieldSubscriptionServiceItem Interesting part is its Subscriber resolver. Here we obtain the relevant massage from CityAddedService using its aforementioned GetMessages method.

That much talk is enough I guess. Let's try out our api to see it in action. Before that, let me tell you about two wonderful tool which we use in querying our GraphQL api. graphiql and graphql-playground You can use any one of them. We'are making use both to see them in action. Already installed the two necessary nuget packages;



 <PackageReference Include="graphiql" Version="2.0.0" />
 <PackageReference Include="GraphQL.Server.Ui.Playground" Version="3.4.0" />

We add graphiql by adding below part in ConfigureServices of Startup.cs



    services.AddGraphiQl(x =>
        {
            x.GraphiQlPath = "/graphiql-ui";
            x.GraphQlApiPath = "/graphql";
        });

and making use of it like app.UseGraphiQl(); in Configure

For graphql-playground, we add app.UseGraphQLPlayground(new GraphQLPlaygroundOptions()); in Configure
One final note, we need to prevent circular referencing error by adding



    services.AddControllers()
        .AddNewtonsoftJson(options =>
            options.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore
        );

Demo time...

Let's build the project in VS2019 and hit F5 to run. Your browser will be opened in http://localhost:5000/ui/playground displaying playground as we set the launchUrl in launchSettings.json
Open another browser and navigate to http://localhost:5000/graphiql-ui Now you have graphiql You're supposed to see the GraphQL schema with all the elements in both tools.

Try



query countries{
  countries{
    id
    name
  }
}

You'll see no data as there's not yet any country. Let's add some,



mutation addCountry{
  addCountry(countryName:"France"){
    id
    name
  }
}
mutation addCountry{
  addCountry(countryName:"Germany"){
    id
    name
  }
}

When we query countries again you'll see France & Germany,



{
  "data": {
    "countries": [
      {
        "id": 1,
        "name": "France"
      },
      {
        "id": 2,
        "name": "Germany"
      }
    ]
  }
}

We can add some cities,




mutation addCityToFrance{
  addCity(countryId:1,cityName:"Paris",population:123000){
    id
    name
    population
    country{
      id
      name
    }
  }
}

mutation addCityToGermany{
  addCity(countryId:2,cityName:"Köln",population:500000){
    id
    name
    population
    country{
      id
      name
    }
  }
}

and query cities,



query cities{
  cities{
    id
    name
    population
    country{
      id
      name
    }
  }
}

Our cities so far,



{
  "data": {
    "cities": [
      {
        "id": 1,
        "name": "Paris",
        "population": 123000,
        "country": {
          "id": 1,
          "name": "France"
        }
      },
      {
        "id": 2,
        "name": "Köln",
        "population": 500000,
        "country": {
          "id": 2,
          "name": "Germany"
        }
      }
    ]
  }
}

You can simply test DeleteCityMutation and UpdateCityMutation in a similar way.
Let's test the most funny part, CityAddedSubscription Restart webapi. You'll navigate to http://localhost:5000/ui/playground Open another browser and navigate to http://localhost:5000/graphiql-ui/
Use playground to issue



subscription cityAddedToGermany{
  cityAdded(countryName:"Germany"){
    id
    cityName
    countryName
    message
  }
}

Apparently, we've subscribed to get notified when a city added to Germany. Playground enters into listening mode,

Now let's add a city to Germany using graphiql

Once we execute addCityToGermany we'll be notified in playground like follows,

Now you can try to add city to France. You're supposed not to see any notification in playground this time!

Using subscription in GraphQL saves us from using additional libraries to use websockets. It also simplifies development as we'll be writing our codes in GraphQL ecosystem. GraphQL makes the heavy lifting for us.

In second part of this article, we will

add SSL support
create our Docker image
and deploy it to OpenShift

Happy coding :-)

React Form State Persistency : useFormikContext + Apollo Client + GraphQL Code Generator + Typescript

murat — Mon, 11 Nov 2019 23:25:23 +0000

Introduction

In this article, we will create a sample Reactjs application to demonstrate form data persistency between routes making use of apollo cache. Since our main goal is to demonstrate the use of apollo cache as an application state container, we won't be dealing with fancy form design. Yet, a bare minimum UI design will be applied using Material-UI.
In this sample app, we're using Formik with its 2.0.3 version that allows us create a form context with useFormikContex hook. Since this is not an article specifically for Formik. We're just using its basic form functionalities.

You can test the working demo before we begin.
Github project is here as well.

Lets start...

Construct the project

We're using Create React App like the vast majority of the react applications as a starter template ;

npx create-react-app apollo-forms --typescript

And need to install initial dependencies. First material-ui

yarn add @material-ui/core clsx

React router;

yarn add react-router-dom history @types/react-router-dom -D @types/history -D

Formik;

yarn add formik

Now let's add our form pages and routes;

src/pages/Cars.tsx

import * as React from "react";
import { Formik, useFormikContext } from "formik";
import TextField from "@material-ui/core/TextField";
import {
  Grid,
  Button,
  makeStyles,
  Theme,
  createStyles,
  Checkbox,
  FormControlLabel,
  Select,
  MenuItem,
  InputLabel,
  FormControl
} from "@material-ui/core";
import DisplayFormikState from "./DisplayFormikState";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    button: {
      margin: theme.spacing(1),
      width: 250
    },
    input: {
      width: 250
    },
    formControl: {
      width: 250
    }
  })
);

type Car = {
  brand: string;
  model: string;
  year: number;
  fastEnough: boolean;
};

const CarForm = () => {
  const classes = useStyles();
  const formik = useFormikContext<Car>();
  return (
    <form>
      <Grid container direction="column" justify="center" alignItems="center">
        <TextField
          className={classes.input}
          name="brand"
          label="Brand"
          value={formik.values.brand}
          onChange={formik.handleChange}
          variant="outlined"
          margin="normal"
        />

        <TextField
          className={classes.input}
          name="model"
          label="Model"
          value={formik.values.model}
          onChange={formik.handleChange}
          variant="outlined"
          margin="normal"
        />

        <FormControl
          margin="normal"
          variant="outlined"
          className={classes.formControl}
        >
          <InputLabel id="demo-simple-select-outlined-label">Year</InputLabel>
          <Select
            labelId="demo-simple-select-outlined-label"
            id="demo-simple-select-outlined"
            value={formik.values.year}
            onChange={e => {
              formik.setFieldValue("year", e.target.value);
            }}
            labelWidth={30}
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            <MenuItem value={2017}>2017</MenuItem>
            <MenuItem value={2018}>2018</MenuItem>
            <MenuItem value={2019}>2019</MenuItem>
          </Select>
        </FormControl>
        <FormControlLabel
          control={
            <Checkbox
              name="fastEnough"
              checked={formik.values.fastEnough}
              value="fastEnough"
              onChange={e => {
                formik.setFieldValue("fastEnough", e.target.checked);
              }}
            />
          }
          label="Fast Enough"
        ></FormControlLabel>

        <Button
          variant="contained"
          color="primary"
          className={classes.button}
          onClick={() => formik.submitForm()}
        >
          Persist Cars
        </Button>
      </Grid>
      <DisplayFormikState {...formik.values} />
    </form>
  );
};

interface ICars {}

const Cars: React.FunctionComponent<ICars> = (props: ICars) => {
  return (
    <Formik
      initialValues={{
        brand: "",
        model: "",
        year: "",
        fastEnough: false
      }}
      onSubmit={() => alert("Nowhere to persist :-(")}
    >
      <CarForm />
    </Formik>
  );
};

export default Cars;

src/pages/Cities.tsx

import * as React from "react";
import { Formik, useFormikContext } from "formik";
import TextField from "@material-ui/core/TextField";
import {
  Grid,
  Button,
  makeStyles,
  Theme,
  createStyles
} from "@material-ui/core";
import DisplayFormikState from "./DisplayFormikState";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    button: {
      margin: theme.spacing(1),
      width: 250
    },
    input: {
      width: 250
    }
  })
);

type City = {
  name: "";
  country: "";
  population: "";
};

const CityForm = () => {
  const classes = useStyles();
  const formik = useFormikContext<City>();

  return (
    <form>
      <Grid container direction="column" justify="center" alignItems="center">
        <TextField
          className={classes.input}
          name="name"
          label="Name"
          value={formik.values.name}
          onChange={formik.handleChange}
          variant="outlined"
          margin="normal"
        />

        <TextField
          className={classes.input}
          name="country"
          label="Country"
          value={formik.values.country}
          onChange={formik.handleChange}
          variant="outlined"
          margin="normal"
        />

        <TextField
          className={classes.input}
          name="population"
          label="Population"
          value={formik.values.population}
          onChange={formik.handleChange}
          variant="outlined"
          margin="normal"
        />
        <Button
          variant="contained"
          color="primary"
          className={classes.button}
          onClick={() => formik.submitForm()}
        >
          Persist Cities
        </Button>
      </Grid>
      <DisplayFormikState {...formik.values} />
    </form>
  );
};

interface ICities {}

const Cities: React.FunctionComponent<ICities> = (props: ICities) => {
  return (
    <Formik
      initialValues={{
        brand: "",
        model: "",
        year: ""
      }}
      onSubmit={() => alert("Nowhere to persist :-(")}
    >
      <CityForm />
    </Formik>
  );
};

export default Cities;

src/pages/Home.tsx

import * as React from "react";

const Home = () => {
  return <h1>welcome to apollo forms!</h1>;
};

export default Home;

src/pages/Routes.tsx

import * as React from "react";
import { Router, Switch, Route } from "react-router";
import { Link } from "react-router-dom";
import { createBrowserHistory } from "history";
import Cars from "./Cars";
import Cities from "./Cities";
import Home from "./Home";
import {
  AppBar,
  Toolbar,
  makeStyles,
  createStyles,
  Theme
} from "@material-ui/core";

const history = createBrowserHistory();

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    href: {
      margin: 20,
      color: "white"
    }
  })
);

const Routes = () => {
  const classes = useStyles();
  return (
    <Router history={history}>
      <div>
        <AppBar position="static">
          <Toolbar>
            <Link className={classes.href} to="/">
              Home
            </Link>
            <Link className={classes.href} to="/cars">
              Cars
            </Link>
            <Link className={classes.href} to="/cities">
              Cities
            </Link>
          </Toolbar>
        </AppBar>

        {/* A <Switch> looks through its children <Route>s and
        renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/cars">
            <Cars />
          </Route>
          <Route path="/cities">
            <Cities />
          </Route>
          <Route exact path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
};

export default Routes;

src/pages/App.tsx

import React from "react";
import "./App.css";
import Routes from "./pages/Routes";

const App = () => {
  return (
    <div className="App">
      <Routes />
    </div>
  );
};

export default App;

src/pages/DisplayFormikState.tsx

import * as React from "react";

const DisplayFormikState = (formikProps: any) => (
  <div style={{ margin: "1rem 0" }}>
    <h3 style={{ fontFamily: "monospace" }} />
    <pre
      style={{
        background: "#f6f8fa",
        fontSize: ".9rem",
        padding: ".5rem"
      }}
    >
      <strong>props</strong> = {JSON.stringify(formikProps, null, 2)}
    </pre>
  </div>
);

export default DisplayFormikState;

At this point, we have a basic app with Cars and Cities pages and we can navigate between. Nothing spacial so far. Form data wich we entered can not be persisted yet.
Now we can ask the eternal question; how to persist the form states? So that when we route back to our page we can find our form filled with previous data.

Keeping the form state

State management is one of the most important topics in React. A few years ago Redux and Mobx were the way to go. Today we have React Context as of React 16.3. When dealing with form states, we may attempt to keep our form in sync with our React context. This seems very logical and easy; just bind the form controls value properties to our context entity's relevant properties in the context and be happy! Very soon we'd discover that this causes undesired re-renders and results in terrible performance...

Formik documentation indicates that the form state is ephemeral. And it should stay so. We may think 'Ok we can update the React Context upon form submission, that's fine enough'. This is quite logical indeed. There are tons of documents on the web about using React Context. However, if we are using GraphQL we have another option; using Apollo Cache to keep the form state between routes...

GraphQL & Apollo Client & graphql-code-generator

GraphQL is an awesome technology that lets us write our backend in very neat and imperative way independent of the language. There are wonderful resources on the web to go into details of GraphQL.

Of course it's not only for backend. We develop our frontend applications making use of GraphQL query & mutation paradigm. Oftenly, frontend teams drive the transition toward GraphQL. PayPal success story is a must read.

I believe, two things are indispensible especially for large development teams; typescript & code generators. As the complexity of your app increases, developing with confidence and ease is crucial. Let's add Apollo & GraphQL to our sample app;

yarn add @apollo/react-hooks apollo-cache-inmemory apollo-client graphql graphql-tag react-apollo

And graphql-code-generator

@graphql-codegen/add @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo @graphql-codegen/typescript-resolvers

Note: tsconfig.json file must have "strictNullChecks": false. Otherwise you'd receive compile time errors.

Now GraphQL queries and mutations. graphql-code-generator will go through this file to generate types;

src/queries.ts

import gql from "graphql-tag";

const QUERY_CAR = gql`
  query carForm {
    carForm @client {
      brand
      model
      year
      fastEnough
    }
  }
`;

const QUERY_CITY = gql`
  query cityForm {
    cityForm @client {
      name
      country
      population
    }
  }
`;

const PERSIST_CAR_FORM = gql`
  mutation persistCarForm($args: CarFormInput!) {
    persistCarForm(carFormInput: $args) @client
  }
`;

const PERSIST_CITY_FORM = gql`
  mutation persistCityForm($args: CityFormInput!) {
    persistCityForm(cityFormInput: $args) @client
  }
`;

export const Queries = {
  QUERY_CAR,
  QUERY_CITY
};

export const Mutations = {
  PERSIST_CAR_FORM,
  PERSIST_CITY_FORM
};

Now we're creating our client side schema definition file that graphql-code-generator will use to generate the GraphQL types and schema definitions;

client-schema.graphql

type Car {
  brand: String
  model: String
  year: String
  fastEnough: Boolean!
}

type City {
  name: String
  country: String
  population: Int
}

input CarFormInput {
  brand: String
  model: String
  year: String
  fastEnough: Boolean!
}

input CityFormInput {
  name: String
  country: String
  population: Int
}

type Query {
  carForm: Car
  cityForm: City
}

type Mutation {
  persistCarForm(carFormInput: CarFormInput!): String
  persistCityForm(cityFormInput: CityFormInput!): String
}

We need to add the configuration file for graphql-code-generator;

codegen.yml

documents:
  - ./src/queries.ts
overwrite: true
generates:
  ./src/graphql/types.tsx:
    schema: client-schema.graphql
    plugins:
      - add: "/* eslint-disable */"
      - typescript
      - typescript-operations
      - typescript-react-apollo
      - typescript-resolvers
    # The combined options of all provided plug-ins
    # More information about the options below:
    # graphql-code-generator.com/docs/plugins/typescript-react-apollo#configuration
    config:
      withHOC: false
      withHooks: true
      withComponent: false
      useIndexSignature: true

Please refer to graphql-code-generator web site for all config details.

Finally, we need to add codegen script to package.json;

  "scripts": {
    "codegen": "gql-gen",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

At this point we can run codegen to create src/graphql/types.tsx;

yarn run codegen

If you followed along so far, you're supposed to have src/graphql/types.tsx. You can check the file and its generated types.

Apollo Client & resolvers

Now we need to create Apollo Client and initialize Apollo Cache using src/ApolloProxy.ts;

import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloClient } from "apollo-client";
import { CarFormQuery, CityFormQuery } from "./graphql/types";
import { resolvers } from "./resolvers";

export const getClient = () => {
  const cache = new InMemoryCache();

  const client = new ApolloClient({
    cache,
    resolvers
  });

  cache.writeData<CarFormQuery>({
    data: {
      carForm: {
        __typename: "Car",
        brand: "",
        model: "",
        year: "",
        fastEnough: false
      }
    }
  });

  cache.writeData<CityFormQuery>({
    data: {
      cityForm: {
        __typename: "City",
        name: "",
        country: "",
        population: null
      }
    }
  });

  return client;
};

src/resolvers.ts

import {
  Resolvers,
  Car,
  CarFormQuery,
  City,
  CityFormQuery
} from "./graphql/types";
import { InMemoryCache } from "apollo-cache-inmemory";
import { Queries } from "./queries";

export const resolvers: Resolvers = {
  Query: {
    carForm: (_, args, { cache }: { cache: InMemoryCache }) => {
      const queryCarForm = cache.readQuery<Car>({
        query: Queries.QUERY_CAR
      });
      return queryCarForm;
    },
    cityForm: (_, args, { cache }: { cache: InMemoryCache }) => {
      const queryCityForm = cache.readQuery<City>({
        query: Queries.QUERY_CITY
      });
      return queryCityForm;
    }
  },
  Mutation: {
    persistCarForm: (
      _,
      { carFormInput },
      { cache }: { cache: InMemoryCache }
    ) => {
      const { brand, model, year, fastEnough } = carFormInput;

      cache.writeData<CarFormQuery>({
        data: {
          carForm: {
            __typename: "Car",
            brand,
            model,
            year,
            fastEnough
          }
        }
      });
      return "OK";
    },
    persistCityForm: (
      _,
      { cityFormInput },
      { cache }: { cache: InMemoryCache }
    ) => {
      const { name, country, population } = cityFormInput;

      cache.writeData<CityFormQuery>({
        data: {
          cityForm: {
            __typename: "City",
            name,
            country,
            population
          }
        }
      });
      return "OK";
    }
  }
};

In this sample app, we have no graphql server. We'll only use Apollo Cache for our forms data. So, ApolloProxy.ts has no link to a backend. We're creating default form data in ApolloCache carForm & cityForm. Notice, we're using typescript generics with the generated types CarFormQuery & CityFormQuery in cache write operations. We're totally type safe here. For instance, try to change the name property of the cityForm to cityName. Typescript compiler immediately complains and warns you.

In resolvers.ts, we're using Resolvers and other generated types by graphql-code-generator.

Now we're updating Cars.tsx and City.tsx to make use of newly generated types and the resolvers.ts we've just created.

src/pages/Cars.tsx

const Cars: React.FunctionComponent<ICars> = (props: ICars) => {
  const {
    data: {
      carForm: { __typename, ...noTypename }
    }
  } = useCarFormQuery();

  const [persistCarForm] = usePersistCarFormMutation();

  return (
    <Formik
      initialValues={noTypename}
      onSubmit={values => {
        persistCarForm({
          variables: {
            args: values
          }
        });
      }}
    >
      <CarForm />
    </Formik>
  );
};

src/pages/Cities.tsx

const Cities: React.FunctionComponent<ICities> = (props: ICities) => {
  const {
    data: {
      cityForm: { __typename, ...noTypename }
    }
  } = useCityFormQuery();

  const [persistCityForm] = usePersistCityFormMutation();
  return (
    <Formik
      initialValues={noTypename}
      onSubmit={values =>
        persistCityForm({
          variables: {
            args: values
          }
        })
      }
    >
      <CityForm />
    </Formik>
  );
};

We need to create and provide ApolloProvider, so that we can make use of useQuery and useMutation hooks in our pages. So, modify index.tsx;

src/index.tsx

import React from "react";
import ReactDOM from "react-dom";
import { ApolloProvider } from "@apollo/react-hooks";
import { getClient } from "./ApolloProxy";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

const nodeserviceApolloClient = getClient();

ReactDOM.render(
  <ApolloProvider client={nodeserviceApolloClient}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);
serviceWorker.unregister();

Now you should be all set. Try yarn start

Final words...

Although you can use useQuery and useMutaion hooks directly, I always prefer using the hooks generated by graphql-code-generator. Because, if we use string based queries directly as below;

const { data, error, loading } = useQuery<CarFormQuery>(Queries.QUERY_CAR);

We wont be warned in compile time against incorrect changes in our QUERY_CAR. On the other hand, if we stick to using generated hooks as follows;

const { data: { carForm } } = useCarFormQuery()

any incorrect query string would lead to generation time error. And we'd be warned very early.

Hope you enjoy ;-)

Happy coding...

@killjoy_tr