Going to Production

The @defer and @stream directives are not enabled by default. In order to use these directives, you must add them to your GraphQL Schema and use the experimentalExecuteIncrementally function instead of execute.

import {
  GraphQLSchema,
  GraphQLDeferDirective,
  GraphQLStreamDirective,
  specifiedDirectives,
} from 'graphql';
 
const schema = new GraphQLSchema({
  query,
  directives: [
    ...specifiedDirectives,
    GraphQLDeferDirective,
    GraphQLStreamDirective,
  ],
});
 
const result = experimentalExecuteIncrementally({
  schema,
  document,
});

If the directives option is passed to GraphQLSchema, the default directives will not be included. specifiedDirectives must be passed to ensure all standard directives are added in addition to defer & stream. 126 changes: 126 additions & 0 deletions126
src/pages/graphql-js/going-to-production.mdx Viewed Original file line number Diff line number Diff line change @@ -0,0 +1,126 @@

title: Going to Production

GraphQL.JS contains a few development checks which in production will cause slower performance and an increase in bundle-size. Every bundler goes about these changes different, in here we’ll list out the most popular ones.

Bundler-specific configuration

Here are some bundler-specific suggestions for configuring your bundler to remove globalThis.process and process.env.NODE_ENV on build time.

Vite

export default defineConfig({
  // ...
  define: {
    'globalThis.process': JSON.stringify(true),
    'process.env.NODE_ENV': JSON.stringify('production'),
  },
});

Next.js

// ...
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config, { webpack }) {
    config.plugins.push(
      new webpack.DefinePlugin({
        'globalThis.process': JSON.stringify(true),
        'process.env.NODE_ENV': JSON.stringify('production'),
      }),
    );
    return config;
  },
};
 
module.exports = nextConfig;

create-react-app

With create-react-app, you need to use a third-party package like craco to modify the bundler configuration.

const webpack = require('webpack');
module.exports = {
  webpack: {
    plugins: [
      new webpack.DefinePlugin({
        'globalThis.process': JSON.stringify(true),
        'process.env.NODE_ENV': JSON.stringify('production'),
      }),
    ],
  },
};

esbuild

{
  "define": {
    "globalThis.process": true,
    "process.env.NODE_ENV": "production"
  }
}

Webpack

config.plugins.push(
  new webpack.DefinePlugin({
    'globalThis.process': JSON.stringify(true),
    'process.env.NODE_ENV': JSON.stringify('production'),
  }),
);

Rollup

export default [
  {
    // ... input, output, etc.
    plugins: [
      minify({
        mangle: {
          toplevel: true,
        },
        compress: {
          toplevel: true,
          global_defs: {
            '@globalThis.process': JSON.stringify(true),
            '@process.env.NODE_ENV': JSON.stringify('production'),
          },
        },
      }),
    ],
  },
];

SWC

.swcrc

{
  "jsc": {
    "transform": {
      "optimizer": {
        "globals": {
          "vars": {
            "globalThis.process": true,
            "process.env.NODE_ENV": "production"
          }
        }
      }
    }
  }
}

Enabling Defer & Stream graphql