Merge pull request #12095 from apollographql/main-docs-replatform

docs: merge new docs branch into main

docs/source/api/link/apollo-link-remove-typename.mdx

@@ -6,7 +6,7 @@ minVersion: 3.8.0
 
 ## Overview
 
-When reusing data from a query as an argument to another GraphQL operation, `__typename` fields can cause errors. To avoid this, you can use the `removeTypenameFromVariables` link to automatically remove `__typename` fields from variables in operations. 
+When reusing data from a query as an argument to another GraphQL operation, `__typename` fields can cause errors. To avoid this, you can use the `removeTypenameFromVariables` link to automatically remove `__typename` fields from variables in operations.
 
 ## Remove `__typename` from all variables
 
@@ -78,8 +78,8 @@ const client = new ApolloClient({
 });
 ```
 
-If you're using [directional composition](./link/introduction#directional-composition), 
-for example, to [send a subscription to a websocket connection](../data/subscriptions#3-split-communication-by-operation-recommended),
+If you're using [directional composition](/react/api/link/introduction#directional-composition),
+for example, to [send a subscription to a websocket connection](/react/data/subscriptions#3-split-communication-by-operation-recommended),
 place `removeTypenameLink` before `splitLink` to remove `__typename` from variables for all operations.
 
 ```ts

docs/source/api/link/persisted-queries.mdx

@@ -32,7 +32,7 @@ Using persisted queries for safelisting has the following requirements:
 - The [`@apollo/generate-persisted-query-manifest` package](https://www.npmjs.com/package/@apollo/generate-persisted-query-manifest)
 - The [`@apollo/persisted-query-lists` package](https://www.npmjs.com/package/@apollo/persisted-query-lists)
 - [GraphOS Router](/router) (v1.25.0+)
-- [GraphOS Enterprise plan](/graphos/enterprise/)
+- [GraphOS Enterprise plan](https://www.apollographql.com/pricing)
 
 You can use APQ with the following versions of Apollo Client Web, Apollo Server, and Apollo Router Core:
 - Apollo Client Web (v3.2.0+)

docs/source/api/react/components.mdx

@@ -61,5 +61,3 @@ The Subscription component accepts the following props. Only `subscription` is *
 ### Render prop function
 
 <PropertySignatureTable canonicalReference="@apollo/client!SubscriptionResult:interface" idPrefix="subscriptionresult-interface" />
-
-<SubscriptionResult3 />

docs/source/api/react/hooks.mdx

@@ -21,7 +21,6 @@ import UseSuspenseQueryResult from '../../../shared/useSuspenseQuery-result.mdx'
 import UseBackgroundQueryResult from '../../../shared/useBackgroundQuery-result.mdx';
 import UseReadQueryResult from '../../../shared/useReadQuery-result.mdx';
 import { FunctionDetails, PropertySignatureTable, ManualTuple, InterfaceDetails } from '../../../shared/ApiDoc';
-import { UseLoadableQueryResult } from '../../../shared/Overrides/UseLoadableQueryResult'
 
 ## The `ApolloProvider` component
 
@@ -73,85 +72,77 @@ function WithApolloClient() {
 
 <FunctionDetails canonicalReference="@apollo/client!useQuery:function(1)" headingLevel={2} />
 
-<FunctionDetails canonicalReference="@apollo/client!useLazyQuery:function(1)" headingLevel={2}
-result={<div>
-<pre><code class="language-ts">
-[execute: LazyQueryExecFunction&lt;TData, TVariables&gt;, result: QueryResult&lt;TData, TVariables&gt;]
-</code></pre>
-
-A tuple of two values:
-
-<ManualTuple idPrefix="uselazyquery-result" elements={[
-  {
-    name: "execute",
-    type: "(options?: LazyQueryHookOptions<TVariables>) => Promise<LazyQueryResult<TData, TVariables>>",
-    description: "Function that can be triggered to execute the suspended query. After being called, `useLazyQuery` behaves just like `useQuery`. The `useLazyQuery` function returns a promise that fulfills with a query result when the query succeeds or fails."
-  },
-  {
-    name: "result",
-    type: "QueryResult<TData, TVariables>",
-    description: "The result of the query. See the `useQuery` hook for more details.",
-    canonicalReference: "@apollo/client!QueryResult:interface"
-  }
-]}/>
-</div>}
-/>
+<FunctionDetails canonicalReference="@apollo/client!useLazyQuery:function(1)" headingLevel={2}>
+  ```ts
+  [execute: LazyQueryExecFunction<TData, TVariables>, result: QueryResult<TData, TVariables>]
+  ```
+
+  A tuple of two values:
+
+  <ManualTuple>
+    <ManualTupleItem
+      name="execute"
+      type="(options?: LazyQueryHookOptions<TVariables>) => Promise<LazyQueryResult<TData, TVariables>>"
+    >
+      Function that can be triggered to execute the suspended query. After being called, `useLazyQuery` behaves just like `useQuery`. The `useLazyQuery` function returns a promise that fulfills with a query result when the query succeeds or fails.
+    </ManualTupleItem>
+    <ManualTupleItem
+      name="result"
+      type="QueryResult<TData, TVariables>"
+      canonicalReference="@apollo/client!QueryResult:interface"
+    >
+      The result of the query. See the `useQuery` hook for more details.
+    </ManualTupleItem>
+  </ManualTuple>
+</FunctionDetails>
 
 <FunctionDetails
   canonicalReference="@apollo/client!useMutation:function(1)"
   headingLevel={2}
-  result={
-    <div>
-      <pre>
-        <code class="language-ts">
-        {`[
-  mutate: (options?: MutationFunctionOptions<TData, TVariables>) => Promise<FetchResult<TData>>,
-  result: MutationResult<TData>
-]`}
-        </code>
-      </pre>
-      A tuple of two values:
-      <ManualTuple
-        idPrefix="usemutation-result"
-        elements={[
-          {
-            name: "mutate",
-            type: `(
-    options?: MutationFunctionOptions<TData, TVariables>
-  ) => Promise<FetchResult<TData>>`,
-            description: <div>
-A function to trigger the mutation from your UI. You can optionally pass this function any of the following options:
-
-<ul>
-<li><code>awaitRefetchQueries</code></li>
-<li><code>context</code></li>
-<li><code>fetchPolicy</code></li>
-<li><code>onCompleted</code></li>
-<li><code>onError</code></li>
-<li><code>optimisticResponse</code></li>
-<li><code>refetchQueries</code></li>
-<li><code>onQueryUpdated</code></li>
-<li><code>update</code></li>
-<li><code>variables</code></li>
-<li><code>client</code></li>
-</ul>
-
-Any option you pass here overrides any existing value for that option that you passed to <code>useMutation</code>.
-
-The mutate function returns a promise that fulfills with your mutation result.
-</div>,
-          },
-          {
-            name: "result",
-            type: "MutationResult<TData>",
-            description: "The result of the mutation.",
-            canonicalReference: "@apollo/client!MutationResult:interface",
-          },
-        ]}
-      />
-    </div>
-  }
-/>
+>
+  ```ts
+  [
+    mutate: (options?: MutationFunctionOptions<TData, TVariables>) => Promise<FetchResult<TData>>,
+    result: MutationResult<TData>
+  ]
+  ```
+  A tuple of two values:
+  <ManualTuple>
+    <ManualTupleItem
+      name="mutate"
+      type={`(
+        options?: MutationFunctionOptions<TData, TVariables>
+      ) => Promise<FetchResult<TData>>`}
+      idPrefix="usemutation-result"
+    >
+      A function to trigger the mutation from your UI. You can optionally pass this function any of the following options:
+
+      - `awaitRefetchQueries`
+      - `context`
+      - `fetchPolicy`
+      - `onCompleted`
+      - `onError`
+      - `optimisticResponse`
+      - `refetchQueries`
+      - `onQueryUpdated`
+      - `update`
+      - `variables`
+      - `client`
+
+      Any option you pass here overrides any existing value for that option that you passed to `useMutation`.
+
+      The mutate function returns a promise that fulfills with your mutation result.
+    </ManualTupleItem>
+    <ManualTupleItem
+      name="result"
+      type="MutationResult<TData>"
+      canonicalReference="@apollo/client!MutationResult:interface"
+      idPrefix="usemutation-result"
+    >
+      The result of the mutation.
+    </ManualTupleItem>
+  </ManualTuple>
+</FunctionDetails>
 
 <FunctionDetails canonicalReference="@apollo/client!useSubscription:function(1)" headingLevel={2} />
 
@@ -411,8 +402,45 @@ function useReadQuery<TData>(
 <FunctionDetails
   canonicalReference="@apollo/client!useLoadableQuery:function(5)"
   headingLevel={2}
-  result={<UseLoadableQueryResult />}
-/>
+>
+  ```ts
+  [
+    loadQuery: LoadQueryFunction<TVariables>,
+    queryRef: QueryRef<TData, TVariables> | null,
+    {
+      fetchMore: FetchMoreFunction<TData, TVariables>;
+      refetch: RefetchFunction<TData, TVariables>;
+      reset: ResetFunction;
+    }
+  ]
+  ```
+
+  A tuple of three values:
+  <ManualTuple>
+    <ManualTupleItem
+      idPrefix="useloadablequery-result"
+      name="loadQuery"
+      type="LoadQueryFunction<TVariables>"
+    >
+      A function used to imperatively load a query. Calling this function will create or update the `queryRef` returned by `useLoadableQuery`, which should be passed to `useReadQuery`.
+    </ManualTupleItem>
+    <ManualTupleItem
+      idPrefix="useloadablequery-result"
+      name="queryRef"
+      type="QueryRef<TData, TVariables> | null"
+      canonicalReference="@apollo/client!QueryRef:interface"
+    >
+      The `queryRef` used by `useReadQuery` to read the query result.
+    </ManualTupleItem>
+    <ManualTupleItem
+      idPrefix="useloadablequery-result"
+      name="handlers"
+      type="{ fetchMore: FetchMoreFunction<TData, TVariables>; refetch: RefetchFunction<TData, TVariables>; reset: ResetFunction; }"
+    >
+      Additional handlers used for the query, such as `refetch`.
+    </ManualTupleItem>
+  </ManualTuple>
+</FunctionDetails>
 
 <FunctionDetails canonicalReference="@apollo/client!useQueryRefHandlers:function(1)" headingLevel={2} />
 

docs/source/caching/cache-configuration.mdx

@@ -198,7 +198,7 @@ This example shows a variety of `typePolicies` with different `keyFields`:
 
 If an object has multiple `keyFields`, the cache ID always lists those fields in the same order to ensure uniqueness.
 
-Note that these `keyFields` strings always refer to the canonical field names defined in the schema. This means that ID computation is _not_ sensitive to [field aliases](/resources/graphql-glossary/#alias).
+Note that these `keyFields` strings always refer to the canonical field names defined in the schema. This means that ID computation is _not_ sensitive to field aliases.
 
 ### Calculating an object's cache ID
 

docs/source/data/operation-best-practices.mdx

@@ -32,7 +32,7 @@ You should define a name for _every_ GraphQL operation in your application. Doin
 * You clarify the purpose of each operation for both yourself and your teammates.
 * You avoid unexpected errors when combining multiple operations in a single query document (an anonymous operation can only appear alone).
 * You improve debugging output in both client _and_ server code, helping you identify exactly which operation is causing issues.
-* [Apollo Studio](/studio/) provides helpful operation-level metrics, which require named operations.
+* [Apollo GraphOS Studio](/graphos/graphs/studio-features) provides helpful operation-level metrics, which require named operations.
 
 ## Use GraphQL variables to provide arguments
 
@@ -94,7 +94,7 @@ The server-side cache also powers features like [automatic persisted queries](/a
 
 The value of a GraphQL argument might include sensitive information, such as an access token or a user's personal info. If this information is included in a query string, it's cached with the rest of that query string.
 
-Variable values are _not_ included in query strings. You can also specify _which_ variable values (if any) are [included in metrics reporting](/apollo-server/api/plugin/usage-reporting/#sendvariablevalues) to Apollo Studio.
+Variable values are _not_ included in query strings. You can also specify _which_ variable values (if any) are [included in metrics reporting](/apollo-server/api/plugin/usage-reporting/#sendvariablevalues) to Studio.
 
 ## Query only the data you need, where you need it
 
@@ -193,7 +193,7 @@ To improve the performance of your [server-side response cache](/apollo-server/p
 
 ## Set your app's `name` and `version` for metrics reporting (paid)
 
-> This recommendation is _most_ pertinent to Apollo Studio organizations with a [paid plan](https://www.apollographql.com/pricing/), however it can be helpful for all apps.
+> This recommendation is _most_ pertinent to Studio organizations with a [paid plan](https://www.apollographql.com/pricing/), however it can be helpful for all apps.
 
 The constructor of `ApolloClient` accepts the `name` and `version` options:
 
@@ -208,4 +208,4 @@ const client = new ApolloClient({
 
 If you specify these values, Apollo Client automatically adds them to each operation request as HTTP headers (`apollographql-client-name` and `apollographql-client-version`).
 
-Then if you've configured [metrics reporting in Apollo Studio](/graphos/metrics/usage-reporting/), Apollo Server includes your app's `name` and `version` in the operation traces it reports to Studio. This enables you to [segment metrics by client](/graphos/metrics/client-awareness/).
+Then if you've configured metrics reporting in Studio, Apollo Server includes your app's `name` and `version` in the operation traces it reports to Studio. This enables you to [segment metrics by client](/graphos/metrics/client-awareness/).

docs/source/index.mdx

@@ -9,7 +9,7 @@ Apollo Client helps you structure code in an economical, predictable, and declar
 <p>
   <ButtonLink
     size="lg"
-    href="./get-started/"
+    href="/react/get-started/"
     colorScheme="navy"
   >
     Get started!
@@ -44,29 +44,29 @@ Apollo Client also supports `@defer` and GraphQL subscription implementations ou
 
 ## Recommended docs
 
-After you [get started](./get-started/), check out the full Apollo Client documentation in the navigation on the left.
+After you [get started](/react/get-started/), check out the full Apollo Client documentation in the navigation on the left.
 
 We recommend the following articles in particular:
 
-* **[Queries](./data/queries/) and [Mutations](./data/mutations/)**. These are the read and write operations of GraphQL.
-* [**Caching overview**](./caching/overview/). Apollo Client's normalized cache enables you to skip network requests entirely when data is already available locally.
-* [**Managing local state**](./local-state/local-state-management/). Apollo Client provides APIs for managing both remote and local data, enabling you to consolidate all of your application's state.
-* [**Basic HTTP networking**](./networking/basic-http-networking/). Learn how to send custom headers and other authentication metadata in your queries.
-* [**Testing React components**](./development-testing/testing/). Test your GraphQL operations without requiring a connection to a server.
+* **[Queries](/react/data/queries/) and [Mutations](/react/data/mutations/)**. These are the read and write operations of GraphQL.
+* [**Caching overview**](/react/caching/overview/). Apollo Client's normalized cache enables you to skip network requests entirely when data is already available locally.
+* [**Managing local state**](/react/local-state/local-state-management/). Apollo Client provides APIs for managing both remote and local data, enabling you to consolidate all of your application's state.
+* [**Basic HTTP networking**](/react/networking/basic-http-networking/). Learn how to send custom headers and other authentication metadata in your queries.
+* [**Testing React components**](/react/development-testing/testing/). Test your GraphQL operations without requiring a connection to a server.
 
 ## Community integrations
 
 This documentation set focuses on React, but Apollo Client supports many other libraries and languages:
 
 - JavaScript
-  - [Angular](integrations/integrations/#angular)
-  - [Vue](integrations/integrations/#vue)
-  - [Svelte](integrations/integrations/#svelte)
-  - [Solid.js](integrations/integrations/#solidjs)
-  - [Ember](integrations/integrations/#ember)
+  - [Angular](/react/integrations/integrations/#angular)
+  - [Vue](/react/integrations/integrations/#vue)
+  - [Svelte](/react/integrations/integrations/#svelte)
+  - [Solid.js](/react/integrations/integrations/#solidjs)
+  - [Ember](/react/integrations/integrations/#ember)
   - [Meteor](https://www.meteor.com) (thanks to [DDP-Apollo](https://github.com/Swydo/ddp-apollo))
 - Web Components
-  - [Apollo Elements](integrations/integrations/#web-components)
+  - [Apollo Elements](/react/integrations/integrations/#web-components)
 - Native mobile
   - [Native iOS with Swift](/ios)
   - [Native Android with Java and Kotlin](/kotlin)