NextJs load multiple files with loadFilesSync or glob,

Question

I am trying to load multiple files with @graphql-tools/load-files I have tried with glob , too, but no success there as well. My folder structure is like this:

/
/.next
/pages
/pages/api
/pages/api/graphql -> there I have an ApolloServer
/server
/types
/types/userTypes.ts
/types/authTypes.ts

And my idea is to have all graphql types in root/types folder as different files and merge them when build: Here is a part of graphql.ts file.

import path from 'path';
import { mergeTypeDefs } from '@graphql-tools/merge';
import { loadFilesSync } from '@graphql-tools/load-files';

const typesArray = loadFilesSync(path.join(__dirname, '../../types/.*'));
console.log(typesArray);

the output is empty [] array. When I try this without NextJs is working as expected, so I guess NextJs is doing something with the folder structure, but I can't figure it out. If some one can help would be great. Thanks in advance.

Answer 1

You are right about how Next JS handles its folder structure

Replace path.join(__dirname, '../../types/.*') with path.join(process.cwd(), 'path') as seen here with-typescript-graphql

Answer 2

To follow on from the accepted answer-

Passing a hardcoded path did not work for me.

Instead, just use a glob pattern.

loadFilesSync('**/*.gql')

The linked example uses graphql-let config which is essentially resolving to a glob pattern similar to this.