Next.js应用部署至Vercel时GraphQL Schema与Resolver构建错误求助

I’ve run into this exact issue before when deploying GraphQL services on Vercel with graphql-tools—local works great, but Serverless Functions throw that frustrating root type error. The core problem is almost always path resolution differences between your local environment and Vercel’s Serverless runtime, where loadFilesSync can’t find your type definitions or resolvers. Here’s how to fix it:

1. Narrow Down Path Wildcards & Use Explicit Directories #

Broad wildcards like ./**/*.graphql can backfire on Vercel because the Serverless build creates extra directories (like .next/serverless) that might cause the loader to either miss your actual files or pick up irrelevant ones. Instead, point directly to the directory where your GraphQL files live.

For example, if your types are in src/graphql/:

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

// Use explicit path to your GraphQL types directory
const typesPath = path.resolve(process.cwd(), "src", "graphql", "**", "*.graphql");
export const types = mergeTypeDefs(loadFilesSync(typesPath));

// Specify resolver file extensions to avoid mismatches
const resolversPath = path.resolve(process.cwd(), "src", "graphql", "**", "*.resolvers.{ts,js}");
export const resolvers = mergeResolvers(loadFilesSync(resolversPath));

2. Resolve Paths Relative to Your Function File #

In Vercel’s Serverless environment, process.cwd() points to /var/task, while your API function lives in .next/serverless/pages/api/graphql.js. If you’re having trouble with process.cwd(), calculate the project root relative to your function’s directory:

// Navigate up from the API function's directory to the project root
const projectRoot = path.resolve(__dirname, "../../.."); // Adjust based on your folder structure
const typesArray = loadFilesSync(path.join(projectRoot, "src", "graphql", "**", "*.graphql"));

3. Ditch loadFilesSync for Explicit Imports (Most Reliable) #

If wildcard loading keeps failing, manually import your type definitions and resolvers. This bypasses path resolution issues entirely because Webpack will handle the file paths during build:

First, add a Webpack rule to load .graphql files (add this to next.config.js):

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.graphql$/,
      exclude: /node_modules/,
      use: ["graphql-tag/loader"],
    });
    return config;
  },
};

Then import your files directly:

import { mergeTypeDefs, mergeResolvers } from "@graphql-tools/merge";
// Import each type definition and resolver explicitly
import userType from "./src/graphql/user.graphql";
import postType from "./src/graphql/post.graphql";
import userResolvers from "./src/graphql/user.resolvers";
import postResolvers from "./src/graphql/post.resolvers";

export const types = mergeTypeDefs([userType, postType]);
export const resolvers = mergeResolvers([userResolvers, postResolvers]);

4. Verify File Loading in Vercel Logs #

To debug further, add console.log statements to check if your files are being loaded:

const typesArray = loadFilesSync(typesPath);
console.log("Loaded type definitions:", typesArray.length); // Check count in Vercel function logs

const resolversArray = loadFilesSync(resolversPath);
console.log("Loaded resolvers:", resolversArray.length);

You can view these logs in your Vercel project dashboard under Functions > api/graphql > Logs. If the count is 0, your path is still incorrect.

Why This Happens #

Local environments have a flat, predictable folder structure, but Vercel’s Serverless build compiles your code into a .next/serverless directory, changing how relative paths resolve. loadFilesSync relies on file system paths that don’t always map 1:1 in the Serverless runtime, so explicit paths or direct imports are more reliable.

内容的提问来源于stack exchange，提问作者Prabir Vora