Updates for new docs infra (apollographql#9518)

* Prepare client docs for new infra

* Swap videoframe for youtube component

* Deploy typedoc output to netlify

* Install typedoc

* Use npm 7

* Remove self-closing p tags in watchQuery documentation

* Fix code blocks

* Move redirects into source dir

* Fix more links

* Make docs URL links into absolute paths

* Fix broken links

* Update docset title

* Add subscriptions link to sidebar

* Remove theme import

* Add algoliafilters

docs/shared/link-chain.mdx

@@ -1,4 +1,4 @@
-```js:title=index.js
+```js title="index.js"
 import { ApolloClient, InMemoryCache, HttpLink, from } from "@apollo/client";
 import { onError } from "@apollo/client/link/error";
 

docs/shared/mutation-options.mdx

@@ -62,7 +62,7 @@ Each key in the object corresponds to a variable name, and that key's value corr
 
 Specifies how the mutation handles a response that returns both GraphQL errors and partial results.
 
-For details, see [GraphQL error policies](https://www.apollographql.com/docs/react/data/error-handling/#graphql-error-policies).
+For details, see [GraphQL error policies](/react/data/error-handling/#graphql-error-policies).
 
 The default value is `none`, meaning that the mutation result includes error details but _not_ partial results.
 
@@ -229,7 +229,7 @@ By default, the instance that's passed down via context is used, but you can pro
 
 <td>
 
-If you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.
+If you're using [Apollo Link](/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.
 
 </td>
 </tr>
@@ -254,7 +254,7 @@ If you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/
 
 A function used to update the Apollo Client cache after the mutation completes.
 
-For more information, see [Updating the cache after a mutation](/data/mutations#updating-the-cache-after-a-mutation).
+For more information, see [Updating the cache after a mutation](/react/data/mutations#updating-the-cache-after-a-mutation).
 
 </td>
 </tr>
@@ -271,7 +271,7 @@ For more information, see [Updating the cache after a mutation](/data/mutations#
 
 If provided, Apollo Client caches this temporary (and potentially incorrect) response until the mutation completes, enabling more responsive UI updates.
 
-For more information, see [Optimistic mutation results](/performance/optimistic-ui/).
+For more information, see [Optimistic mutation results](/react/performance/optimistic-ui/).
 
 </td>
 </tr>
@@ -290,7 +290,7 @@ Provide `no-cache` if the mutation's result should _not_ be written to the Apoll
 
 The default value is `network-only` (which means the result _is_ written to the cache).
 
-Unlike queries, mutations _do not_ support [fetch policies](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy) besides `network-only` and `no-cache`.
+Unlike queries, mutations _do not_ support [fetch policies](/react/data/queries/#setting-a-fetch-policy) besides `network-only` and `no-cache`.
 
 </td>
 </tr>

docs/shared/mutation-result.mdx

@@ -86,7 +86,7 @@ If `true`, the mutation is currently in flight.
 
 If the mutation produces one or more errors, this object contains either an array of `graphQLErrors` or a single `networkError`. Otherwise, this value is `undefined`.
 
-For more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).
+For more information, see [Handling operation errors](/react/data/error-handling/).
 
 </td>
 </tr>

docs/shared/query-options.mdx

@@ -62,7 +62,7 @@ Each key in the object corresponds to a variable name, and that key's value corr
 
 Specifies how the query handles a response that returns both GraphQL errors and partial results.
 
-For details, see [GraphQL error policies](https://www.apollographql.com/docs/react/data/error-handling/#graphql-error-policies).
+For details, see [GraphQL error policies](/react/data/error-handling/#graphql-error-policies).
 
 The default value is `none`, meaning that the query result includes error details but _not_ partial results.
 
@@ -115,7 +115,7 @@ This function is passed an [`ApolloError`](https://github.com/apollographql/apol
 
 If `true`, the query is _not_ executed. **Not available with `useLazyQuery`.**
 
-This property is part of Apollo Client's React integration, and it is _not_ available in the [core `ApolloClient` API](https://www.apollographql.com/docs/react/api/core/ApolloClient/).
+This property is part of Apollo Client's React integration, and it is _not_ available in the [core `ApolloClient` API](/react/api/core/ApolloClient/).
 
 The default value is `false`.
 
@@ -132,7 +132,7 @@ The default value is `false`.
 
 <td>
 
-The name of your component to be displayed in the React Developer Tools. 
+The name of your component to be displayed in the React Developer Tools.
 
 The default value is `Query`.
 
@@ -191,7 +191,7 @@ The default value is `false`.
 
 <td>
 
-If you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.
+If you're using [Apollo Link](/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.
 
 </td>
 </tr>
@@ -206,7 +206,7 @@ If you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/
 
 <td>
 
-Pass `false` to skip executing the query during [server-side rendering](https://www.apollographql.com/docs/react/performance/server-side-rendering/).
+Pass `false` to skip executing the query during [server-side rendering](/react/performance/server-side-rendering/).
 
 </td>
 </tr>
@@ -248,7 +248,7 @@ By default, the instance that's passed down via context is used, but you can pro
 
 Specifies how the query interacts with the Apollo Client cache during execution (for example, whether it checks the cache for results before sending a request to the server).
 
-For details, see [Setting a fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy).
+For details, see [Setting a fetch policy](/react/data/queries/#setting-a-fetch-policy).
 
 The default value is `cache-first`.
 

docs/shared/query-result.mdx

@@ -64,7 +64,7 @@ This value is `undefined` if this is the query's first execution.
 
 If the query produces one or more errors, this object contains either an array of `graphQLErrors` or a single `networkError`. Otherwise, this value is `undefined`.
 
-For more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).
+For more information, see [Handling operation errors](/react/data/error-handling/).
 
 </td>
 </tr>
@@ -158,7 +158,7 @@ Can be useful for manually executing followup queries or writing data to the cac
 
 If `true`, the associated lazy query has been executed.
 
-This field is only present on the result object returned by [`useLazyQuery`](https://www.apollographql.com/docs/react/data/queries/#executing-queries-manually).
+This field is only present on the result object returned by [`useLazyQuery`](/react/data/queries/#executing-queries-manually).
 
 </td>
 </tr>
@@ -185,7 +185,7 @@ A function that enables you to re-execute the query, optionally passing in new `
 
 To guarantee that the refetch performs a network request, its `fetchPolicy` is set to `network-only` (unless the original query's `fetchPolicy` is `no-cache` or `cache-and-network`, which also guarantee a network request).
 
-See also [Refetching](https://www.apollographql.com/docs/react/data/queries/#refetching).
+See also [Refetching](/react/data/queries/#refetching).
 
 </td>
 </tr>
@@ -201,7 +201,7 @@ See also [Refetching](https://www.apollographql.com/docs/react/data/queries/#ref
 
 <td>
 
-A function that helps you fetch the next set of results for a [paginated list field](https://www.apollographql.com/docs/react/pagination/core-api/).
+A function that helps you fetch the next set of results for a [paginated list field](/react/pagination/core-api/).
 
 </td>
 </tr>
@@ -248,7 +248,7 @@ A function that instructs the query to stop polling after a previous call to `st
 
 <td>
 
-A function that enables you to execute a [subscription](https://www.apollographql.com/docs/react/data/subscriptions/), usually to subscribe to specific fields that were included in the query.
+A function that enables you to execute a [subscription](/react/data/subscriptions/), usually to subscribe to specific fields that were included in the query.
 
 This function returns _another_ function that you can call to terminate the subscription.
 

docs/shared/refetchQueries-options.mdx

@@ -55,7 +55,7 @@ Optional function that updates cached fields to trigger refetches of queries tha
 
 Optional array specifying queries to refetch. Each element can be either a query's string name or a `DocumentNode` object.
 
-Analogous to the [`options.refetchQueries`](https://www.apollographql.com/docs/react/data/mutations/#options) array for mutations.
+Analogous to the [`options.refetchQueries`](/react/data/mutations/#options) array for mutations.
 
 Pass `"active"` (or `"all"`) as a shorthand to refetch all (active) queries.
 

docs/shared/subscription-options.mdx

@@ -4,6 +4,6 @@
 | `variables` | { [key: string]: any } | An object containing all of the variables your subscription needs to execute |
 | `shouldResubscribe` | boolean | Determines if your subscription should be unsubscribed and subscribed again |
 | `onSubscriptionData` | (options: OnSubscriptionDataOptions<TData>) => any | Allows the registration of a callback function, that will be triggered each time the `useSubscription` Hook / `Subscription` component receives data. The callback `options` object param consists of the current Apollo Client instance in `client`, and the received subscription data in `subscriptionData`. |
-| `fetchPolicy` | FetchPolicy | How you want your component to interact with the Apollo cache. For details, see [Setting a fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy). |
+| `fetchPolicy` | FetchPolicy | How you want your component to interact with the Apollo cache. For details, see [Setting a fetch policy](/react/data/queries/#setting-a-fetch-policy). |
 | `context` | Record<string, any> | Shared context between your component and your network interface (Apollo Link). |
 | `client` | ApolloClient | An `ApolloClient` instance. By default `useSubscription` / `Subscription` uses the client passed down via context, but a different client can be passed in. |

docs/source/api/cache/InMemoryCache.mdx

@@ -1,6 +1,5 @@
 ---
 title: class InMemoryCache
-sidebar_title: InMemoryCache
 description: API reference
 api_reference: true
 ---
@@ -152,7 +151,7 @@ The default value is `false`.
 
 ### Signature
 
-```ts:title=src/cache/core/cache.ts
+```ts title="src/cache/core/cache.ts"
 readQuery<QueryType, TVariables = any>(
   options: DataProxy.Query<TVariables>,
   optimistic: boolean = false,
@@ -299,7 +298,7 @@ The default value is `false`.
 
 ### Signature
 
-```ts:title=src/cache/core/cache.ts
+```ts title="src/cache/core/cache.ts"
 writeQuery<TData = any, TVariables = any>(
   options: Cache.WriteQueryOptions<TData, TVariables>,
 ): Reference | undefined
@@ -436,7 +435,7 @@ The returned value is automatically passed to [`writeQuery`](#writequery), which
 
 ### Signature
 
-```ts:title=src/cache/core/cache.ts
+```ts title="src/cache/core/cache.ts"
 public updateQuery<TData = any, TVariables = any>(
   options: Cache.UpdateQueryOptions<TData, TVariables>,
   update: (data: TData | null) => TData | null | void,
@@ -599,7 +598,7 @@ The default value is `false`.
 
 ### Signature
 
-```ts:title=src/cache/core/cache.ts
+```ts title="src/cache/core/cache.ts"
 readFragment<FragmentType, TVariables = any>(
   options: DataProxy.Fragment<TVariables>,
   optimistic: boolean = false,
@@ -752,7 +751,7 @@ The default value is `false`.
 
 ### Signature
 
-```ts:title=src/cache/core/cache.ts
+```ts title="src/cache/core/cache.ts"
 writeFragment<TData = any, TVariables = any>(
   options: Cache.WriteFragmentOptions<TData, TVariables>,
 ): Reference | undefined
@@ -895,7 +894,7 @@ The returned value is automatically passed to [`writeFragment`](#writefragment),
 
 ### Signature
 
-```ts:title=src/cache/core/cache.ts
+```ts title="src/cache/core/cache.ts"
 public updateFragment<TData = any, TVariables = any>(
   options: Cache.UpdateFragmentOptions<TData, TVariables>,
   update: (data: TData | null) => TData | null | void,
@@ -942,7 +941,7 @@ Accepts the following parameters:
 
 ### Signature
 
-```ts:title=src/cache/inmemory/inMemoryCache.ts
+```ts title="src/cache/inmemory/inMemoryCache.ts"
 identify(object: StoreObject | Reference): string | undefined
 ```
 
@@ -1139,7 +1138,7 @@ A sentinel object that you can return from a modifier function to indicate that
 
 ### Signature
 
-```ts:title=src/cache/inmemory/inMemoryCache.ts
+```ts title="src/cache/inmemory/inMemoryCache.ts"
 modify(options: Cache.ModifyOptions): boolean
 ```
 
@@ -1157,7 +1156,7 @@ For usage instructions, see [`cache.gc`](../../caching/garbage-collection/#cache
 
 ### Signature
 
-```ts:title=src/cache/inmemory/inMemoryCache.ts
+```ts title="src/cache/inmemory/inMemoryCache.ts"
 gc()
 ```
 
@@ -1254,7 +1253,7 @@ The default value is `true`.
 
 ### Signature
 
-```ts:title=src/cache/inmemory/inMemoryCache.ts
+```ts title="src/cache/inmemory/inMemoryCache.ts"
 evict(options: Cache.EvictOptions): boolean
 ```
 
@@ -1294,7 +1293,7 @@ The default value is `false`.
 
 ### Signature
 
-```ts:title=src/cache/inmemory/inMemoryCache.ts
+```ts title="src/cache/inmemory/inMemoryCache.ts"
 extract(optimistic: boolean = false): NormalizedCacheObject
 ```
 
@@ -1334,7 +1333,7 @@ Accepts the following parameters:
 
 ### Signature
 
-```ts:title=src/cache/inmemory/inMemoryCache.ts
+```ts title="src/cache/inmemory/inMemoryCache.ts"
 restore(data: NormalizedCacheObject): this
 ```
 
@@ -1380,6 +1379,6 @@ The reactive variable's initial value.
 
 ### Signature
 
-```ts:title=src/cache/inmemory/inMemoryCache.ts
+```ts title="src/cache/inmemory/inMemoryCache.ts"
 makeVar<T>(value: T): ReactiveVar<T>
 ```

docs/source/api/core/ApolloClient.mdx

@@ -1,13 +1,10 @@
 ---
 title: class ApolloClient
 description: API reference
-sidebar_title: ApolloClient
 order: 11
 api_reference: true
 ---
 
-import { TypescriptApiBox } from 'gatsby-theme-apollo-docs';
-
 The `ApolloClient` class encapsulates Apollo's core client-side API. It backs all available view-layer integrations (React, iOS, and so on).
 
 ## The `ApolloClient` constructor
@@ -63,7 +60,7 @@ const client = new ApolloClient({
 </td>
 <td>
 
-The URI of the GraphQL endpoint that Apollo Client will communicate with. 
+The URI of the GraphQL endpoint that Apollo Client will communicate with.
 
 One of `uri` or `link` is **required**. If you provide both, `link` takes precedence.
 </td>
@@ -111,7 +108,7 @@ For more information, see [Configuring the cache](../../caching/cache-configurat
 </td>
 <td>
 
-A custom name (e.g., `iOS`) that identifies this particular client among your set of clients. Apollo Server and Apollo Studio use this property as part of the [client awareness](https://www.apollographql.com/docs/apollo-server/monitoring/metrics/#identifying-distinct-clients) feature.
+A custom name (e.g., `iOS`) that identifies this particular client among your set of clients. Apollo Server and Apollo Studio use this property as part of the [client awareness](/apollo-server/monitoring/metrics/#identifying-distinct-clients) feature.
 </td>
 </tr>
 
@@ -125,7 +122,7 @@ A custom name (e.g., `iOS`) that identifies this particular client among your se
 </td>
 <td>
 
-A custom version that identifies the current version of this particular client (e.g., `1.2`). Apollo Server and Apollo Studio use this property as part of the [client awareness](https://www.apollographql.com/docs/apollo-server/monitoring/metrics/#identifying-distinct-clients) feature.
+A custom version that identifies the current version of this particular client (e.g., `1.2`). Apollo Server and Apollo Studio use this property as part of the [client awareness](/apollo-server/monitoring/metrics/#identifying-distinct-clients) feature.
 
 This is **not** the version of Apollo Client that you are using, but rather any version string that helps you differentiate between versions of your client.
 </td>

docs/source/api/core/ObservableQuery.mdx

@@ -3,8 +3,6 @@ title: ObservableQuery
 description: API reference
 ---
 
-import { TypescriptApiBox } from 'gatsby-theme-apollo-docs';
-
 ## `ObservableQuery` functions
 
 `ApolloClient` Observables extend the Observables implementation provided by [`zen-observable`](https://github.com/zenparsing/zen-observable). Refer to the `zen-observable` documentation for additional context and API options.

docs/source/api/link/apollo-link-batch-http.mdx

@@ -1,6 +1,5 @@
 ---
 title: Batch HTTP Link
-sidebar_title: HTTP Batch
 description: Batch multiple operations into a single HTTP request
 ---
 
@@ -11,7 +10,7 @@ The `BatchHttpLink` is a terminating link that batches an array of individual Gr
 ```js
 import { BatchHttpLink } from "@apollo/client/link/batch-http";
 
-const link = new BatchHttpLink({ 
+const link = new BatchHttpLink({
   uri: "http://localhost:4000/graphql",
   batchMax: 5, // No more than 5 operations per batch
   batchInterval: 20 // Wait no more than 20ms after first batched operation
@@ -233,7 +232,7 @@ The context `http` object currently supports two keys:
 * `includeExtensions`: Send the extensions object for this request.
 * `includeQuery`: Don't send the `query` field for this request.
 
-One way to use persisted queries is with [apollo-link-persisted-queries](https://github.com/apollographql/apollo-link-persisted-queries) and [Apollo Server](https://www.apollographql.com/docs/apollo-server/performance/apq/).
+One way to use persisted queries is with [apollo-link-persisted-queries](https://github.com/apollographql/apollo-link-persisted-queries) and [Apollo Server](/apollo-server/performance/apq/).
 
 ## Custom fetching
 

docs/source/api/link/apollo-link-context.md

@@ -1,6 +1,5 @@
 ---
 title: Context Link
-sidebar_title: Context
 description: Easily set a context on your operation, which is used by other links further down the chain.
 ---
 

docs/source/api/link/apollo-link-error.md

@@ -1,6 +1,5 @@
 ---
 title: Error Link
-sidebar_title: Error
 description: Handle and inspect errors in your GraphQL network stack.
 ---
 

docs/source/api/link/apollo-link-http.md

@@ -1,6 +1,5 @@
 ---
 title: HTTP Link
-sidebar_title: HTTP
 description: Get GraphQL results over a network using HTTP fetch.
 ---