Custom Resolvers in Graphql Mesh V1

[albertogg99]

I was wondering whether it's possible to add custom resolvers as it was in V0. If so, how can it be done? If not, are you planning to add this feature to V1?

[hpejkovic]

Hey. I was wondering the same and found this later on
https://the-guild.dev/graphql/hive/docs/api-reference/gateway-config
Additional resolvers are mentioned here on how to set them up in hive gateway

[Warxcell]

Own generator won't know the operations available in context? Like when you are using additional resolvers as decoration/middleware/composition to existing resolvers in subgraphs.

Like:

  additionalResolvers: {
    Mutation: {
      test: async (root, args, context, info) => {
        // TODO type-safety?!

        args.someField = await context.SubGraph2.Query.someField(.....);
        return context.SubGraph1.Mutation.test({root, args, context, info})
      }
    }
  },

[hpejkovic]

I will implement this next week, then i will post my solution here

[Warxcell]

Any success? :)

[hpejkovic]

Hey. Sorry for not posting solution. I just managed to get a working solution last week but i am sure it can be improved. I am sick right now and i will try to post my findings here by the end of the week.

[hpejkovic]

Ok, so I didn't achieve type safety on the context itself but i managed to create an SDK that i use instead of context to do type safe queries/mutations inside resolvers.

1. Install necessary packages - yarn, npm... your choice :)

• install @graphql-hive/gateway for serving the hive gateway
• install @graphql-mesh/compose-cli for generating the graphql schema
• install @graphql-codegen/cli, @graphql-codegen/typescript, @graphql-codegen/typescript-generic-sdk, @graphql-codegen/typescript-operations, @graphql-codegen/typescript-resolvers for generating graphql SDK we will use in our resolvers
• install @omnigraph/openapi for stitching open api schemas (this is what i used so i am adding it here)
• install graphql for building schema we will need to generate SDK
• install @envelope/core and dataloader in case you will need to solve N+1 problem with batching

Also inside package.json set "type": "module",

2. Create a codegen.ts file with this information:

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  overwrite: true,
  schema: "supergraph.graphql",
  documents: "src/generated/*.graphql",
  generates: {
    "src/generated/graphql.ts": {
      plugins: [
        "typescript",
        "typescript-resolvers",
        "typescript-operations",
        "typescript-generic-sdk",
      ],
      config: {
        rawRequest: true,
        noSchemaStitching: false,
        namingConvention: {
          transformUnderscore: false,
        },
      },
    },
  },
};

export default config;

This codegen will create our SDK, but in order for it to work, we need to generate operations from the schema.

3. In order to do that, create a generateFullOperationsFile.js and paste this code

import { buildSchema, OperationTypeNode, print } from "graphql";
import { readFileSync, writeFileSync } from "node:fs";

import {
  buildOperationNodeForField,
  getRootTypeMap,
  parseGraphQLSDL,
} from "@graphql-tools/utils";
OperationTypeNode;
function generateOperations(schema, options) {
  const sources = [];
  const rootTypeMap = getRootTypeMap(schema);
  for (const [operationType, rootType] of rootTypeMap) {
    const fieldMap = rootType.getFields();
    for (const fieldName in fieldMap) {
      const operationNode = buildOperationNodeForField({
        schema,
        kind: operationType,
        field: fieldName,
        depthLimit: options.selectionSetDepth,
      });
      const defaultName = `operation_${sources.length}`;
      const virtualFileName = operationNode.name?.value || defaultName;
      const rawSDL = addTypenames(print(operationNode));
      const source = parseGraphQLSDL(`${virtualFileName}.graphql`, rawSDL);
      sources.push(source);
    }
  }
  return sources;
}

// SDK doesn't work if there are no __typename properties so adding them manually in a "hacky way" by adding __typename to every second curly bracket
function addTypenames(input) {
  let openBracketCount = 0;
  let result = "";

  for (let i = 0; i < input.length; i++) {
    const char = input[i];
    result += char;

    if (char === "{") {
      openBracketCount += 1;

      // If it's the second opening bracket, insert __typename after it
      if (openBracketCount > 1) {
        result += "\n__typename\n";
      }
    }
  }

  return result;
}

const allOperations = generateOperations(
  buildSchema(readFileSync("supergraph.graphql", "utf-8")),
  {
    selectionSetDepth: 2,
  }
);
let finalDoc = "";
allOperations.forEach((operation) => {
  if (operation.location && operation.document) {
    finalDoc += "\n" + print(operation.document);
  }
});
const operationsFilePath = "./src/generated/finalOperations.graphql";
writeFileSync(operationsFilePath, finalDoc);
console.log("Generating operations file DONE. Stored in " + operationsFilePath);

This is the code i copied from v0 of graphql mesh and it generates all the operations in a file path that is inside of variable operationsFilePath. If you change this file path, make sure you change it accordingly in codegen.ts file under documents property as well.

4. Create a generateSDK.ts file that will actually build the SDK and export it so we can use it in resolvers.

import { getSdkRequesterForUnifiedGraph } from "@graphql-hive/gateway";
import { getSdk } from "./src/generated/graphql.ts";
import { buildSchema } from "graphql";
import { readFileSync } from "node:fs";

const sdkRequester = () =>
  getSdkRequesterForUnifiedGraph({
    getUnifiedGraph: () => {
      const schema = buildSchema(readFileSync("supergraph.graphql", "utf-8"));
      return schema;
    },
  });

export const getMeshSdk = () => getSdk(sdkRequester());

5. Now setup your mesh.config.ts like it is explained here https://the-guild.dev/graphql/mesh/v1/source-handlers
6. Setup your hive gateway file gateway.config.ts like it is explained here https://the-guild.dev/graphql/hive/docs/api-reference/gateway-config. Also, one additional note. I had performance issues when fetching the generated SDK in each resolver. So what i did is that i fetched the sdk inside my gateway.config.ts and then i pass it to resolvers as parameter. Because initializing SDK takes some time, i prefered this way. There might be better ways to do this, but i didn't have too much time to investigate.
   So my gateway.config.ts looks something like this:

import { defineConfig as defineGatewayConfig } from "@graphql-hive/gateway";

import { coreGlobalSearchPackageResolver } from "./src/additionalSources/resolver/coreGlobalSearchResolvers";

import { fetch } from "@whatwg-node/fetch";

import DataLoader from "dataloader";
import { Plugin, useExtendContext } from "@envelop/core";
import { getMeshSdk } from "./generateSDK";

export const disableRedirectsFetch = (url, options = {}, context, info) => {
  return fetch(url, { ...options, redirect: "manual" });
};

const sdk = getMeshSdk();

const plugins: Plugin<{ dataLoaderCache: any }>[] = [
  useExtendContext(async (context) => {
    return {
      dataLoaderCache: new Map<string, DataLoader<any, any, any>>(),
    };
  }),
];

export const gatewayConfig = defineGatewayConfig({
  additionalResolvers: [coreGlobalSearchPackageResolver(sdk)],
  // @ts-ignore
  plugins: (context) => {
    return plugins;
  },
  fetchAPI: {
    // This is needed to disable automatic redirect following that happens when our backend returns CreatedAtAction with a Location response header.
    // Since fetch automatically follows the Location response header, it leads to an error.
    // If we will need to use redirects, adjust the disableRedirectsFetch function accordingly
    fetch: disableRedirectsFetch,
  },
});

If you don't need dataLoader functionality, then just remove the plugins part of the config. Also remove the fetchAPI section if you won't have problems with redirects. For me, I had the problem where I used .NET Web Api, and when CreatedAtAction() is used as a return, then Location header is added into response which triggers graphql Mesh into redirecting and this caused issues for us.

7. Now in the resolver i achieve type safety by using the generated SDK, like this:

export const vehicleVehicleResolvers = (sdk: Sdk): Resolvers => ({
  VehicleGetVehiclesBaseDto: {
    model: {
      selectionSet: /* GraphQL */ `
        {
          articleNumber
        }
      `,
      async resolve(root, _args, context, info) {
        if (root.articleNumber == undefined) {
          throw new GraphQLError(
            "Vehicle model could not be fetched! Field articleNumber is empty"
          );
        }

        // this will be type safe now and you will get code completion on your SDK
        const data = await sdk.VehicleVehicleModel_GetVehicleModel_query(
          {
            articleNumber: root.articleNumber,
          },
          context  // if context holds sensitive data, you need this part. For example authorization token
        );

        return processDataWithProblemDetails<VehicleVehicleModelsBaseDto>(
          "model",
          data.data?.VehicleVehicleModel_GetVehicleModel
        );
      },
    }
}
}
)

also add this 2 scripts to your package.json

  "scripts": {
    "dev": "hive-gateway supergraph",
    "build": "mesh-compose > supergraph.graphql && node generateFullOperationsFile.js && graphql-codegen --config codegen.ts"
  }

When you want to start all of this, first run the build script, then dev and you should be good. Make sure you adjust all the file paths so it suits your folder hierarchy

I am sure there are better solutions but I didn't have time to dig any deeper and this works well for me so I left it like this and moved on with my life.
I hope this helps you. If you have any other questions, feel free to ask :)