From 2bcac7eba4c77395b1ba506553ad8135e8db583b Mon Sep 17 00:00:00 2001
From: Jovi De Croock <decroockjovi@gmail.com>
Date: Sun, 20 Oct 2024 07:55:46 +0200
Subject: [PATCH] Add content from
 https://github.com/graphql/graphql.github.io/pull/1782 (#4248)

---
 website/pages/_meta.ts                |   6 +
 website/pages/defer-stream.mdx        |  30 +++++
 website/pages/going-to-production.mdx | 162 ++++++++++++++++++++++++++
 3 files changed, 198 insertions(+)
 create mode 100644 website/pages/defer-stream.mdx
 create mode 100644 website/pages/going-to-production.mdx

diff --git a/website/pages/_meta.ts b/website/pages/_meta.ts
index 569454b3fc..55ac6ab478 100644
--- a/website/pages/_meta.ts
+++ b/website/pages/_meta.ts
@@ -16,7 +16,13 @@ const meta = {
     title: 'Advanced Guides',
   },
   'constructing-types': '',
+  'defer-stream': '',
   '-- 3': {
+    type: 'separator',
+    title: 'FAQ',
+  },
+  'going-to-production': '',
+  '-- 4': {
     type: 'separator',
     title: 'API Reference',
   },
diff --git a/website/pages/defer-stream.mdx b/website/pages/defer-stream.mdx
new file mode 100644
index 0000000000..3abd98a4bf
--- /dev/null
+++ b/website/pages/defer-stream.mdx
@@ -0,0 +1,30 @@
+---
+title: Enabling Defer & Stream
+---
+
+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`.
+
+```js
+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`.
diff --git a/website/pages/going-to-production.mdx b/website/pages/going-to-production.mdx
new file mode 100644
index 0000000000..6da130e99b
--- /dev/null
+++ b/website/pages/going-to-production.mdx
@@ -0,0 +1,162 @@
+---
+title: Enabling Defer & Stream
+---
+
+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`.
+
+```js
+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
+
+```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 filename=".swcrc"
+{
+  "jsc": {
+    "transform": {
+      "optimizer": {
+        "globals": {
+          "vars": {
+            "globalThis.process": true,
+            "process.env.NODE_ENV": "production"
+          }
+        }
+      }
+    }
+  }
+}
+```