You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/source/data/queries.mdx
+14-14Lines changed: 14 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -254,7 +254,7 @@ For more information, see [Handling operation errors](./error-handling/).
254
254
255
255
When React renders a component that calls `useQuery`, Apollo Client automatically executes the corresponding query. But what if you want to execute a query in response to a user interaction, such as a user clicking a button?
256
256
257
-
The [`useLazyQuery`](../api/react/useLazyQuery) hook is suited for manually executing queries. Unlike `useQuery`, when you use `useLazyQuery`, it does not immediately execute its associated query. Instead, it returns an execution function that you call whenever you need to execute the query.
257
+
The [`useLazyQuery`](../api/react/useLazyQuery) hook is for manually executing queries. Unlike `useQuery`, when you use `useLazyQuery`, it doesn't immediately execute its associated query. Instead, it returns an execution function that you call whenever you need to execute the query.
258
258
259
259
Here's an example:
260
260
@@ -283,7 +283,7 @@ The first item in `useLazyQuery`'s return tuple is the execution function, and t
283
283
284
284
### Re-rendering with new options
285
285
286
-
Unlike `useQuery`, options provided to `useLazyQuery` that change on re-renders do not automatically execute the query. Instead, `useLazyQuery` waits to execute the query using the updated options until the execution function is called again.
286
+
Unlike `useQuery`, options provided to `useLazyQuery` that change on re-renders do not automatically execute the query. Instead, `useLazyQuery` waits to execute the query with the updated options until you call the execution function again.
287
287
288
288
The following is an example that changes the fetch policy depending on whether the user is online or offline:
289
289
@@ -306,15 +306,15 @@ function GetDogs({ isOnline }) {
306
306
307
307
<Note>
308
308
309
-
The changed options are immediately applied to the underlying `ObservableQuery` (accessible by the `observable` property) even though the query is not executed. Inspecting the options on the `observable` returns the updated options. This means the updated options will be used for other APIs (such as `refetch`), even before calling the execution function again.
309
+
The changed options are immediately applied to the underlying `ObservableQuery` (accessible by the `observable` property) even though the query isn't executed. Inspecting the options on the `observable` returns the updated options. This means the updated options are used for other APIs (such as `refetch`), even before you call the execution function again.
310
310
311
311
</Note>
312
312
313
313
### Working with variables
314
314
315
315
You provide `variables` to the execution function when executing the query.
316
316
317
-
The following is an example that gets a specific dog's photo when clicking the "Get photo" button:
317
+
The following example gets a specific dog's photo when you click the **Get photo** button:
318
318
319
319
```jsx
320
320
functionDogPhoto() {
@@ -336,15 +336,15 @@ function DogPhoto() {
336
336
337
337
<Note>
338
338
339
-
When using TypeScript, the `variables` option is required along with any required variables when the query provided to `useLazyQuery` contains required variables. If the options argument is not provided to the execution function, or the `variables` option is missing required variables, you see a TypeScript error.
339
+
When using TypeScript, the `variables` option is required if the query provided to `useLazyQuery` contains required variables. If the options argument isn't provided to the execution function, or the `variables` option is missing required variables, TypeScript raises an error.
340
340
341
341
</Note>
342
342
343
343
#### Changing variables
344
344
345
345
You change variables by calling the execution function with updated variables.
346
346
347
-
The following is an example that gets the selected dog's photo when clicking the "Get photo" button.
347
+
The following example gets the selected dog's photo when you click the **Get photo** button.
348
348
349
349
```jsx
350
350
functionDogPhoto() {
@@ -377,7 +377,7 @@ If you need to reference the currently executed query's variables, use the `vari
377
377
378
378
<Tip>
379
379
380
-
The `variables` property is empty until the execution function is called for the first time. Use the `called` property returned by `useLazyQuery` to determine if the execution function has been called at least once.
380
+
The `variables` property is empty until you call the execution function for the first time. Use the `called` property returned by `useLazyQuery` to determine if you've called the execution function at least once.
381
381
382
382
</Tip>
383
383
@@ -429,7 +429,7 @@ Use the `data`, `error`, and other properties returned by `useLazyQuery` to sync
429
429
430
430
In cases where you don't need to keep your component in sync with query state, use `client.query()` directly because it won't unnecessarily render your component for data that you don't use.
431
431
432
-
Using `useLazyQuery` in those situations should be considered an antipattern.
432
+
Using `useLazyQuery` in these situations is an antipattern.
`data` might not contain any partial data and is instead set to `undefined`. This typically occurs when a [network error](./error-handling#network-errors) causes the query to fail because the error might not be associated with GraphQL execution.
501
+
The `data`property might be `undefined`instead of containing partial data. This typically occurs when a [network error](./error-handling#network-errors) causes the query to fail, because the error isn't associated with GraphQL execution.
`data` might be `undefined`in the event a [network error](./error-handling#network-errors) is raised. We recommend checking if `data` is `undefined` before attempting to use it in case an error occurs during query execution.
521
+
`data` might be `undefined`if a [network error](./error-handling#network-errors) occurs. Check if `data` is `undefined` before you use it, in case an error occurs during query execution.
522
522
523
523
</Tip>
524
524
525
525
#### Retaining query results
526
526
527
-
In-flight queries executed by `useLazyQuery`are aborted when the component unmounts or another query is started when calling the execution function, causing the promise to reject. In some cases, you might find this behavior undesirable and would prefer to let the query run to completion.
527
+
Apollo Client aborts in-flight queries executed by `useLazyQuery` when the component unmounts or when you start another query by calling the execution function. This causes the promise to reject. In some cases, you might find this behavior undesirable and prefer to let the query run to completion.
528
528
529
529
<Note>
530
530
531
-
Apollo Client ensures the rejected promise doesn't throw an unhandled rejection error when you don't add a rejection handler to the promise. This however means that aborted errors are silent and might go unnoticed. If you want to be notified when the request is aborted, provide a rejection handler for the promise.
531
+
Apollo Client ensures the rejected promise doesn't throw an unhandled rejection error when you don't add a rejection handler to the promise. However, this means that aborted errors are silent and might go unnoticed. If you want to be notified when the request is aborted, provide a rejection handler for the promise.
532
532
533
533
</Note>
534
534
535
-
The promise returned by the execution function includes a `.retain()` method. When called, it ensures the query continues running even when the component unmounts or a new query is started before the last one finished.
535
+
The promise returned by the execution function includes a `.retain()` method. When you call it, it ensures the query continues running even if the component unmounts or you start a new query before the previous one finishes.
536
536
537
537
```jsx
538
538
functionGetDogs() {
@@ -553,7 +553,7 @@ function GetDogs() {
553
553
}
554
554
```
555
555
556
-
The `retain()` method returns the original promise. The previous example can be shortened to a single line:
556
+
The `retain()` method returns the original promise, so you can shorten the previous example to a single line:
0 commit comments