loadFilesSync doesn't load Resolvers with Typescript import statements

[synackSA]

So I'm fairly new to Typescript/Javascript, so I might be missing something. Were busy setting up a Apollo GraphQL gateway. We've set it up so that each resolver per microservice domain is inside it's own folder. These resolver contain code that requires us to import some modules.

// /src/domains/program/resolvers.ts
import { GRPCError, GRPCNotFoundError } from '../../grpcDataSource/GRPCErrorHandler/index.js';
import { UserInputError, ApolloError } from 'apollo-server';
import winston from 'winston';
import { RedisClient, print as redisPrint } from 'redis';

const fromCursorHash = (string: string) => Buffer.from(string, 'base64').toString('ascii');

const resolvers = {
  Query: {
    async shard(parent: any, args: any, { logger, dataSources }: { logger: winston.Logger; dataSources: any }, info: any) {
      logger.info('Retrieving shard information.');
      return await dataSources.ProgramShard.getProgramShard(args.id).catch((error: any) => {
        if (error instanceof GRPCNotFoundError) {
          throw new UserInputError(error.message);
        } else if (error instanceof GRPCError) {
          throw new ApolloError(error.message, 'SERVICE_ERROR');
        } else {
          throw new ApolloError('Internal Server Error');
        }
      });
    },
    async program(parent: any, args: any, { logger, redisClient, dataSources }: { logger: winston.Logger; redisClient: RedisClient; dataSources: any }, info: any) {
      // redisClient.get('key', RedisPrint);
      return await dataSources.ProgramManagement.getProgram(args.id).catch((error: any) => console.log(error));
    },
    async programByUrl(parent: any, args: any, context: any, info: any) {
      return await context.dataSources.ProgramManagement.getProgramByUrl(args.url).catch((error: any) => console.log(error));
    }
  },
  Program: {
    async users(parent: any, args: any, context: any, info: any) {
      const firstValue: number = args.first;
      let afterValue: number = args.after != null ? Number(fromCursorHash(args.after)) : 0;

      if (afterValue > 0) {
        afterValue++;
      }

      return await context.dataSources.UserUsermanagement.getAllProgramUsers(parent.id, firstValue, afterValue).catch((error: any) => console.log(error));
    }
  }
};

export { resolvers };

I'm trying to load this file using graphql-modules and graphql-tools in the following manner:

// /src/domains/index.ts
import path from 'path';
import { createModule } from 'graphql-modules';
import { loadFilesSync } from '@graphql-tools/load-files';

const typeDefs = loadFilesSync(path.join(path.resolve(path.dirname('')), '/src/domains/**/typeDefs.gql'));
const resolvers = loadFilesSync(path.join(path.resolve(path.dirname('')), '/src/domains/**/resolvers.ts'));

export const Domains = createModule({
  id: 'Domains',
  dirname: path.resolve(path.dirname('')),
  typeDefs: typeDefs,
  resolvers: resolvers
});

And this is how it's being loaded:

// /src/index.ts

import { Domains } from './domains/index.js';
import { createApplication } from 'graphql-modules';

// Some code here

const server = new ApolloServer({
  typeDefs: application.typeDefs,
  resolvers: application.resolvers,
...

However, when I do this, I get the following error:

/Projects/apollo/src/domains/program/resolvers.ts:1
import { GRPCError, GRPCNotFoundError } from '../../grpcDataSource/GRPCErrorHandler/index.js';
^^^^^^SyntaxError: Cannot use import statement outside a module

Using graphql-modules could probably be left out and I could just export it normally. I could also use mergeResolvers to export a single resolver, rather than an array of them, but that's neither here-nor-there.

If I switch the import statements to require, then it seems to work, but we don't want to switch back to a older style of working with modules and would prefer to keep everything ES6.

Right now, it looks like we're just going switch back to having it in the following style and any time someone adds a new domain, they would have to edit the file to add the import statement, as well as add it to the array for export.

// /src/domains/index.ts
import path from 'path';
import { programResolver } from './program/resolver.js';
import { userResolver } from './user/resolver.js';

const resolversArray = [
  programResolver,
  userResolver
];

export { resolversArray }

/** 
OR merged

resolvers = mergeResolvers(resolversArray);

export { resolvers };
**/

Ideally, we don't want to do the above step as we want to try and keep the process a simple as possible for developers. Add a TypeDef and Resolver file and be done with it.

Is my assessment correct here, or are there other options to me that I just don't know about, or haven't been able to find yet? I would really like to be able to use loadFilesSync or something that does something similar.

[ardatan]

See #2691

[synackSA]

Yeah, I did see that issue. Sorry if creating a separate issue was incorrect, but I was hoping to provide more details and hopefully source a solution.

Am I correct in my assumption then, that if we are to remain using ES6 imports only, that we will not be able to build the revolvers via the source tree and would manually have to import each of them ourselves?

[ardatan]

ES6 Imports isn't supported very well with GraphQLJS and it is still experimental in NodeJS. It might be better to avoid using it currently. I don't know much about your setup but I'd personally recommend to have a setup with TS-Node and loadFiles would work as expected.
Also see #1750 (comment)

[bigman73]

Here's a solution to workaround the limitations of loadFilesSync with respect to Typescript.
Create an index.ts file which references all the other resolvers*.ts files:

import { mergeResolvers } from '@graphql-tools/merge'
import { IResolvers } from '@graphql-tools/utils'

import { otherResolvers } from './other'
import { someFieldResolvers } from './someField'

/**
 * Exposed GraphQL resolvers.
 */
export const resolvers: IResolvers = mergeResolvers([otherResolvers, someFieldResolvers])

Then import the index file:

    const resolversPath = path.join(settings.schemaRootFolder, 'resolvers')
    const { resolvers } = await import(resolversPath)

[YuriFontella]

hello, Does this already have a solution?

with js file it works:

const resolvers = {
  Query: {
    dinosaurs: () => [{ name: 'Rex' }]
  }
}

module.exports = resolvers

but with ts it doesn't work:

 const resolvers = {
  Query: {
    dinosaurs: () => [{ name: 'Rex' }]
  }
}

export default resolvers

error: Uncaught SyntaxError: Unexpected token 'export'