Document code changes in #8875

apollographql · Oct 1, 2021 · c646ee2 · c646ee2
1 parent a1af48f
commit c646ee2
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 2 deletions.
diff --git a/docs/shared/mutation-result.mdx b/docs/shared/mutation-result.mdx
@@ -120,6 +120,20 @@ The instance of Apollo Client that executed the mutation.
 
 Can be useful for manually executing followup operations or writing data to the cache.
 
+</td>
+</tr>
+
+<tr>
+<td>
+##### `reset`
+
+`() => void`
+</td>
+
+<td>
+
+A function which enables you to return the mutation result to its initial, uncalled state.
+
 </td>
 </tr>
   </tbody>

diff --git a/docs/source/api/react/hooks.mdx b/docs/source/api/react/hooks.mdx
@@ -149,7 +149,7 @@ function useLazyQuery<TData = any, TVariables = OperationVariables>(
   query: DocumentNode,
   options?: LazyQueryHookOptions<TData, TVariables>,
 ): [
-  (options?: QueryLazyOptions<TVariables>) => void,
+  (options?: QueryLazyOptions<TVariables>) => Promise<LazyQueryResult<TData, TVariables>>,
   LazyQueryResult<TData, TVariables>
 ] {}
 ```
@@ -172,7 +172,7 @@ function useLazyQuery<TData = any, TVariables = OperationVariables>(
 
 | Param            | Type                                                  | Description                                                                                                                     |
 | ---------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| Execute function | (options?: QueryLazyOptions&lt;TVariables&gt;) => void | Function that can be triggered to execute the suspended query. After being called, `useLazyQuery` behaves just like `useQuery`. |
+| Execute function | (options?: QueryLazyOptions&lt;TVariables&gt;) => Promise&lt;LazyQueryResult&lt;TData, TVariables&gt;&gt; | Function that can be triggered to execute the suspended query. After being called, `useLazyQuery` behaves just like `useQuery`. The `useLazyQuery` function returns a promise which fulfills with a query result when the query succeeds or fails. |
 
 **Result object**
 

diff --git a/docs/source/data/mutations.mdx b/docs/source/data/mutations.mdx
@@ -332,6 +332,33 @@ If you find you've included more queries than you expected, you can skip or igno
 
 To use the `onQueryUpdated` API without performing a mutation, try the [`client.refetchQueries`](./refetching/#clientrefetchqueries) method. In the standalone `client.refetchQueries` API, the `refetchQueries: [...]` mutation option is called `include: [...]`, and the `update` function is called `updateCache` for clarity. Otherwise, the same internal system powers both `client.refetchQueries` and refetching queries after a mutation.
 
+### Resetting mutation results
+
+Similar to the functions available from `useQuery` results, the mutation result has a `reset` function, which can be used to reset the mutation result to its initial state. This function can be used to allow the user to dismiss mutation data or errors in the UI.
+
+```js
+function LoginPage () {
+  const [loginMutation, loginResult] = useMutation(LOGIN_MUTATION);
+
+  return (
+    <>
+      <form>
+        <input class="login"/>
+        <input class="password"/>
+        <button onclick={login}>Login</button>
+      </form>
+      {
+        loginResult.error &&
+        <LoginFailedMessageWindow
+          message={loginResult.error.message}
+          onDismiss={() => loginResult.reset()}
+        />
+      }
+    </>
+  );
+}
+```
+
 ## `useMutation` API
 
 Supported options and result fields for the `useMutation` hook are listed below.