Building a NestJS GraphQL Microservice and Connecting it to a Flutter App

In this article, we will explore how to build a GraphQL microservice using NestJS and then connect it to a Flutter application. We will break down the process into several steps, each with its code snippets and explanations.

Setting Up the NestJS GraphQL Microservice

Installing Dependencies

First, we need to install the necessary dependencies. NestJS has a dedicated package for working with GraphQL - @nestjs/graphql. We also need graphql-tools and GraphQL.

npm install @nestjs/graphql graphql-tools graphql

Creating the GraphQL Module

Next, we create a GraphQL module. This module will handle all GraphQL related logic.

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';

@Module({
  imports: [
    GraphQLModule.forRoot({
      autoSchemaFile: 'schema.gql',
    }),
  ],
})
export class AppModule {}

Defining a GraphQL Schema

We define a GraphQL schema using TypeScript classes and decorators provided by @nestjs/graphql.

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

@ObjectType()
export class User {
  @Field(() => ID)
  id: string;

  @Field()
  name: string;
}

Creating a Resolver

Resolvers are used to handle GraphQL queries and mutations. Here's a simple resolver for our User type.

import { Resolver, Query } from '@nestjs/graphql';
import { User } from './user.model';

@Resolver(() => User)
export class UserResolver {
  @Query(() => User)
  getUser(): User {
    return {
      id: '1',
      name: 'Lenscorpx',
    };
  }
}

Connecting the NestJS GraphQL Microservice to a Flutter App

Setting Up the Flutter App

First, we need to set up our Flutter app. We'll use the graphql_flutter package to interact with our GraphQL server.

flutter create my_app
cd my_app
flutter pub add graphql_flutter

Creating a GraphQL Client

We create a GraphQL client that will be used to send queries and mutations to our server.

import 'package:graphql_flutter/graphql_flutter.dart';

final HttpLink httpLink = HttpLink('http://localhost:3000/graphql');

final ValueNotifier<GraphQLClient> client = ValueNotifier(
  GraphQLClient(
    link: httpLink,
    cache: GraphQLCache(),
  ),
);

Sending a Query

We can now send a query to our server. Here's how to fetch a user.

import 'package:graphql_flutter/graphql_flutter.dart';

final String getUserQuery = """
  query GetUser {
    getUser {
      id
      name
    }
  }
""";

final QueryOptions options = QueryOptions(
  document: gql(getUserQuery),
);

final QueryResult result = await client.value.query(options);

if (!result.hasException) {
  print(result.data);
}

In this article, we've built a NestJS GraphQL microservice and connected it to a Flutter app. This is a basic example, but it should give you a good starting point for building more complex applications. Remember, the key to mastering these technologies is practice and continuous learning.

Happy coding!

Resources where we found some useful pieces of information when writing this article.

TKSSHARMA Great article!

Official Documentation NestJS