split hooks up into individual api pages

Author: phryneas

docs/source/_sidebar.yaml

@@ -135,11 +135,39 @@ items:
             href: ./api/core/ObservableQuery
       - label: React
         children:
-          - label: Hooks
-            href: ./api/react/hooks
-          - label: Preloading
+          - label: ApolloProvider
+            href: ./api/react/ApolloProvider
+          - label: ApolloConsumer
+            href: ./api/react/ApolloConsumer
+          - label: useQuery
+            href: ./api/react/useQuery
+          - label: useLazyQuery
+            href: ./api/react/useLazyQuery
+          - label: useMutation
+            href: ./api/react/useMutation
+          - label: useSubscription
+            href: ./api/react/useSubscription
+          - label: useFragment
+            href: ./api/react/useFragment
+          - label: useApolloClient
+            href: ./api/react/useApolloClient
+          - label: useReactiveVar
+            href: ./api/react/useReactiveVar
+          - label: useSuspenseQuery
+            href: ./api/react/useSuspenseQuery
+          - label: useBackgroundQuery
+            href: ./api/react/useBackgroundQuery
+          - label: useReadQuery
+            href: ./api/react/useReadQuery
+          - label: useLoadableQuery
+            href: ./api/react/useLoadableQuery
+          - label: useQueryRefHandlers
+            href: ./api/react/useQueryRefHandlers
+          - label: skipToken
+            href: ./api/react/skipToken
+          - label: createQueryPreloader
             href: ./api/react/preloading
-          - label: Testing
+          - label: MockProvider
             href: ./api/react/testing
           - label: SSR
             href: ./api/react/ssr

docs/source/api/cache/InMemoryCache.mdx

@@ -1,7 +1,6 @@
 ---
 title: class InMemoryCache
 description: API reference
-api_reference: true
 ---
 
 {/** @import {MDXProvidedComponents} from '../../../shared/MdxProvidedComponents.js' */}

docs/source/api/core/ApolloClient.mdx

@@ -2,7 +2,6 @@
 title: class ApolloClient
 description: API reference
 order: 11
-api_reference: true
 ---
 
 {/** @import {MDXProvidedComponents} from '../../../shared/MdxProvidedComponents.js' */}

docs/source/api/core/ObservableQuery.mdx

@@ -1,7 +1,6 @@
 ---
 title: ObservableQuery
 description: API reference
-api_reference: true
 ---
 
 {/** @import {MDXProvidedComponents} from '../../../shared/MdxProvidedComponents.js' */}

docs/source/api/link/apollo-link-subscriptions.mdx

@@ -1,7 +1,6 @@
 ---
 title: Subscriptions Link
 description: Execute subscriptions (or other operations) over WebSocket with the graphql-ws library
-api_reference: true
 ---
 
 > We recommend reading [Apollo Link overview](./introduction/) before learning about individual links.

docs/source/api/link/apollo-link-ws.mdx

@@ -1,7 +1,6 @@
 ---
 title: WebSocket Link
 description: Execute subscriptions (or other operations) over WebSocket with the subscriptions-transport-ws library
-api_reference: true
 ---
 
 > ⚠️ **We no longer recommend using `WebSocketLink` or the `subscriptions-transport-ws` library**, because the library is not actively maintained. To execute subscriptions, We instead recommend using the newer `graphql-ws` library with the accompanying [`GraphQLWsLink`](./apollo-link-subscriptions).

docs/source/api/react/ApolloConsumer.mdx

@@ -0,0 +1,23 @@
+---
+title: ApolloConsumer
+description: Apollo Client API reference
+---
+
+
+## The `ApolloConsumer` component
+
+One way to access the configured Apollo Client instance directly is to create an `ApolloConsumer` component and provide a render prop function as its child. The render prop function will be called with your `ApolloClient` instance as its only argument. You can think of the `ApolloConsumer` component as similar to the `Consumer` component from the [React Context API](https://react.dev/reference/react/useContext).
+
+### Example
+
+```jsx
+import { ApolloConsumer } from '@apollo/client/react';
+
+function WithApolloClient() {
+  return (
+    <ApolloConsumer>
+      {client => 'We have access to the client!' /* do stuff here */}
+    </ApolloConsumer>
+  );
+}
+```

docs/source/api/react/ApolloProvider.mdx

@@ -0,0 +1,38 @@
+---
+title: ApolloProvider
+description: Apollo Client API reference
+---
+
+{/** @import {MDXProvidedComponents} from '../../../shared/MdxProvidedComponents.js' */}
+
+## The `ApolloProvider` component
+
+The `ApolloProvider` component leverages [React's Context API](https://react.dev/reference/react/useContext) to make a configured Apollo Client instance available throughout a React component tree. This component can be imported directly from the `@apollo/client/react` package.
+
+```js
+import { ApolloProvider } from '@apollo/client/react';
+```
+
+### Props
+
+| Option   | Type                       | Description                 |
+| -------- | -------------------------- | --------------------------- |
+| `client` | `ApolloClient` | An `ApolloClient` instance. |
+
+### Example
+
+```jsx {7-9}
+const client = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: new HttpLink({
+    uri: "http://localhost:4000/graphql",
+  })
+});
+
+ReactDOM.render(
+  <ApolloProvider client={client}>
+    <MyRootComponent />
+  </ApolloProvider>,
+  document.getElementById('root'),
+);
+```