Query Docs
Guides & Concepts
- Important Defaults
- Queries
- Query Keys
- Query Functions
- Query Options
- Network Mode
- Parallel Queries
- Dependent Queries
- Background Fetching Indicators
- Window Focus Refetching
- Disabling/Pausing Queries
- Query Retries
- Paginated Queries
- Infinite Queries
- Initial Query Data
- Placeholder Query Data
- Mutations
- Mutation Options
- Query Invalidation
- Invalidation from Mutations
- Optimistic Updates
- Query Cancellation
- Scroll Restoration
- Filters
- Caching
- Default Query Fn
- Testing
- Does this replace state managers?
AI/LLM: This documentation page is available in plain markdown format at/query/latest/docs/framework/angular/guides/mutation-options.md
Guides & Concepts
Mutation Options
One of the best ways to share mutation options between multiple places, is to use the mutationOptions helper. At runtime, this helper just returns whatever you pass into it, but it has a lot of advantages when using it with TypeScript. You can define all possible options for a mutation in one place, and you'll also get type inference and type safety for all of them.
ts
export class QueriesService {
private readonly http = inject(HttpClient)
updatePost(id: number) {
return mutationOptions({
mutationFn: (post: Post) => Promise.resolve(post),
mutationKey: ['updatePost', id],
onSuccess: (newPost) => {
// ^? newPost: Post
this.queryClient.setQueryData(['posts', id], newPost)
},
})
}
}