Provide people with tabs so they can use classes as well

Author: JoviDeCroock

Diff for: 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 for: website/pages/authentication-and-express-middleware.mdx

@@ -3,12 +3,16 @@ title: Authentication and Express Middleware
 sidebarTitle: Authentication & Middleware
 ---
 
+import { Tabs } from 'nextra/components'
+
 It's simple to use any Express middleware in conjunction with `graphql-http`. In particular, this is a great pattern for handling authentication.
 
 To use middleware with a GraphQL resolver, just use the middleware like you would with a normal Express app. The `request` object is then available as the second argument in any resolver.
 
 For example, let's say we wanted our server to log the IP address of every request, and we also want to write an API that returns the IP address of the caller. We can do the former with middleware, and the latter by accessing the `request` object in a resolver. Here's server code that implements this:
 
+<Tabs items={['Template', 'Classes']}>
+  <Tabs.Tab>
 ```js
 const express = require('express');
 const { createHandler } = require('graphql-http/lib/use/express');
@@ -46,6 +50,52 @@ 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,
+} = require('graphql');
+
+const schema = new GraphQLSchema({
+  query: new GraphQLObjectType({
+    name: 'Query',
+    fields: { ip: { type: GraphQLString } },
+  }),
+});
+
+function loggingMiddleware(req, res, next) {
+  console.log('ip:', req.ip);
+  next();
+}
+
+const root = {
+  ip(args, context) {
+    return context.ip;
+  },
+};
+
+const app = express();
+app.use(loggingMiddleware);
+app.all(
+  '/graphql',
+  createHandler({
+    schema: schema,
+    rootValue: root,
+    context: (req) => ({
+      ip: req.raw.ip,
+    }),
+  }),
+);
+app.listen(4000);
+console.log('Running a GraphQL API server at localhost:4000/graphql');
+```
+  </Tabs.Tab>
+</Tabs>
 
 In a REST API, authentication is often handled with a header, that contains an auth token which proves what user is making this request. Express middleware processes these headers and puts authentication data on the Express `request` object. Some middleware modules that handle authentication like this are [Passport](http://passportjs.org/), [express-jwt](https://github.com/auth0/express-jwt), and [express-session](https://github.com/expressjs/session). Each of these modules works with `graphql-http`.
 

Diff for: 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 for: 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: