docs: provide TS versions of examples with await new Promise (#5825)

TypeScript does not infer `Promise<void>` for `await new Promise(...)`
(see microsoft/TypeScript#40162) which means
that this idiom requires us to write `await new Promise<void>(...)`. But
that's not valid JS.

Fortunately @trevorblades has gifted us with a magical MultiCodeBlock
component which lets us write TypeScript and make it available to users
as both TS and JS! It runs Babel and Prettier on it but doesn't do any
type checking.

I've found all the examples that use `await new Promise` in the docs
(and the other examples on the "which package" page for consistency) and
changed them to use MultiCodeBlock.

I made some minor formatting changes to minimize the diff between the TS
and JS versions. Note that I am leaving them in apollo-server's
preferred Prettier style (single quotes, trailing commas) even though
the component runs Prettier with default options; @trevorblades says we
can get the ability to override Prettier options soon, so that can be a
follow-up PR.

Fixes #5822.

Author: glasser

docs/source/api/apollo-server.md renamed to docs/source/api/apollo-server.mdx

@@ -4,6 +4,8 @@ sidebar_title: ApolloServer
 api_reference: true
 ---
 
+import { MultiCodeBlock } from 'gatsby-theme-apollo-docs';
+
 This API reference documents the `ApolloServer` class.
 
 There are [multiple implementations](../integrations/middleware/) of `ApolloServer` for different web frameworks with slightly different behavior.
@@ -269,6 +271,7 @@ Provide this function to transform the structure of GraphQL response objects bef
 ##### `apollo`
 
 `Object`
+</td>
 <td>
 
 An object containing configuration options for connecting Apollo Server to [Apollo Studio](https://www.apollographql.com/docs/studio/). Each field of this object can also be set with an environment variable, which is the recommended method of setting these parameters. All fields are optional. The fields are:
@@ -500,7 +503,7 @@ The `context` object passed between Apollo Server resolvers automatically includ
 | Azure Functions  | <code>{<br/>&nbsp;&nbsp;request: [`HttpRequest`](https://github.com/Azure/azure-functions-nodejs-worker/blob/ba8402bd3e86344e68cb06f65f9740b5d05a9700/types/public/Interfaces.d.ts#L73-L108),<br/>&nbsp;&nbsp;context: [`Context`](https://github.com/Azure/azure-functions-nodejs-worker/blob/ba8402bd3e86344e68cb06f65f9740b5d05a9700/types/public/Interfaces.d.ts#L18-L69)<br/>}</code> |
 | Cloudflare  | <code>{ req: [`Request`](https://github.com/apollographql/apollo-server/blob/04fe6aa1314ca84de26b4dc26e9b29dda16b81bc/packages/apollo-server-env/src/fetch.d.ts#L37-L45) }</code> |
 | Express (including `apollo-server`) | <code>{<br/>&nbsp;&nbsp;req: [`express.Request`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/50adc95acf873e714256074311353232fcc1b5ed/types/express-serve-static-core/index.d.ts),<br/>&nbsp;&nbsp;res: [`express.Response`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/50adc95acf873e714256074311353232fcc1b5ed/types/express-serve-static-core/index.d.ts#L490-L861)<br/>}</code> |
-| Fastify  | <code>{<br/>&nbsp;&nbsp;request: [`FastifyRequest`](https://github.com/fastify/fastify/blob/1d4dcf2bcde46256c72e96c2cafc843a461c721e/types/request.d.ts#L15),<br/>&nbsp;&nbsp;reply: [`FastifyReply`](https://github.com/fastify/fastify/blob/1d4dcf2bcde46256c72e96c2cafc843a461c721e/types/reply.d.ts#L10)</br>}</code> |
+| Fastify  | <code>{<br/>&nbsp;&nbsp;request: [`FastifyRequest`](https://github.com/fastify/fastify/blob/1d4dcf2bcde46256c72e96c2cafc843a461c721e/types/request.d.ts#L15),<br/>&nbsp;&nbsp;reply: [`FastifyReply`](https://github.com/fastify/fastify/blob/1d4dcf2bcde46256c72e96c2cafc843a461c721e/types/reply.d.ts#L10)<br/>}</code> |
 | Google Cloud Functions  | <code>{ req: [`Request`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/50adc95acf873e714256074311353232fcc1b5ed/types/express-serve-static-core/index.d.ts), res: [`Response`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/50adc95acf873e714256074311353232fcc1b5ed/types/express-serve-static-core/index.d.ts#L490-L861) }</code> |
 | hapi  | <code>{<br/>&nbsp;&nbsp;request: [`hapi.Request`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/05cbc5521f895344fb7dbf5c51902b6ff235aa69/types/hapi__hapi/index.d.ts#L406-L615),<br/>&nbsp;&nbsp;h: [`hapi.ResponseToolkit`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/05cbc5521f895344fb7dbf5c51902b6ff235aa69/types/hapi__hapi/index.d.ts#L999-L1113)<br/>}</code> |
 | Koa | <code>{ ctx: [`Koa.Context`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/50adc95acf873e714256074311353232fcc1b5ed/types/koa/index.d.ts#L724-L731) }</code> |
@@ -610,9 +613,11 @@ You call this method instead of [`listen`](#listen) if you're using a framework-
 
 These functions take an `options` object as a parameter. Some supported fields of this object are described below. **Not all packages support all options.** See [your package's description](../integrations/middleware/#basic-usage) to see what the name of the function is and which options are supported.
 
-### Example
+Here's an example of using `applyMiddleware` with `apollo-server-express`.
 
-```js
+<MultiCodeBlock>
+
+```ts:title=index.ts
 const express = require('express');
 const { ApolloServer } = require('apollo-server-express');
 const { ApolloServerPluginDrainHttpServer } = require('apollo-server-core');
@@ -626,19 +631,22 @@ async function startApolloServer() {
     resolvers,
     plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
   });
+
   await server.start();
 
   // Additional middleware can be mounted at this point to run before Apollo.
   app.use('*', jwtCheck, requireAuth, checkScope);
 
   // Mount Apollo middleware here.
   server.applyMiddleware({ app, path: '/specialUrl' });
-  await new Promise(resolve => httpServer.listen({ port: 4000 }, resolve));
+  await new Promise<void>(resolve => httpServer.listen({ port: 4000 }, resolve));
   console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`);
   return { server, app };
 }
 ```
 
+</MultiCodeBlock>
+
 ### Options
 
 <table class="field-table">

docs/source/api/plugin/drain-http-server.md renamed to docs/source/api/plugin/drain-http-server.mdx

@@ -4,6 +4,8 @@ sidebar_title: Drain HTTP server
 api_reference: true
 ---
 
+import { MultiCodeBlock } from 'gatsby-theme-apollo-docs';
+
 ## Using the plugin
 
 This API reference documents the `ApolloServerPluginDrainHttpServer` plugin.
@@ -24,7 +26,9 @@ This plugin is exported from the `apollo-server-core` package. It is tested with
 
 Here's a basic example of how to use it with Express. See the [framework integrations docs](../../integrations/middleware/) for examples of how to use it with other frameworks.
 
-```js
+<MultiCodeBlock>
+
+```ts:title=index.ts
 const express = require('express');
 const { ApolloServer } = require('apollo-server-express');
 const { ApolloServerPluginDrainHttpServer } = require('apollo-server-core');
@@ -39,16 +43,19 @@ async function startApolloServer() {
     resolvers,
     plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
   });
+
   await server.start();
 
   // Mount Apollo middleware here.
   server.applyMiddleware({ app });
-  await new Promise(resolve => httpServer.listen({ port: 4000 }, resolve));
+  await new Promise<void>(resolve => httpServer.listen({ port: 4000 }, resolve));
   console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`);
   return { server, app };
 }
 ```
 
+</MultiCodeBlock>
+
 ## Options
 
 <table class="field-table">

docs/source/data/file-uploads.md renamed to docs/source/data/file-uploads.mdx

@@ -3,13 +3,17 @@ title: File uploads
 description: Enabling file uploads in Apollo Server
 ---
 
+import { MultiCodeBlock } from 'gatsby-theme-apollo-docs';
+
 You can add file upload support to Apollo Server via the third-party [`graphql-upload`](https://npm.im/graphql-upload) library. This package provides support for the `multipart/form-data` content-type.
 
 **New in Apollo Server 3:** Apollo Server 3 does not contain a built-in integration with `graphql-upload` like in Apollo Server 2. Instead, the instructions below show how to integrate it yourself. You cannot do this with the "batteries-included" `apollo-server` library; you must use a web framework integration such as `apollo-server-express` instead. This page shows out to integrate `graphql-upload` with Express and Fastify. To implement similar functionality with another Node.js HTTP framework (e.g., Koa), see the [`graphql-upload` documentation](https://github.com/jaydenseric/graphql-upload) for more information. Some integrations might need to use `graphql-upload`'s `processRequest` directly.
 
 ### Integrating with Express
 
-```js
+<MultiCodeBlock>
+
+```ts:title=index.ts
 const express = require('express');
 const { ApolloServer, gql } = require('apollo-server-express');
 const {
@@ -81,14 +85,16 @@ async function startServer() {
 
   server.applyMiddleware({ app });
 
-  await new Promise(r => app.listen({ port: 4000 }, r));
+  await new Promise<void>(r => app.listen({ port: 4000 }, r));
 
   console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`);
 }
 
 startServer();
 ```
 
+</MultiCodeBlock>
+
 ### Integrating with Fastify
 
 ```js