Using Mesh inside Nest.js (Any guide or example)

[mnlbox]

Hi guys,

I want to run .mesh artifacts inside a Nest.js project in a specific route for example: /mesh and have some GraphQL subgraphs in other routes for example /subgraph1 and add these subgraphs and some other REST endpoints as a data source for mesh. Is it possible?

[ardatan]

I think Nest.js uses Express or Fastify under the hood. So you can probably use our integration recipes to integrate Mesh endpoint to your existing Nest.js application;
https://the-guild.dev/graphql/mesh/docs/getting-started/deploy-mesh-gateway#deploy-on-nodejs

[mnlbox]

@ardatan Thanks for your reply. As GraphQL Mesh is using Yoga server behind the scene should I use this package somehow? 🤔

https://the-guild.dev/graphql/yoga-server/docs/integrations/integration-with-nestjs

[mnlbox]

OK, I tried to test the approach you suggested. I created a new nest.js app and created a .meshrc.ts file in the project's root. Then I added some data sources and tried to build the mesh with the build command. Now I have .mesh folder at the root of my project.
I can even run the mesh with the start command. Next, I tried to run mesh as a route in the nest.js app so I changed my main.js file in the nest project to this:

import { createBuiltMeshHTTPHandler } from "../.mesh";
import { Logger } from "@nestjs/common";
import { NestFactory } from "@nestjs/core";
import { AppModule } from "./app/app.module";

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  const meshHandler = createBuiltMeshHTTPHandler();

  app.use("/mesh", (req, res) => {
    meshHandler(req, res);
  });

  // const nestApp = await NestFactory.create(AppModule, new ExpressAdapter(app));
  const port = process.env.PORT || 4000;
  await app.listen(port);
  Logger.log(`🚀 Application is running on: http://localhost:${port}`);
}

bootstrap();

But when I'm trying to run the project I got this error:

ERROR in ./.mesh/index.ts 5:16-46
Module not found: Error: Can't resolve '@graphql-mesh/utils' in '/projects/supergraph/.mesh'
ERROR in ./.mesh/index.ts 8:16-45
Module not found: Error: Can't resolve '@whatwg-node/fetch' in '/projects/supergraph/.mesh'
ERROR in ./.mesh/index.ts 13:51-92
Module not found: Error: Can't resolve '@graphql-mesh/merger-stitching' in '/projects/supergraph/.mesh'
ERROR in ./.mesh/index.ts 14:15-44
Module not found: Error: Can't resolve '@graphql-mesh/http' in '/projects/supergraph/.mesh'
ERROR in ./.mesh/index.ts 16:16-46
Module not found: Error: Can't resolve '@graphql-mesh/store' in '/projects/supergraph/.mesh'
ERROR in ./.mesh/index.ts 17:24-62
Module not found: Error: Can't resolve '@graphql-mesh/cross-helpers' in '/projects/supergraph/.mesh'
webpack compiled with 6 errors (e31744d5821f5e14)

I tried to check the index.ts file inside the .mesh folder and after removing // @ts-nocheck from the top of the file I see the problem in the vscode too:

So I installed all the missing packages with the command below:

pnpm add @graphql-mesh/utils @whatwg-node/fetch @graphql-mesh/merger-stitching @graphql-mesh/http @graphql-mesh/store @graphql-mesh/cross-helpers

Now the app is running and I can see the base hello world message from the nest at http://localhost:4000 but when I'm trying to access the mesh from http://localhost:4000/mesh I'm getting a 404 error while I'm also getting this log in the console: 🤔

💡 🕸️  Mesh - My_Data_Source_1 Processing annotations for the execution layer
💡 🕸️  Mesh - My_Data_Source_2 Processing annotations for the execution layer

@ardatan Do you have any suggestions based on my steps?

[ardatan]

I'd recommend to keep the nestjs project and Mesh configuration in the same directory so they can share the same node_modules. In that case, you won't need to install every single dependency.
And about 404, you need to explicitly define the path Mesh is served;
https://the-guild.dev/graphql/mesh/docs/getting-started/customize-mesh-server#configuration-serve-reference

serve:
  endpoint: /mesh

[mnlbox]

Great, thanks now I can see my mesh and it seems setting the endpoint fixed the 404 problem. Regarding the packages, I have a monorepo based on Nx and pnpm containing some subgraphs and a supergraph project based on Mesh and Nest.js. So I have only one package.json and my folder structure is like this:

.
├── dist
│   ├── subgraphs
│   └── supergraph
├── node_modules        <---------------------------------- my node_modules is here
├── nx.json
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── subgraphs        <---------------------------------- These are my subgraph projects based on nest.js (REST, GraphQL, ...)
│   ├── subgraph1
│   ├── subgraph2
│   └── subgraph3
├── supergraph
│   ├── my-supergraph        <---------------------------------- This is the supergraph Nest.js project
│   ├────  .meshrc.ts        <---------------------------------- .meshrc.ts file is here in the root of the Nest.js project
│   ├────  .mesh        <---------------------------------- mesh build artifacts are here
│   └── unified-supergraph-e2e
└── tsconfig.base.json

[ardatan]

I'm not using pnpm and don't know much about it sorry :) Maybe that's the problem with that.

[mnlbox]

No worries. Do you have any suggestions about the folder structure of the project and the location of the .meshrc.ts file and .mesh folder?

And one last question should I put .mesh folder to .gitignore file and build that each time in one of the pipeline steps in my GitHub project or it's safe to push it to the repo?
I'm asking because it's a general best practice to add build artifacts like dist folder of projects to .gitignore AND in addition, we have some secret values that we set for the request header in .meshrc.ts file.

[mnlbox]

@ardatan do you have any idea about my latest message and especially .gitignore part and the location of .meshrc and .mesh folder based on my project structure?
I'm asking because currently in my project build pipeline I'm doing this prebuild with mesh build command because .mesh folder is not there (I put that in the .gitignore file) but I guess I can push the .mesh folder to the repo then I don't need to call mesh build again on CI/CD level. 🤔

[mnlbox]

I have a new issue with integrating mesh and nest.js, currently, I have a custom resolver in Mesh like this:

import {
  FindUserResult,
  FindGroupResult,
  Resolvers,
} from "../.mesh";

const resolvers: Resolvers = {
  Query: {
    findUserGroups: async (root, args, context, info) => {
      // @ts-ignore
      const apiKey = context.headers["api-key"];
      // @ts-ignore
      const role = context.headers["role"];

      // 1. Check the required headers and athentication
      if (!apiKey || !role) {
        throw new Error(
          "api-key and role are mandatory"
        );
      }  
      
      const findUserResult: FindUserResult =
        await context.User_API.Query.findUser({
          root,
          args,
          context,
          info
        });

        const userId = findUserResult[0].id;

        const findGroupResult: FindGroupResult =
        await context.Group_API.Query.findGroup({
          root,
          args,
          context,
          info
        });
      
    }
  }

I try to turn this code to a resolver function in nest.js with decorators to use dependency injection (for example for authentication part as I have a separate module to handle authentication and I want to reuse that module rather than duplicate everything in my custom resolver)
This is my first try:

import { Query, Resolver, Context } from '@nestjs/graphql';
import { FindUserGroupResults } from '../.mesh';
import {AuthService} from './auth.service'

@Resolver()
export class MyCustomResolver {
  constructor(private readonly authService: AuthService) {}

  @Query('findUserGroups')
  async findUserGroups(
    @Context('headers') headers: any,
    args: any,
  ): Promise<FindUserGroupResults> {
    const apiKey = headers['api-key'];
    const role = headers['role'];

    // Rest of the resolver logic

    return result;
  }
}

I have no idea how I can write this custom resolver in nest.js I guess we need some documentation for the Nest.js integration to show what is the standard way of using Mesh + Nest.js 🤔

[mnlbox]

Maybe related: #4078