How to use graphql file loader with Next.js?

[tettoffensive]

I would much rather put my queries and mutations in .graphql files instead of .ts files. I saw in the docs something like this, which requires a top-level await and didn't seem to work for me with Next.js. I followed the grapql-yoga docs here

import { loadDocuments } from '@graphql-tools/load'
import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader'

const documents = await loadDocuments('graphql/**/*.graphql', {
  // load files and merge them into a single schema object
  loaders: [new GraphQLFileLoader()]
})

However, I've come across the next-plugin-graphql which actually loads the files in the webpack loader. This doesn't quite work for me. I'm guessing I need a babel plugin to recognize it's ok to import graphql files (though Next.js is moving away from babel to SWC).

config.module.rules.push({
      test: /\.(graphql|gql)$/,
      include: [dir],
      exclude: /node_modules/,
      use: [
        {
          loader: 'graphql-tag/loader',
        },
      ],
    });

I'm not sure if there's a solution as easy as what I did to use graphqls files for my schema:

import { loadFilesSync } from '@graphql-tools/load-files';
import { mergeTypeDefs } from '@graphql-tools/merge';
import { makeExecutableSchema } from '@graphql-tools/schema';
import { join } from 'path';
import resolvers from './resolvers';

const typesArray = loadFilesSync(join(process.cwd(), '**/*.graphqls'), { extensions: ['graphqls'] });
export const typeDefs = mergeTypeDefs(typesArray);

export const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

[ardatan]

GraphQL File Loader and load-files are using File System directly but Next.js is bundled so they are not compatible. You should import files explicitly in the environments which are using bundlers.

[Urigo]

@tettoffensive do you think we should highlight this on our docs and/or on Next's docs?

[ardatan]

I think we can.

[Urigo]

@tettoffensive would you be willing to PR the docs?
Would be a great way to contribute!