Cannot get PrismaTypes in the schema when running the build with npm run start (Remix.run, pothos, prisma and graphql-yoga)

[LorenzoJokhan]

Hello,

I am having an issue with using the generated PrismaTypes in my graphql server instance using graphql-yoga.
When i am running the remix application with npm run dev, then the types are set and i see my scheme:

{ schema: GraphQLSchema { ...TheUsualFields, Organisation: [GraphQLObjectType], Teacher: [GraphQLObjectType], } }

However using npm run build and npm run start results in the scheme without all my types:
{ schema: GraphQLSchema { ...otherFields, _typeMap: [Object: null prototype] { Boolean: [GraphQLScalarType], DateTime: [GraphQLScalarType], Float: [GraphQLScalarType], ID: [GraphQLScalarType], Int: [GraphQLScalarType], JSONObject: [GraphQLScalarType], Mutation: [GraphQLObjectType], Query: [GraphQLObjectType], String: [GraphQLScalarType], __Directive: [GraphQLObjectType], __DirectiveLocation: [GraphQLEnumType], __EnumValue: [GraphQLObjectType], __Field: [GraphQLObjectType], __InputValue: [GraphQLObjectType], __Schema: [GraphQLObjectType], __Type: [GraphQLObjectType], __TypeKind: [GraphQLEnumType] }, _subTypeMap: [Object: null prototype] {}, _implementationsMap: [Object: null prototype] {} } }

[ tsconfig.json ]
{
"include": [
"**/*.d.ts",
"**/*.ts",
"**/*.tsx",
"**/.server/**/*.ts",
"**/.server/**/*.d.ts",
"**/.server/**/*.tsx",
"**/.client/**/*.d.ts",
"**/.client/**/*.tsx"
],
"exclude": ["node_modules"],
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"types": ["@remix-run/node", "vite/client"],
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
"module": "ESNext",
"moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2022",
"strict": true,
"allowJs": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"paths": {
"~/": ["./app/"]
},

// Vite takes care of building everything, not tsc.
"noEmit": true

}
}

[vite.config]
import { sentryVitePlugin } from '@sentry/vite-plugin';
import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig } from 'vite';
import { installGlobals } from '@remix-run/node';
import tsconfigPaths from 'vite-tsconfig-paths';
import { vercelPreset } from '@vercel/remix/vite';

installGlobals();

export default defineConfig(({}) => {
const isProduction = process.env.NODE_ENV === 'production';

return {
plugins: [
remix({
presets: [vercelPreset()],
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
},
}),
tsconfigPaths(),
sentryVitePlugin({
org: 'savvycodes',
project: 'lessenplan-lvs',
}),
],

build: {
  sourcemap: !isProduction,
},

};
});

[Graphql server]
// graphql-server.js
import { createYoga } from 'graphql-yoga';

import { schema } from './app/services.server/graphql/schema';
export const config = {
api: {
// Disable body parsing (required for file uploads)
bodyParser: false,
},
};

const plugins = [];

if (process.env.NODE_ENV === 'production') {
// Disable introspection in production build
// @todo: persisted-operations or graphql-armor would be a better solution.
/* eslint-disable react-hooks/rules-of-hooks */
// plugins.push(useDisableIntrospection());
}

console.info({ schema });

/**

• Create graphql server
  */
  export default createYoga<{
  req: Request;
  res: Response;
  }>({
  // Needed to be defined explicitly because our endpoint lives at a different path other than /graphql
  graphqlEndpoint: '/api/graphql',
  schema,

// We won't handle file uploads via GraphQL so we disable multipart requests which can be used for CSRF attacks
multipart: false,
plugins,
maskedErrors: false, // Boolean(process.env.NODE_ENV === 'production'),
});

[Graphql route through remix]
import {
ActionFunctionArgs,
json,
LoaderFunctionArgs,
} from '@remix-run/server-runtime';
import yoga from '../../graphql.server';

export const loader = async ({ request }: LoaderFunctionArgs) => {
return yoga.handleRequest(request, { req: request, res: new Response() });
};

export const action = async ({ request }: ActionFunctionArgs) => {
return yoga.handleRequest(request, { req: request, res: new Response() });
};

In development everything works great, but with a production build it does not have any of my own types.
Hope that someone can push me in the right direction.

PS: When i navigate to the route /api/graphql i see the message in the editor " "message": "Type Mutation must define one or more fields."
"

[atman-33]

I encountered a similar issue.

In my case, I separated type definitions into individual files (such as post.model.ts) and imported them into an index file for the schema.

Code Before Fix

post.model.ts

import { builder } from '~/lib/graphql/builder';

export const PostStatus = builder.enumType('PostStatus', {
  values: ['DRAFT', 'PUBLIC'] as const,
});

builder.prismaObject('PostTag', {
  fields: (t) => ({
    id: t.exposeString('id'),
    post: t.relation('post'),
    tag: t.relation('tag'),
  }),
});

builder.prismaNode('Post', {
  id: { field: 'id' },
  findUnique: (id) => ({ id }),
  fields: (t) => ({
    title: t.exposeString('title'),
    emoji: t.exposeString('emoji'),
    content: t.exposeString('content'),
    status: t.expose('status', { type: PostStatus }),
    author: t.relation('author'),
    createdAt: t.expose('createdAt', { type: 'DateTime' }),
    updatedAt: t.expose('updatedAt', { type: 'DateTime' }),
    tags: t.relation('tags'),
  }),
});

post/index.ts

import './post.model';
import './post.mutation';
import './post.query';

schema/index.ts

import { builder } from '../builder';

import './post';
import './tag';
import './user';

export const schema = builder.toSchema();

In this setup, during the Vite build, the type definition files imported in schema/index.ts were being excluded from the build process.

Code After Fix

To work around this, I created a load function. Since empty functions are still omitted during the build, I added console logs to ensure the code is included.

post.model.ts

import { builder } from '~/lib/graphql/builder';

export const PostStatus = builder.enumType('PostStatus', {
  values: ['DRAFT', 'PUBLIC'] as const,
});

builder.prismaObject('PostTag', {
  fields: (t) => ({
    id: t.exposeString('id'),
    post: t.relation('post'),
    tag: t.relation('tag'),
  }),
});

builder.prismaNode('Post', {
  id: { field: 'id' },
  findUnique: (id) => ({ id }),
  fields: (t) => ({
    title: t.exposeString('title'),
    emoji: t.exposeString('emoji'),
    content: t.exposeString('content'),
    status: t.expose('status', { type: PostStatus }),
    author: t.relation('author'),
    createdAt: t.expose('createdAt', { type: 'DateTime' }),
    updatedAt: t.expose('updatedAt', { type: 'DateTime' }),
    tags: t.relation('tags'),
  }),
});

// add below
export const loadPostModel = () => {
  console.log('Post model loaded');
};

post/index.ts

import { loadPostModel } from './post.model';
import { loadPostMutation } from './post.mutation';
import { loadPostQuery } from './post.query';

export const loadPost = () => {
  loadPostModel();
  loadPostMutation();
  loadPostQuery();
};

schema/index.ts

import { builder } from '../builder';
import { loadPost } from './post';
import { loadTag } from './tag';
import { loadUser } from './user';

// load schemas
loadPost();
loadTag();
loadUser();

export const schema = builder.toSchema();