Skip to content

Remove CJS from docs #4400

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

Merged
merged 2 commits into from
May 21, 2025
Merged
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
3 changes: 1 addition & 2 deletions website/pages/api-v16/error.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ The `graphql/error` module is responsible for creating and formatting
GraphQL errors. You can import either from the `graphql/error` module, or from the root `graphql` module. For example:

```js
import { GraphQLError } from 'graphql'; // ES6
const { GraphQLError } = require('graphql'); // CommonJS
import { GraphQLError } from 'graphql';
```

## Overview
Expand Down
3 changes: 1 addition & 2 deletions website/pages/api-v16/execution.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ The `graphql/execution` module is responsible for the execution phase of
fulfilling a GraphQL request. You can import either from the `graphql/execution` module, or from the root `graphql` module. For example:

```js
import { execute } from 'graphql'; // ES6
const { execute } = require('graphql'); // CommonJS
import { execute } from 'graphql';
```

## Overview
Expand Down
3 changes: 1 addition & 2 deletions website/pages/api-v16/graphql-http.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ The [official `graphql-http` package](https://github.com/graphql/graphql-http) p
## Express

```js
import { createHandler } from 'graphql-http/lib/use/express'; // ES6
const { createHandler } = require('graphql-http/lib/use/express'); // CommonJS
import { createHandler } from 'graphql-http/lib/use/express';
```

### createHandler
Expand Down
3 changes: 1 addition & 2 deletions website/pages/api-v16/graphql.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ The `graphql` module exports a core subset of GraphQL functionality for creation
of GraphQL type systems and servers.

```js
import { graphql } from 'graphql'; // ES6
const { graphql } = require('graphql'); // CommonJS
import { graphql } from 'graphql';
```

## Overview
Expand Down
3 changes: 1 addition & 2 deletions website/pages/api-v16/language.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ title: graphql/language
The `graphql/language` module is responsible for parsing and operating on the GraphQL language. You can import either from the `graphql/language` module, or from the root `graphql` module. For example:

```js
import { Source } from 'graphql'; // ES6
const { Source } = require('graphql'); // CommonJS
import { Source } from 'graphql';
```

## Overview
Expand Down
3 changes: 1 addition & 2 deletions website/pages/api-v16/type.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ title: graphql/type
The `graphql/type` module is responsible for defining GraphQL types and schema. You can import either from the `graphql/type` module, or from the root `graphql` module. For example:

```js
import { GraphQLSchema } from 'graphql'; // ES6
const { GraphQLSchema } = require('graphql'); // CommonJS
import { GraphQLSchema } from 'graphql';
```

## Overview
Expand Down
3 changes: 1 addition & 2 deletions website/pages/api-v16/utilities.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ The `graphql/utilities` module contains common useful computations to use with
the GraphQL language and type objects. You can import either from the `graphql/utilities` module, or from the root `graphql` module. For example:

```js
import { introspectionQuery } from 'graphql'; // ES6
const { introspectionQuery } = require('graphql'); // CommonJS
import { introspectionQuery } from 'graphql';
```

## Overview
Expand Down
3 changes: 1 addition & 2 deletions website/pages/api-v16/validation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ The `graphql/validation` module fulfills the Validation phase of fulfilling a
GraphQL result. You can import either from the `graphql/validation` module, or from the root `graphql` module. For example:

```js
import { validate } from 'graphql/validation'; // ES6
const { validate } = require('graphql/validation'); // CommonJS
import { validate } from 'graphql/validation';
```

## Overview
Expand Down
8 changes: 4 additions & 4 deletions website/pages/docs/abstract-types.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ concrete type a given value corresponds to.
The following example defines a `ContentItem` interface for a publishing platform:

```js
const { GraphQLInterfaceType, GraphQLString, GraphQLNonNull } = require('graphql');
import { GraphQLInterfaceType, GraphQLString, GraphQLNonNull } from 'graphql';

const ContentItemInterface = new GraphQLInterfaceType({
name: 'ContentItem',
Expand Down Expand Up @@ -69,7 +69,7 @@ The following example implements the `Article` and `PodcastEpisode` types that
conform to the `ContentItem` interface:

```js
const { GraphQLObjectType, GraphQLString, GraphQLNonNull } = require('graphql');
import { GraphQLObjectType, GraphQLString, GraphQLNonNull } from 'graphql';

const ArticleType = new GraphQLObjectType({
name: 'Article',
Expand Down Expand Up @@ -114,7 +114,7 @@ A union requires:
The following example defines a `SearchResult` union:

```js
const { GraphQLUnionType } = require('graphql');
import { GraphQLUnionType } from 'graphql';

const SearchResultType = new GraphQLUnionType({
name: 'SearchResult',
Expand All @@ -134,7 +134,7 @@ const SearchResultType = new GraphQLUnionType({
});
```

Unlike interfaces, unions dont declare any fields of their own. Clients use inline fragments
Unlike interfaces, unions don't declare any fields of their own. Clients use inline fragments
to query fields from the concrete types.

## Resolving abstract types at runtime
Expand Down
10 changes: 5 additions & 5 deletions website/pages/docs/advanced-custom-scalars.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ schema, follow these best practices.

### Document expected formats and validation

Provide a clear description of the scalars accepted input and output formats. For example, a
Provide a clear description of the scalar's accepted input and output formats. For example, a
`DateTime` scalar should explain that it expects [ISO-8601](https://www.iso.org/iso-8601-date-and-time-format.html) strings ending with `Z`.

Clear descriptions help clients understand valid input and reduce mistakes.
Expand Down Expand Up @@ -100,8 +100,8 @@ describe('DateTime scalar', () => {
Integrate the scalar into a schema and run real GraphQL queries to validate end-to-end behavior.

```js
const { graphql, GraphQLSchema, GraphQLObjectType } = require('graphql');
const { DateTimeResolver as DateTime } = require('graphql-scalars');
import { graphql, GraphQLSchema, GraphQLObjectType } from 'graphql';
import { DateTimeResolver as DateTime } from 'graphql-scalars';

const Query = new GraphQLObjectType({
name: 'Query',
Expand Down Expand Up @@ -184,13 +184,13 @@ scalars for DateTime, EmailAddress, URL, UUID, and many others.
### Example: Handling email validation

Handling email validation correctly requires dealing with Unicode, quoted local parts, and
domain validation. Rather than writing your own regex, its better to use a library scalar
domain validation. Rather than writing your own regex, it's better to use a library scalar
that's already validated against standards.

If you need domain-specific behavior, you can wrap an existing scalar with custom rules:

```js
const { EmailAddressResolver } = require('graphql-scalars');
import { EmailAddressResolver } from 'graphql-scalars';

const StrictEmailAddress = new GraphQLScalarType({
...EmailAddressResolver,
Expand Down
16 changes: 8 additions & 8 deletions website/pages/docs/authentication-and-express-middleware.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ For example, let's say we wanted our server to log the IP address of every reque
<Tabs items={['SDL', 'Code']}>
<Tabs.Tab>
```js
const express = require('express');
const { createHandler } = require('graphql-http/lib/use/express');
const { buildSchema } = require('graphql');
import express from 'express';
import { createHandler } from 'graphql-http/lib/use/express';
import { buildSchema } from 'graphql';

const schema = buildSchema(`type Query { ip: String }`);

Expand Down Expand Up @@ -46,17 +46,17 @@ app.all(
app.listen(4000);
console.log('Running a GraphQL API server at localhost:4000/graphql');

````
```
</Tabs.Tab>
<Tabs.Tab>
```js
const express = require('express');
const { createHandler } = require('graphql-http/lib/use/express');
const {
import express from 'express';
import { createHandler } from 'graphql-http/lib/use/express';
import {
GraphQLObjectType,
GraphQLSchema,
GraphQLString,
} = require('graphql');
} from 'graphql';

const schema = new GraphQLSchema({
query: new GraphQLObjectType({
Expand Down
18 changes: 9 additions & 9 deletions website/pages/docs/basic-types.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ Each of these types maps straightforwardly to JavaScript, so you can just return
<Tabs items={['SDL', 'Code']}>
<Tabs.Tab>
```js
const express = require('express');
const { createHandler } = require('graphql-http/lib/use/express');
const { buildSchema } = require('graphql');
import express from 'express';
import { createHandler } from 'graphql-http/lib/use/express';
import { buildSchema } from 'graphql';

// Construct a schema, using GraphQL schema language
const schema = buildSchema(`
Expand Down Expand Up @@ -54,19 +54,19 @@ app.all(
app.listen(4000);
console.log('Running a GraphQL API server at localhost:4000/graphql');

````
```
</Tabs.Tab>
<Tabs.Tab>
```js
const express = require('express');
const { createHandler } = require('graphql-http/lib/use/express');
const {
import express from 'express';
import { createHandler } from 'graphql-http/lib/use/express';
import {
GraphQLObjectType,
GraphQLSchema,
GraphQLString,
GraphQLFloat,
GraphQLList,
} = require('graphql');
} from 'graphql';

// Construct a schema
const schema = new GraphQLSchema({
Expand Down Expand Up @@ -99,8 +99,8 @@ app.all(

app.listen(4000);
console.log('Running a GraphQL API server at localhost:4000/graphql');
````

```
</Tabs.Tab>
</Tabs>

Expand Down
12 changes: 6 additions & 6 deletions website/pages/docs/constructing-types.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ For example, let's say we are building a simple API that lets you fetch user dat
<Tabs items={['SDL', 'Code']}>
<Tabs.Tab>
```js
const express = require('express');
const { createHandler } = require('graphql-http/lib/use/express');
const { buildSchema } = require('graphql');
import express from 'express';
import { createHandler } from 'graphql-http/lib/use/express';
import { buildSchema } from 'graphql';

const schema = buildSchema(`
type User {
Expand Down Expand Up @@ -61,9 +61,9 @@ console.log('Running a GraphQL API server at localhost:4000/graphql');
</Tabs.Tab>
<Tabs.Tab>
```js
const express = require('express');
const { createHandler } = require('graphql-http/lib/use/express');
const graphql = require('graphql');
import express from 'express';
import { createHandler } from 'graphql-http/lib/use/express';
import * as graphql from 'graphql';

// Maps id to User object
const fakeDatabase = {
Expand Down
2 changes: 1 addition & 1 deletion website/pages/docs/cursor-based-pagination.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ The following example shows how to paginate a list of users using PostgreSQL and
client like `pg`:

```js
const db = require('./db');
import db from './db';

async function resolveUsers(_, args) {
const limit = args.first ?? 10;
Expand Down
4 changes: 2 additions & 2 deletions website/pages/docs/custom-scalars.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ full control over how values are serialized, parsed, and validated.
Here’s a simple example of a custom scalar that handles date-time strings:

```js
const { GraphQLScalarType, Kind } = require('graphql');
import { GraphQLScalarType, Kind } from 'graphql';

const DateTime = new GraphQLScalarType({
name: 'DateTime',
Expand Down Expand Up @@ -89,7 +89,7 @@ The following example is a custom `DateTime` scalar that handles ISO-8601 encode
date strings:

```js
const { GraphQLScalarType, Kind } = require('graphql');
import { GraphQLScalarType, Kind } from 'graphql';

const DateTime = new GraphQLScalarType({
name: 'DateTime',
Expand Down
7 changes: 4 additions & 3 deletions website/pages/docs/getting-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import { Tabs } from 'nextra/components';

## Prerequisites

Before getting started, you should have Node v6 installed, although the examples should mostly work in previous versions of Node as well.
Before getting started, you should have at least Node 20 installed, the examples can be tweaked to work with Node versions
before that by switching to require syntax.
For this guide, we won't use any language features that require transpilation, but we will use some ES6 features like
[Promises](http://web.dev/articles/promises/), classes,
and arrow functions, so if you aren't familiar with them you might want to read up on them first.
Expand All @@ -33,7 +34,7 @@ To handle GraphQL queries, we need a schema that defines the `Query` type, and w
<Tabs items={['SDL', 'Code']}>
<Tabs.Tab>
```javascript
const { graphql, buildSchema } = require('graphql');
import { graphql, buildSchema } from 'graphql';

// Construct a schema, using GraphQL schema language
const schema = buildSchema(`type Query { hello: String } `);
Expand All @@ -58,7 +59,7 @@ graphql({
</Tabs.Tab>
<Tabs.Tab>
```javascript
const { graphql, GraphQLSchema, GraphQLObjectType, GraphQLString } = require('graphql');
import { graphql, GraphQLSchema, GraphQLObjectType, GraphQLString } from 'graphql';

// Construct a schema
const schema = new GraphQLSchema({
Expand Down
7 changes: 3 additions & 4 deletions website/pages/docs/going-to-production.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ export default defineConfig({
### Next.js

```js
// ...
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack(config, { webpack }) {
Expand All @@ -39,16 +38,16 @@ const nextConfig = {
},
};

module.exports = nextConfig;
export default 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 = {
import webpack from 'webpack';
export default {
webpack: {
plugins: [
new webpack.DefinePlugin({
Expand Down
Loading
Loading