Skip to content

Commit 5b3a6cf

Browse files
MeschreiberMeschreiber
authored
Merge pull request #12095 from apollographql/main-docs-replatform
docs: merge new docs branch into main
2 parents 8047181 + 491e2f9 commit 5b3a6cf

File tree

11 files changed

+147
-176
lines changed

11 files changed

+147
-176
lines changed

‎.github/workflows/docs-publish.yml

Lines changed: 0 additions & 19 deletions
This file was deleted.

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ minVersion: 3.8.0
66

77
## Overview
88

9-
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.
9+
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.
1010

1111
## Remove `__typename` from all variables
1212

@@ -78,8 +78,8 @@ const client = new ApolloClient({
7878
});
7979
```
8080

81-
If you're using [directional composition](./link/introduction#directional-composition),
82-
for example, to [send a subscription to a websocket connection](../data/subscriptions#3-split-communication-by-operation-recommended),
81+
If you're using [directional composition](/react/api/link/introduction#directional-composition),
82+
for example, to [send a subscription to a websocket connection](/react/data/subscriptions#3-split-communication-by-operation-recommended),
8383
place `removeTypenameLink` before `splitLink` to remove `__typename` from variables for all operations.
8484

8585
```ts

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ Using persisted queries for safelisting has the following requirements:
3232
- The [`@apollo/generate-persisted-query-manifest` package](https://www.npmjs.com/package/@apollo/generate-persisted-query-manifest)
3333
- The [`@apollo/persisted-query-lists` package](https://www.npmjs.com/package/@apollo/persisted-query-lists)
3434
- [GraphOS Router](/router) (v1.25.0+)
35-
- [GraphOS Enterprise plan](/graphos/enterprise/)
35+
- [GraphOS Enterprise plan](https://www.apollographql.com/pricing)
3636

3737
You can use APQ with the following versions of Apollo Client Web, Apollo Server, and Apollo Router Core:
3838
- Apollo Client Web (v3.2.0+)

‎docs/source/api/react/components.mdx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,5 +61,3 @@ The Subscription component accepts the following props. Only `subscription` is *
6161
### Render prop function
6262

6363
<PropertySignatureTable canonicalReference="@apollo/client!SubscriptionResult:interface" idPrefix="subscriptionresult-interface" />
64-
65-
<SubscriptionResult3 />

‎docs/source/api/react/hooks.mdx

Lines changed: 106 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import UseSuspenseQueryResult from '../../../shared/useSuspenseQuery-result.mdx'
2121
import UseBackgroundQueryResult from '../../../shared/useBackgroundQuery-result.mdx';
2222
import UseReadQueryResult from '../../../shared/useReadQuery-result.mdx';
2323
import { FunctionDetails, PropertySignatureTable, ManualTuple, InterfaceDetails } from '../../../shared/ApiDoc';
24-
import { UseLoadableQueryResult } from '../../../shared/Overrides/UseLoadableQueryResult'
2524

2625
## The `ApolloProvider` component
2726

@@ -73,85 +72,77 @@ function WithApolloClient() {
7372

7473
<FunctionDetails canonicalReference="@apollo/client!useQuery:function(1)" headingLevel={2} />
7574

76-
<FunctionDetails canonicalReference="@apollo/client!useLazyQuery:function(1)" headingLevel={2}
77-
result={<div>
78-
<pre><code class="language-ts">
79-
[execute: LazyQueryExecFunction&lt;TData, TVariables&gt;, result: QueryResult&lt;TData, TVariables&gt;]
80-
</code></pre>
81-
82-
A tuple of two values:
83-
84-
<ManualTuple idPrefix="uselazyquery-result" elements={[
85-
{
86-
name: "execute",
87-
type: "(options?: LazyQueryHookOptions<TVariables>) => Promise<LazyQueryResult<TData, TVariables>>",
88-
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."
89-
},
90-
{
91-
name: "result",
92-
type: "QueryResult<TData, TVariables>",
93-
description: "The result of the query. See the `useQuery` hook for more details.",
94-
canonicalReference: "@apollo/client!QueryResult:interface"
95-
}
96-
]}/>
97-
</div>}
98-
/>
75+
<FunctionDetails canonicalReference="@apollo/client!useLazyQuery:function(1)" headingLevel={2}>
76+
```ts
77+
[execute: LazyQueryExecFunction<TData, TVariables>, result: QueryResult<TData, TVariables>]
78+
```
79+
80+
A tuple of two values:
81+
82+
<ManualTuple>
83+
<ManualTupleItem
84+
name="execute"
85+
type="(options?: LazyQueryHookOptions<TVariables>) => Promise<LazyQueryResult<TData, TVariables>>"
86+
>
87+
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.
88+
</ManualTupleItem>
89+
<ManualTupleItem
90+
name="result"
91+
type="QueryResult<TData, TVariables>"
92+
canonicalReference="@apollo/client!QueryResult:interface"
93+
>
94+
The result of the query. See the `useQuery` hook for more details.
95+
</ManualTupleItem>
96+
</ManualTuple>
97+
</FunctionDetails>
9998

10099
<FunctionDetails
101100
canonicalReference="@apollo/client!useMutation:function(1)"
102101
headingLevel={2}
103-
result={
104-
<div>
105-
<pre>
106-
<code class="language-ts">
107-
{`[
108-
mutate: (options?: MutationFunctionOptions<TData, TVariables>) => Promise<FetchResult<TData>>,
109-
result: MutationResult<TData>
110-
]`}
111-
</code>
112-
</pre>
113-
A tuple of two values:
114-
<ManualTuple
115-
idPrefix="usemutation-result"
116-
elements={[
117-
{
118-
name: "mutate",
119-
type: `(
120-
options?: MutationFunctionOptions<TData, TVariables>
121-
) => Promise<FetchResult<TData>>`,
122-
description: <div>
123-
A function to trigger the mutation from your UI. You can optionally pass this function any of the following options:
124-
125-
<ul>
126-
<li><code>awaitRefetchQueries</code></li>
127-
<li><code>context</code></li>
128-
<li><code>fetchPolicy</code></li>
129-
<li><code>onCompleted</code></li>
130-
<li><code>onError</code></li>
131-
<li><code>optimisticResponse</code></li>
132-
<li><code>refetchQueries</code></li>
133-
<li><code>onQueryUpdated</code></li>
134-
<li><code>update</code></li>
135-
<li><code>variables</code></li>
136-
<li><code>client</code></li>
137-
</ul>
138-
139-
Any option you pass here overrides any existing value for that option that you passed to <code>useMutation</code>.
140-
141-
The mutate function returns a promise that fulfills with your mutation result.
142-
</div>,
143-
},
144-
{
145-
name: "result",
146-
type: "MutationResult<TData>",
147-
description: "The result of the mutation.",
148-
canonicalReference: "@apollo/client!MutationResult:interface",
149-
},
150-
]}
151-
/>
152-
</div>
153-
}
154-
/>
102+
>
103+
```ts
104+
[
105+
mutate: (options?: MutationFunctionOptions<TData, TVariables>) => Promise<FetchResult<TData>>,
106+
result: MutationResult<TData>
107+
]
108+
```
109+
A tuple of two values:
110+
<ManualTuple>
111+
<ManualTupleItem
112+
name="mutate"
113+
type={`(
114+
options?: MutationFunctionOptions<TData, TVariables>
115+
) => Promise<FetchResult<TData>>`}
116+
idPrefix="usemutation-result"
117+
>
118+
A function to trigger the mutation from your UI. You can optionally pass this function any of the following options:
119+
120+
- `awaitRefetchQueries`
121+
- `context`
122+
- `fetchPolicy`
123+
- `onCompleted`
124+
- `onError`
125+
- `optimisticResponse`
126+
- `refetchQueries`
127+
- `onQueryUpdated`
128+
- `update`
129+
- `variables`
130+
- `client`
131+
132+
Any option you pass here overrides any existing value for that option that you passed to `useMutation`.
133+
134+
The mutate function returns a promise that fulfills with your mutation result.
135+
</ManualTupleItem>
136+
<ManualTupleItem
137+
name="result"
138+
type="MutationResult<TData>"
139+
canonicalReference="@apollo/client!MutationResult:interface"
140+
idPrefix="usemutation-result"
141+
>
142+
The result of the mutation.
143+
</ManualTupleItem>
144+
</ManualTuple>
145+
</FunctionDetails>
155146

156147
<FunctionDetails canonicalReference="@apollo/client!useSubscription:function(1)" headingLevel={2} />
157148

@@ -411,8 +402,45 @@ function useReadQuery<TData>(
411402
<FunctionDetails
412403
canonicalReference="@apollo/client!useLoadableQuery:function(5)"
413404
headingLevel={2}
414-
result={<UseLoadableQueryResult />}
415-
/>
405+
>
406+
```ts
407+
[
408+
loadQuery: LoadQueryFunction<TVariables>,
409+
queryRef: QueryRef<TData, TVariables> | null,
410+
{
411+
fetchMore: FetchMoreFunction<TData, TVariables>;
412+
refetch: RefetchFunction<TData, TVariables>;
413+
reset: ResetFunction;
414+
}
415+
]
416+
```
417+
418+
A tuple of three values:
419+
<ManualTuple>
420+
<ManualTupleItem
421+
idPrefix="useloadablequery-result"
422+
name="loadQuery"
423+
type="LoadQueryFunction<TVariables>"
424+
>
425+
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`.
426+
</ManualTupleItem>
427+
<ManualTupleItem
428+
idPrefix="useloadablequery-result"
429+
name="queryRef"
430+
type="QueryRef<TData, TVariables> | null"
431+
canonicalReference="@apollo/client!QueryRef:interface"
432+
>
433+
The `queryRef` used by `useReadQuery` to read the query result.
434+
</ManualTupleItem>
435+
<ManualTupleItem
436+
idPrefix="useloadablequery-result"
437+
name="handlers"
438+
type="{ fetchMore: FetchMoreFunction<TData, TVariables>; refetch: RefetchFunction<TData, TVariables>; reset: ResetFunction; }"
439+
>
440+
Additional handlers used for the query, such as `refetch`.
441+
</ManualTupleItem>
442+
</ManualTuple>
443+
</FunctionDetails>
416444

417445
<FunctionDetails canonicalReference="@apollo/client!useQueryRefHandlers:function(1)" headingLevel={2} />
418446

‎docs/source/caching/cache-configuration.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ This example shows a variety of `typePolicies` with different `keyFields`:
198198

199199
If an object has multiple `keyFields`, the cache ID always lists those fields in the same order to ensure uniqueness.
200200

201-
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).
201+
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.
202202

203203
### Calculating an object's cache ID
204204

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ You should define a name for _every_ GraphQL operation in your application. Doin
3232
* You clarify the purpose of each operation for both yourself and your teammates.
3333
* You avoid unexpected errors when combining multiple operations in a single query document (an anonymous operation can only appear alone).
3434
* You improve debugging output in both client _and_ server code, helping you identify exactly which operation is causing issues.
35-
* [Apollo Studio](/studio/) provides helpful operation-level metrics, which require named operations.
35+
* [Apollo GraphOS Studio](/graphos/graphs/studio-features) provides helpful operation-level metrics, which require named operations.
3636

3737
## Use GraphQL variables to provide arguments
3838

@@ -94,7 +94,7 @@ The server-side cache also powers features like [automatic persisted queries](/a
9494

9595
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.
9696

97-
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.
97+
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.
9898

9999
## Query only the data you need, where you need it
100100

@@ -193,7 +193,7 @@ To improve the performance of your [server-side response cache](/apollo-server/p
193193

194194
## Set your app's `name` and `version` for metrics reporting (paid)
195195

196-
> 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.
196+
> 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.
197197
198198
The constructor of `ApolloClient` accepts the `name` and `version` options:
199199

@@ -208,4 +208,4 @@ const client = new ApolloClient({
208208

209209
If you specify these values, Apollo Client automatically adds them to each operation request as HTTP headers (`apollographql-client-name` and `apollographql-client-version`).
210210

211-
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/).
211+
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/errors.mdx

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎docs/source/index.mdx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Apollo Client helps you structure code in an economical, predictable, and declar
99
<p>
1010
<ButtonLink
1111
size="lg"
12-
href="./get-started/"
12+
href="/react/get-started/"
1313
colorScheme="navy"
1414
>
1515
Get started!
@@ -44,29 +44,29 @@ Apollo Client also supports `@defer` and GraphQL subscription implementations ou
4444

4545
## Recommended docs
4646

47-
After you [get started](./get-started/), check out the full Apollo Client documentation in the navigation on the left.
47+
After you [get started](/react/get-started/), check out the full Apollo Client documentation in the navigation on the left.
4848

4949
We recommend the following articles in particular:
5050

51-
* **[Queries](./data/queries/) and [Mutations](./data/mutations/)**. These are the read and write operations of GraphQL.
52-
* [**Caching overview**](./caching/overview/). Apollo Client's normalized cache enables you to skip network requests entirely when data is already available locally.
53-
* [**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.
54-
* [**Basic HTTP networking**](./networking/basic-http-networking/). Learn how to send custom headers and other authentication metadata in your queries.
55-
* [**Testing React components**](./development-testing/testing/). Test your GraphQL operations without requiring a connection to a server.
51+
* **[Queries](/react/data/queries/) and [Mutations](/react/data/mutations/)**. These are the read and write operations of GraphQL.
52+
* [**Caching overview**](/react/caching/overview/). Apollo Client's normalized cache enables you to skip network requests entirely when data is already available locally.
53+
* [**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.
54+
* [**Basic HTTP networking**](/react/networking/basic-http-networking/). Learn how to send custom headers and other authentication metadata in your queries.
55+
* [**Testing React components**](/react/development-testing/testing/). Test your GraphQL operations without requiring a connection to a server.
5656

5757
## Community integrations
5858

5959
This documentation set focuses on React, but Apollo Client supports many other libraries and languages:
6060

6161
- JavaScript
62-
- [Angular](integrations/integrations/#angular)
63-
- [Vue](integrations/integrations/#vue)
64-
- [Svelte](integrations/integrations/#svelte)
65-
- [Solid.js](integrations/integrations/#solidjs)
66-
- [Ember](integrations/integrations/#ember)
62+
- [Angular](/react/integrations/integrations/#angular)
63+
- [Vue](/react/integrations/integrations/#vue)
64+
- [Svelte](/react/integrations/integrations/#svelte)
65+
- [Solid.js](/react/integrations/integrations/#solidjs)
66+
- [Ember](/react/integrations/integrations/#ember)
6767
- [Meteor](https://www.meteor.com) (thanks to [DDP-Apollo](https://github.com/Swydo/ddp-apollo))
6868
- Web Components
69-
- [Apollo Elements](integrations/integrations/#web-components)
69+
- [Apollo Elements](/react/integrations/integrations/#web-components)
7070
- Native mobile
7171
- [Native iOS with Swift](/ios)
7272
- [Native Android with Java and Kotlin](/kotlin)

0 commit comments

Comments
 (0)