Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
JoviDeCroock authored and yaacovCR committed Dec 3, 2024
1 parent 9cf14db commit e40d5d6
Show file tree
Hide file tree
Showing 3 changed files with 198 additions and 0 deletions.
6 changes: 6 additions & 0 deletions website/pages/_meta.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand Down
30 changes: 30 additions & 0 deletions website/pages/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`.
162 changes: 162 additions & 0 deletions website/pages/going-to-production.mdx
Original file line number Diff line number Diff line change
@@ -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"
}
}
}
}
}
}
```

0 comments on commit e40d5d6

Please sign in to comment.