Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add docs for skipping an optimistic update via optimisticResponse #11461

Merged
merged 2 commits into from
Jan 3, 2024
Merged

chore: add docs for skipping an optimistic update via optimisticResponse #11461

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cb2905b
chore: add docs for skipping an optimistic update via optimisticResponse
alessbell Jan 3, 2024
83cc833
chore: make PR review updates
alessbell Jan 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions docs/source/performance/optimistic-ui.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,51 @@ As this example shows, the value of `optimisticResponse` is an object that match

5. Apollo Client notifies all affected queries again. The associated components re-render, but if the server's response matches our `optimisticResponse`, this is invisible to the user.

## Bailing out of an optimistic update

In some cases you may want to skip an optimisitic update. For example, you may want to perform an optimistic update _only_ when certain variables are passed to the mutation. In order to skip an update, you can pass a function to `optimisticResponse` and use the `IGNORE` sentinel object available on the second argument passed to your `optimisticResponse` function to bail out of the optimistic update.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
In some cases you may want to skip an optimisitic update. For example, you may want to perform an optimistic update _only_ when certain variables are passed to the mutation. In order to skip an update, you can pass a function to `optimisticResponse` and use the `IGNORE` sentinel object available on the second argument passed to your `optimisticResponse` function to bail out of the optimistic update.
In some cases you may want to skip an optimistic update. For example, you may want to perform an optimistic update _only_ when certain variables are passed to the mutation. In order to skip an update, you can pass a function to `optimisticResponse` and use the `IGNORE` sentinel object available on the second argument passed to your `optimisticResponse` function to bail out of the optimistic update.

Typo 🙂

Suggested change
In some cases you may want to skip an optimisitic update. For example, you may want to perform an optimistic update _only_ when certain variables are passed to the mutation. In order to skip an update, you can pass a function to `optimisticResponse` and use the `IGNORE` sentinel object available on the second argument passed to your `optimisticResponse` function to bail out of the optimistic update.
In some cases you may want to skip an optimisitic update. For example, you may want to perform an optimistic update _only_ when certain variables are passed to the mutation. To skip an update, pass a function to `optimisticResponse` and use the `IGNORE` sentinel object available on the second argument passed to your `optimisticResponse` function to bail out of the optimistic update.

I think it reads a touch nicer being a bit more direct here

Suggested change
In some cases you may want to skip an optimisitic update. For example, you may want to perform an optimistic update _only_ when certain variables are passed to the mutation. In order to skip an update, you can pass a function to `optimisticResponse` and use the `IGNORE` sentinel object available on the second argument passed to your `optimisticResponse` function to bail out of the optimistic update.
In some cases you may want to skip an optimisitic update. For example, you may want to perform an optimistic update _only_ when certain variables are passed to the mutation. In order to skip an update, you can pass a function to the `optimisticResponse` option and return the `IGNORE` sentinel object available to the second argument passed to your `optimisticResponse` function to bail out of the optimistic update.

I think being a bit more explicit that this function is for the option and that IGNORE should be returned. Thoughts?

Suggested change
In some cases you may want to skip an optimisitic update. For example, you may want to perform an optimistic update _only_ when certain variables are passed to the mutation. In order to skip an update, you can pass a function to `optimisticResponse` and use the `IGNORE` sentinel object available on the second argument passed to your `optimisticResponse` function to bail out of the optimistic update.
In some cases you may want to skip an optimisitic update. For example, you may want to perform an optimistic update _only_ when certain variables are passed to the mutation. In order to skip an update, you can pass a function to `optimisticResponse` and use the `IGNORE` sentinel object available on the second argument to bail out of the optimistic update.

Since you've already mentioned that you're passing a function to the optimisticResponse option, no need to repeat it in the 2nd part of the sentence 🙂

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, +1 to all of these! Updated in 83cc833


Consider this example:

```tsx
const UPDATE_COMMENT = gql`
mutation UpdateComment($commentId: ID!, $commentContent: String!) {
updateComment(commentId: $commentId, content: $commentContent) {
id
__typename
content
}
}
`;

function CommentPageWithData() {
const [mutate] = useMutation(UPDATE_COMMENT);

return (
<Comment
updateComment={({ commentId, commentContent }) =>
mutate({
variables: { commentId, commentContent },
optimisticResponse: (vars, { IGNORE }) => {
if (commentContent === "foo") {
// conditionally bail out of optimistic updates
return IGNORE;
}
return {
updateComment: {
id: commentId,
__typename: "Comment",
content: commentContent
}
}
},
})
}
/>
);
}
```

## Example: Adding a new object to a list

The previous example shows how to provide an optimistic result for an object that's _already_ in the Apollo Client cache. But what about a mutation that creates a _new_ object? This works similarly.
Expand Down
Loading