fix sidebar for documentation and /api-v16 (#4331)

dimaMachina · JoviDeCroock · JoviDeCroock · commit 26c7de87d8a3 · 2025-05-04T10:26:26.000+02:00
Co-authored-by: Jovi De Croock &lt;decroockjovi@gmail.com&gt;
diff --git a/website/next.config.js b/website/next.config.js
@@ -1,5 +1,9 @@
 /* eslint-disable camelcase */
 import path from 'node:path';
+import fs from 'node:fs';
+
+const fileContents = fs.readFileSync('./vercel.json', 'utf-8');
+const vercel = JSON.parse(fileContents);
 
 import nextra from 'nextra';
 
@@ -29,6 +33,7 @@ export default withNextra({
     });
     return config;
   },
+  redirects: async () => vercel.redirects,
   output: 'export',
   images: {
     loader: 'custom',
diff --git a/website/pages/_meta.ts b/website/pages/_meta.ts
@@ -1,29 +1,8 @@
 const meta = {
-  index: '',
-  '-- 1': {
-    type: 'separator',
-    title: 'GraphQL.JS Tutorial',
+  docs: {
+    type: 'page',
+    title: 'Documentation',
   },
-  'getting-started': '',
-  'running-an-express-graphql-server': '',
-  'graphql-clients': '',
-  'basic-types': '',
-  'passing-arguments': '',
-  'object-types': '',
-  'mutations-and-input-types': '',
-  'authentication-and-express-middleware': '',
-  '-- 2': {
-    type: 'separator',
-    title: 'Advanced Guides',
-  },
-  'constructing-types': '',
-  'oneof-input-objects': 'OneOf input objects',
-  'defer-stream': '',
-  '-- 3': {
-    type: 'separator',
-    title: 'FAQ',
-  },
-  'going-to-production': '',
   'api-v16': {
     type: 'menu',
     title: 'API',
diff --git a/website/pages/docs/_meta.ts b/website/pages/docs/_meta.ts
@@ -0,0 +1,29 @@
+const meta = {
+  index: '',
+  '-- 1': {
+    type: 'separator',
+    title: 'GraphQL.JS Tutorial',
+  },
+  'getting-started': '',
+  'running-an-express-graphql-server': '',
+  'graphql-clients': '',
+  'basic-types': '',
+  'passing-arguments': '',
+  'object-types': '',
+  'mutations-and-input-types': '',
+  'authentication-and-express-middleware': '',
+  '-- 2': {
+    type: 'separator',
+    title: 'Advanced Guides',
+  },
+  'constructing-types': '',
+  'oneof-input-objects': '',
+  'defer-stream': '',
+  '-- 3': {
+    type: 'separator',
+    title: 'FAQ',
+  },
+  'going-to-production': '',
+};
+
+export default meta;
diff --git a/website/pages/docs/authentication-and-express-middleware.mdx b/website/pages/docs/authentication-and-express-middleware.mdx
diff --git a/website/pages/docs/basic-types.mdx b/website/pages/docs/basic-types.mdx
@@ -112,4 +112,4 @@ console.log('Running a GraphQL API server at localhost:4000/graphql');
 
 If you run this code with `node server.js` and browse to http://localhost:4000/graphql you can try out these APIs.
 
-These examples show you how to call APIs that return different types. To send different types of data into an API, you will also need to learn about [passing arguments to a GraphQL API](/passing-arguments/).
+These examples show you how to call APIs that return different types. To send different types of data into an API, you will also need to learn about [passing arguments to a GraphQL API](./passing-arguments).
diff --git a/website/pages/docs/constructing-types.mdx b/website/pages/docs/constructing-types.mdx
diff --git a/website/pages/docs/defer-stream.mdx b/website/pages/docs/defer-stream.mdx
diff --git a/website/pages/docs/getting-started.mdx b/website/pages/docs/getting-started.mdx
@@ -109,4 +109,4 @@ You should see the GraphQL response printed out:
 
 Congratulations - you just executed a GraphQL query!
 
-For practical applications, you'll probably want to run GraphQL queries from an API server, rather than executing GraphQL with a command line tool. To use GraphQL for an API server over HTTP, check out [Running an Express GraphQL Server](/running-an-express-graphql-server/).
+For practical applications, you'll probably want to run GraphQL queries from an API server, rather than executing GraphQL with a command line tool. To use GraphQL for an API server over HTTP, check out [Running an Express GraphQL Server](./running-an-express-graphql-server).
diff --git a/website/pages/docs/going-to-production.mdx b/website/pages/docs/going-to-production.mdx
diff --git a/website/pages/docs/graphql-clients.mdx b/website/pages/docs/graphql-clients.mdx
@@ -4,7 +4,7 @@ title: GraphQL Clients
 
 Since a GraphQL API has more underlying structure than a REST API, there are more powerful clients like [Relay](https://facebook.github.io/relay/) which can automatically handle batching, caching, and other features. But you don't need a complex client to call a GraphQL server. With `graphql-http`, you can just send an HTTP POST request to the endpoint you mounted your GraphQL server on, passing the GraphQL query as the `query` field in a JSON payload.
 
-For example, let's say we mounted a GraphQL server on http://localhost:4000/graphql as in the example code for [running an Express GraphQL server](/running-an-express-graphql-server/), and we want to send the GraphQL query `{ hello }`. We can do this from the command line with `curl`. If you paste this into a terminal:
+For example, let's say we mounted a GraphQL server on http://localhost:4000/graphql as in the example code for [running an Express GraphQL server](./running-an-express-graphql-server), and we want to send the GraphQL query `{ hello }`. We can do this from the command line with `curl`. If you paste this into a terminal:
 
 ```bash
 curl -X POST \
@@ -42,9 +42,9 @@ You should see the data returned, logged in the console:
 data returned: Object { hello: "Hello world!" }
 ```
 
-In this example, the query was just a hardcoded string. As your application becomes more complex, and you add GraphQL endpoints that take arguments as described in [Passing Arguments](/passing-arguments/), you will want to construct GraphQL queries using variables in client code. You can do this by including a keyword prefixed with a dollar sign in the query, and passing an extra `variables` field on the payload.
+In this example, the query was just a hardcoded string. As your application becomes more complex, and you add GraphQL endpoints that take arguments as described in [Passing Arguments](./passing-arguments), you will want to construct GraphQL queries using variables in client code. You can do this by including a keyword prefixed with a dollar sign in the query, and passing an extra `variables` field on the payload.
 
-For example, let's say you're running the example server from [Passing Arguments](/passing-arguments/) that has a schema of
+For example, let's say you're running the example server from [Passing Arguments](./passing-arguments) that has a schema of
 
 ```graphql
 type Query {
@@ -82,4 +82,4 @@ Using this syntax for variables is a good idea because it automatically prevents
 
 In general, it will take a bit more time to set up a GraphQL client like Relay, but it's worth it to get more features as your application grows. You might want to start out just using HTTP requests as the underlying transport layer, and switching to a more complex client as your application gets more complex.
 
-At this point you can write a client and server in GraphQL for an API that receives a single string. To do more, you will want to [learn how to use the other basic data types](/basic-types/).
+At this point you can write a client and server in GraphQL for an API that receives a single string. To do more, you will want to [learn how to use the other basic data types](./basic-types).
diff --git a/website/pages/docs/index.mdx b/website/pages/docs/index.mdx
@@ -7,12 +7,12 @@ GraphQL.JS is the reference implementation to the [GraphQL Specification](https:
 while closely following the Specification.
 
 You can build GraphQL servers, clients, and tools with this library, it's designed so you can choose which parts you use, for example, you can build your own parser
-and use the execution/validation from the library. There also a lot of useful utilities for schema-diffing, working with arguments and [many more](./utilities.mdx).
+and use the execution/validation from the library. There also a lot of useful utilities for schema-diffing, working with arguments and many more.
 
 In the following chapters you'll find out more about the three critical pieces of this library
 
 - The GraphQL language
 - Document validation
 - GraphQL Execution
 
-You can also code along on [a tutorial](./getting-started.mdx).
+You can also code along on [a tutorial](/docs/getting-started).
diff --git a/website/pages/docs/mutations-and-input-types.mdx b/website/pages/docs/mutations-and-input-types.mdx
@@ -402,4 +402,4 @@ fetch('/graphql', {
   .then((data) => console.log('data returned:', data));
 ```
 
-One particular type of mutation is operations that change users, like signing up a new user. While you can implement this using GraphQL mutations, you can reuse many existing libraries if you learn about [GraphQL with authentication and Express middleware](/authentication-and-express-middleware/).
+One particular type of mutation is operations that change users, like signing up a new user. While you can implement this using GraphQL mutations, you can reuse many existing libraries if you learn about [GraphQL with authentication and Express middleware](./authentication-and-express-middleware).
diff --git a/website/pages/docs/object-types.mdx b/website/pages/docs/object-types.mdx
@@ -6,7 +6,7 @@ import { Tabs } from 'nextra/components';
 
 In many cases, you don't want to return a number or a string from an API. You want to return an object that has its own complex behavior. GraphQL is a perfect fit for this.
 
-In GraphQL schema language, the way you define a new object type is the same way we have been defining the `Query` type in our examples. Each object can have fields that return a particular type, and methods that take arguments. For example, in the [Passing Arguments](/passing-arguments/) documentation, we had a method to roll some random dice:
+In GraphQL schema language, the way you define a new object type is the same way we have been defining the `Query` type in our examples. Each object can have fields that return a particular type, and methods that take arguments. For example, in the [Passing Arguments](./passing-arguments) documentation, we had a method to roll some random dice:
 
 <Tabs items={['SDL', 'Code']}>
   <Tabs.Tab>
@@ -369,4 +369,4 @@ If you run this code with `node server.js` and browse to http://localhost:4000/g
 
 This way of defining object types often provides advantages over a traditional REST API. Instead of doing one API request to get basic information about an object, and then multiple subsequent API requests to find out more information about that object, you can get all of that information in one API request. That saves bandwidth, makes your app run faster, and simplifies your client-side logic.
 
-So far, every API we've looked at is designed for returning data. In order to modify stored data or handle complex input, it helps to [learn about mutations and input types](/mutations-and-input-types/).
+So far, every API we've looked at is designed for returning data. In order to modify stored data or handle complex input, it helps to [learn about mutations and input types](./mutations-and-input-types).
diff --git a/website/pages/docs/oneof-input-objects.mdx b/website/pages/docs/oneof-input-objects.mdx
@@ -24,7 +24,7 @@ const schema = buildSchema(`
     shelfNumber: Int!
     positionOnShelf: Int!
   }
-  
+
   input ProductSpecifier @oneOf {
     id: ID
     name: String
@@ -88,4 +88,4 @@ const schema = new GraphQLSchema({
 
 It doesn't matter whether you have 2 or more inputs here, all that matters is
 that your user will have to specify one, and only one, for this input to be valid.
-The values are not limited to scalars, lists and other input object types are also allowed.
+The values are not limited to scalars, lists and other input object types are also allowed.
diff --git a/website/pages/docs/passing-arguments.mdx b/website/pages/docs/passing-arguments.mdx
@@ -4,7 +4,7 @@ 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`:
+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
 type Query {
@@ -221,4 +221,4 @@ fetch('/graphql', {
 
 Using `$dice` and `$sides` as variables in GraphQL means we don't have to worry about escaping on the client side.
 
-With basic types and argument passing, you can implement anything you can implement in a REST API. But GraphQL supports even more powerful queries. You can replace multiple API calls with a single API call if you learn how to [define your own object types](/object-types/).
+With basic types and argument passing, you can implement anything you can implement in a REST API. But GraphQL supports even more powerful queries. You can replace multiple API calls with a single API call if you learn how to [define your own object types](./object-types).
diff --git a/website/pages/docs/running-an-express-graphql-server.mdx b/website/pages/docs/running-an-express-graphql-server.mdx
@@ -114,4 +114,4 @@ app.get('/', (_req, res) => {
 If you navigate to [http://localhost:4000](http://localhost:4000), you should see an interface that lets you enter queries;
 now you can use the GraphiQL IDE tool to issue GraphQL queries directly in the browser.
 
-At this point you have learned how to run a GraphQL server. The next step is to learn how to [issue GraphQL queries from client code](/graphql-clients/).
+At this point you have learned how to run a GraphQL server. The next step is to learn how to [issue GraphQL queries from client code](./graphql-clients).
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
@@ -4,7 +4,6 @@ const config = {
   content: [
     './pages/**/*.{ts,tsx,mdx}',
     './icons/**/*.{ts,tsx,mdx}',
-    './css/**/*.css',
     './theme.config.tsx',
   ],
   theme: {
diff --git a/website/vercel.json b/website/vercel.json
@@ -4,6 +4,11 @@
       "source": "/api",
       "destination": "/api-v16/graphql",
       "permanent": true
+    },
+    {
+      "source": "/",
+      "destination": "/docs",
+      "permanent": true
     }
   ]
 }

Original file line number	Diff line number	Diff line change
`@@ -112,4 +112,4 @@ console.log('Running a GraphQL API server at localhost:4000/graphql');`
`112`	`112`
`113`	`113`	If you run this code with `node server.js` and browse to http://localhost:4000/graphql you can try out these APIs.
`114`	`114`
`115`		`-These examples show you how to call APIs that return different types. To send different types of data into an API, you will also need to learn about [passing arguments to a GraphQL API](/passing-arguments/).`
	`115`	`+These examples show you how to call APIs that return different types. To send different types of data into an API, you will also need to learn about [passing arguments to a GraphQL API](./passing-arguments).`
Original file line number	Diff line number	Diff line change
`@@ -109,4 +109,4 @@ You should see the GraphQL response printed out:`
`109`	`109`
`110`	`110`	`Congratulations - you just executed a GraphQL query!`
`111`	`111`
`112`		`-For practical applications, you'll probably want to run GraphQL queries from an API server, rather than executing GraphQL with a command line tool. To use GraphQL for an API server over HTTP, check out [Running an Express GraphQL Server](/running-an-express-graphql-server/).`
	`112`	`+For practical applications, you'll probably want to run GraphQL queries from an API server, rather than executing GraphQL with a command line tool. To use GraphQL for an API server over HTTP, check out [Running an Express GraphQL Server](./running-an-express-graphql-server).`