Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add additional content from graphql-js repository #1782

Closed
Closed
Show file tree
Hide file tree
Changes from all 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
6 changes: 6 additions & 0 deletions src/pages/graphql-js/_meta.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,13 @@ export default {
title: "Advanced Guides",
},
"constructing-types": "",
"defer-stream": "",
"-- 3": {
type: "separator",
title: "FAQ",
},
"going-to-production": "",
"-- 4": {
type: "separator",
title: "API Reference",
},
Expand Down
30 changes: 30 additions & 0 deletions src/pages/graphql-js/defer-stream.mdx
Original file line number Diff line number Diff line change
@@ -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`.
126 changes: 126 additions & 0 deletions src/pages/graphql-js/going-to-production.mdx
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"
}
}
}
}
}
}
```