How to use loadFilesSync in vercel

[ChrisLFieldsII]

Hello,

I am curious if anyone has any tips on how to use import { loadFilesSync } from '@graphql-tools/load-files' with vercel deployments.

I am using the following code

const typesArray = loadFilesSync(process.cwd(), {
  extensions: ['gql'],
})

It works fine locally but breaks in vercel deployments due to the directory structure vercel uses.

[ChrisLFieldsII]

My solution was to not use import { loadFilesSync } from '@graphql-tools/load-files'

I am following the solution in this issue: piglovesyou/graphql-let#534 (comment)

Essentially rather than dealing with loadFilesSync and figuring out vercels build system, I am using a webpack loader to import the .gql files into the build.

I configured next.config.js like so:

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['zah-dutchie.imgix.net', 'images.dutchie.com'],
  },
  webpack: (config) => {
    config.module.rules.push({
      test: /\.gql$/,
      exclude: /node_modules/,
      loader: '@graphql-tools/webpack-loader',
    })

    return config
  },
}

Here is how I generate my schema now compared to using loadFilesSync:

import { mergeTypeDefs } from '@graphql-tools/merge'
import {
  URLTypeDefinition,
  DateTimeTypeDefinition,
  JSONObjectDefinition,
  EmailAddressTypeDefinition,
} from 'graphql-scalars'

import enums from './enums.gql'
import inputs from './inputs.gql'
import roots from './roots.gql'
import scalars from './scalars.gql'
import types from './types.gql'

const typesArray = [enums, inputs, roots, scalars, types]

const scalarsArray = [
  URLTypeDefinition,
  DateTimeTypeDefinition,
  JSONObjectDefinition,
  EmailAddressTypeDefinition,
]

export const typeDefs = mergeTypeDefs([...typesArray, ...scalarsArray])