Provide people with tabs so they can use classes as well

JoviDeCroock · JoviDeCroock · commit b03667704d4a · 2024-11-06T07:05:12.000+01:00
diff --git a/src/type/schema.ts b/src/type/schema.ts
@@ -14,12 +14,12 @@ import type {
 } from '../language/ast';
 import { OperationTypeNode } from '../language/ast';
 
-import type {
-  GraphQLAbstractType,
-  GraphQLInterfaceType,
-  GraphQLNamedType,
+import {
   GraphQLObjectType,
-  GraphQLType,
+  type GraphQLAbstractType,
+  type GraphQLInterfaceType,
+  type GraphQLNamedType,
+  type GraphQLType,
 } from './definition';
 import {
   getNamedType,
diff --git a/website/pages/basic-types.mdx b/website/pages/basic-types.mdx
@@ -2,6 +2,8 @@
 title: Basic Types
 ---
 
+import { Tabs } from 'nextra/components';
+
 In most situations, all you need to do is to specify the types for your API using the GraphQL schema language, taken as an argument to the `buildSchema` function.
 
 The GraphQL schema language supports the scalar types of `String`, `Int`, `Float`, `Boolean`, and `ID`, so you can use these directly in the schema you pass to `buildSchema`.
@@ -12,6 +14,8 @@ To use a list type, surround the type in square brackets, so `[Int]` is a list o
 
 Each of these types maps straightforwardly to JavaScript, so you can just return plain old JavaScript objects in APIs that return these types. Here's an example that shows how to use some of these basic types:
 
+<Tabs items={['Template', 'Classes']}>
+  <Tabs.Tab>
 ```js
 const express = require('express');
 const { createHandler } = require('graphql-http/lib/use/express');
@@ -50,6 +54,59 @@ 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 {
+  GraphQLObjectType,
+  GraphQLSchema,
+  GraphQLString,
+  GraphQLFloat,
+  GraphQLList,
+} = require('graphql');
+
+// Construct a schema
+const schema = new GraphQLSchema({
+  query: new GraphQLObjectType({
+    name: 'Query',
+    fields: {
+      quoteOfTheDay: { type: GraphQLString },
+      random: { type: GraphQLFloat },
+      rollThreeDice: { type: new GraphQLList(GraphQLFloat) },
+    },
+  }),
+});
+
+// The root provides a resolver function for each API endpoint
+const root = {
+  quoteOfTheDay() {
+    return Math.random() < 0.5 ? 'Take it easy' : 'Salvation lies within';
+  },
+  random() {
+    return Math.random();
+  },
+  rollThreeDice() {
+    return [1, 2, 3].map((_) => 1 + Math.floor(Math.random() * 6));
+  },
+};
+
+const app = express();
+
+app.all(
+  '/graphql',
+  createHandler({
+    schema: schema,
+    rootValue: root,
+  }),
+);
+
+app.listen(4000);
+console.log('Running a GraphQL API server at localhost:4000/graphql');
+```
+  </Tabs.Tab>
+</Tabs>
 
 If you run this code with `node server.js` and browse to http://localhost:4000/graphql you can try out these APIs.
 
diff --git a/website/pages/getting-started.mdx b/website/pages/getting-started.mdx
@@ -3,6 +3,8 @@ title: Getting Started With GraphQL.js
 sidebarTitle: Getting Started
 ---
 
+import { Tabs } from 'nextra/components';
+
 {/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}
 
 # Getting Started With GraphQL.js
@@ -19,7 +21,7 @@ and arrow functions, so if you aren't familiar with them you might want to read
 
 To create a new project and install GraphQL.js in your current directory:
 
-```bash
+```sh npm2yarn
 npm init
 npm install graphql --save
 ```
@@ -28,18 +30,16 @@ npm install graphql --save
 
 To handle GraphQL queries, we need a schema that defines the `Query` type, and we need an API root with a function called a “resolver” for each API endpoint. For an API that just returns “Hello world!”, we can put this code in a file named `server.js`:
 
+<Tabs items={['Template', 'Classes']}>
+  <Tabs.Tab>
 ```javascript
-let { graphql, buildSchema } = require('graphql');
+const { graphql, buildSchema } = require('graphql');
 
 // Construct a schema, using GraphQL schema language
-let schema = buildSchema(`
-  type Query {
-    hello: String
-  }
-`);
+const schema = buildSchema(`type Query { hello: String } `);
 
 // The rootValue provides a resolver function for each API endpoint
-let rootValue = {
+const rootValue = {
   hello() {
     return 'Hello world!';
   },
@@ -53,7 +53,40 @@ graphql({
 }).then((response) => {
   console.log(response);
 });
-```
+````
+</Tabs.Tab>
+<Tabs.Tab>
+```javascript
+const { graphql, GraphQLSchema, GraphQLObjectType } = require('graphql');
+
+// Construct a schema
+const schema = new GraphQLSchema({
+  query: new GraphQLObjectType({
+    name: 'Query',
+    fields: {
+      hello: { type: GraphQLString },
+    },
+  }),
+});
+
+// The rootValue provides a resolver function for each API endpoint
+const rootValue = {
+  hello() {
+    return 'Hello world!';
+  },
+};
+
+// Run the GraphQL query '{ hello }' and print out the response
+graphql({
+  schema,
+  source: '{ hello }',
+  rootValue,
+}).then((response) => {
+  console.log(response);
+});
+````
+  </Tabs.Tab>
+</Tabs>
 
 If you run this with:
 
diff --git a/website/pages/passing-arguments.mdx b/website/pages/passing-arguments.mdx
@@ -2,6 +2,8 @@
 title: Passing Arguments
 ---
 
+import { Tabs } from 'nextra/components';
+
 Just like a REST API, it's common to pass arguments to an endpoint in a GraphQL API. By defining the arguments in the schema language, typechecking happens automatically. Each argument must be named and have a type. For example, in the [Basic Types documentation](/basic-types/) we had an endpoint called `rollThreeDice`:
 
 ```graphql
@@ -12,11 +14,44 @@ type Query {
 
 Instead of hard coding “three”, we might want a more general function that rolls `numDice` dice, each of which have `numSides` sides. We can add arguments to the GraphQL schema language like this:
 
+<Tabs items={['Template', 'Classes']}>
+  <Tabs.Tab>
 ```graphql
 type Query {
   rollDice(numDice: Int!, numSides: Int): [Int]
 }
 ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+```js
+const {
+  GraphQLObjectType,
+  GraphQLNonNull,
+  GraphQLInt,
+  GraphQLString,
+  GraphQLList,
+  GraphQLFloat,
+} = require('graphql');
+
+new GraphQLObjectType({
+  name: 'Query',
+  fields: {
+    rollDice: {
+      type: new GraphQLList(GraphQLFloat),
+      args: {
+        numDice: {
+          type: new GraphQLNonNull(GraphQLInt)
+        },
+        numSides: {
+          type: new GraphQLNonNull(GraphQLInt)
+        },
+      },
+    },
+  },
+})
+```
+  </Tabs.Tab>
+</Tabs>
 
 The exclamation point in `Int!` indicates that `numDice` can't be null, which means we can skip a bit of validation logic to make our server code simpler. We can let `numSides` be null and assume that by default a die has 6 sides.
 
@@ -52,6 +87,8 @@ If you're familiar with destructuring, this is a bit nicer because the line of c
 
 The entire code for a server that hosts this `rollDice` API is:
 
+<Tabs items={['Template', 'Classes']}>
+  <Tabs.Tab>
 ```js
 const express = require('express');
 const { createHandler } = require('graphql-http/lib/use/express');
@@ -86,6 +123,64 @@ 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 {
+  GraphQLObjectType,
+  GraphQLNonNull,
+  GraphQLInt,
+  GraphQLString,
+  GraphQLList,
+  GraphQLFloat,
+} = require('graphql');
+
+// Construct a schema, using GraphQL schema language
+const schema = new GraphQLSchema({
+  query: new GraphQLObjectType({
+    name: 'Query',
+    fields: {
+      rollDice: {
+        type: new GraphQLList(GraphQLFloat),
+        args: {
+          numDice: {
+            type: new GraphQLNonNull(GraphQLInt)
+          },
+          numSides: {
+            type: new GraphQLNonNull(GraphQLInt)
+          },
+        },
+      },
+    },
+  })
+})
+
+// The root provides a resolver function for each API endpoint
+const root = {
+  rollDice({ numDice, numSides }) {
+    const output = [];
+    for (const i = 0; i < numDice; i++) {
+      output.push(1 + Math.floor(Math.random() * (numSides || 6)));
+    }
+    return output;
+  },
+};
+
+const app = express();
+app.all(
+  '/graphql',
+  createHandler({
+    schema: schema,
+    rootValue: root,
+  }),
+);
+app.listen(4000);
+console.log('Running a GraphQL API server at localhost:4000/graphql');
+```
+  </Tabs.Tab>
+</Tabs>
 
 When you call this API, you have to pass each argument by name. So for the server above, you could issue this GraphQL query to roll three six-sided dice:
 
diff --git a/website/pages/running-an-express-graphql-server.mdx b/website/pages/running-an-express-graphql-server.mdx
@@ -3,28 +3,28 @@ title: Running an Express GraphQL Server
 sidebarTitle: Running Express + GraphQL
 ---
 
+import { Tabs } from 'nextra/components';
+
 The simplest way to run a GraphQL API server is to use [Express](https://expressjs.com), a popular web application framework for Node.js. You will need to install two additional dependencies:
 
-```bash
+```sh npm2yarn
 npm install express graphql-http graphql --save
 ```
 
 Let's modify our “hello world” example so that it's an API server rather than a script that runs a single query. We can use the 'express' module to run a webserver, and instead of executing a query directly with the `graphql` function, we can use the `graphql-http` library to mount a GraphQL API server on the “/graphql” HTTP endpoint:
 
-```js
-const express = require('express');
-const { createHandler } = require('graphql-http/lib/use/express');
+<Tabs items={['Template', 'Classes']}>
+  <Tabs.Tab>
+```javascript
 const { buildSchema } = require('graphql');
+const { createHandler } = require('graphql-http/lib/use/express');
+const express = require('express');
 
 // Construct a schema, using GraphQL schema language
-const schema = buildSchema(`
-  type Query {
-    hello: String
-  }
-`);
-
-// The root provides a resolver function for each API endpoint
-const root = {
+const schema = buildSchema(`type Query { hello: String } `);
+
+// The rootValue provides a resolver function for each API endpoint
+const rootValue = {
   hello() {
     return 'Hello world!';
   },
@@ -44,7 +44,48 @@ app.all(
 // Start the server at port
 app.listen(4000);
 console.log('Running a GraphQL API server at http://localhost:4000/graphql');
-```
+````
+</Tabs.Tab>
+<Tabs.Tab>
+```javascript
+const { GraphQLObjectType, GraphQLSchema } = require('graphql');
+const { createHandler } = require('graphql-http/lib/use/express');
+const express = require('express');
+
+// Construct a schema
+const schema = new GraphQLSchema({
+  query: new GraphQLObjectType({
+    name: 'Query',
+    fields: {
+      hello: { type: GraphQLString },
+    },
+  }),
+});
+
+// The rootValue provides a resolver function for each API endpoint
+const rootValue = {
+  hello() {
+    return 'Hello world!';
+  },
+};
+
+const app = express();
+
+// Create and use the GraphQL handler.
+app.all(
+  '/graphql',
+  createHandler({
+    schema: schema,
+    rootValue: root,
+  }),
+);
+
+// Start the server at port
+app.listen(4000);
+console.log('Running a GraphQL API server at http://localhost:4000/graphql');
+````
+  </Tabs.Tab>
+</Tabs>
 
 You can run this GraphQL server with:
 
