Skip to content
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/jsutils/instanceOf.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { inspect } from './inspect';

/* c8 ignore next 3 */
const isProduction =
globalThis.process &&
// eslint-disable-next-line no-undef
process.env.NODE_ENV === 'production';

/**
* A replacement for instanceof which includes an error warning when multi-realm
* constructors are detected.
Expand All @@ -9,7 +15,7 @@ import { inspect } from './inspect';
export const instanceOf: (value: unknown, constructor: Constructor) => boolean =
/* c8 ignore next 6 */
// FIXME: https://github.com/graphql/graphql-js/issues/2317
globalThis.process && globalThis.process.env.NODE_ENV === 'production'
isProduction
? function instanceOf(value: unknown, constructor: Constructor): boolean {
return value instanceof constructor;
}
Expand Down
128 changes: 128 additions & 0 deletions website/docs/tutorials/going-to-production.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
---
title: Going to production
category: FAQ
---

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 `proces.env.NODE_ENV` on build time.

### Vite

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

### Next.js

```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`](https://craco.js.org/) to modify the bundler configuration.

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

### esbuild

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

### Webpack

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

### Rollup

```js
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

```json title=".swcrc"
{
"jsc": {
"transform": {
"optimizer": {
"globals": {
"vars": {
"globalThis.process": true,
"process.env.NODE_ENV": "production"
}
}
}
}
}
}
```

5 changes: 5 additions & 0 deletions website/sidebars.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ module.exports = {
label: 'Advanced',
items: ['tutorials/constructing-types'],
},
{
type: 'category',
label: 'FAQ',
items: ['tutorials/going-to-production'],
},
'tutorials/express-graphql',
],
};