Skip to content

Commit

Permalink
chore(general): 🤖 fix anchors of the mutation section
Browse files Browse the repository at this point in the history
  • Loading branch information
luii committed Nov 10, 2023
1 parent cbd2ee5 commit 19bfac0
Showing 1 changed file with 7 additions and 4 deletions.
11 changes: 7 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -186,13 +186,14 @@ The most basic mutation consists of either a `mutationFn` or `mutationKey`, if o
the query client will look for a mutation with the same `mutationKey` or take the default mutation function provided
by the `provideQueryClientOptions()` provider.

### Example {#mutation-example}
### Example <a name="mutation-example"></a>

> **Note:** It's generally recommended to keep shared functions, like this is one, though not required, in a shared service
To get started with a basic mutation, first create a service like this:

```ts { #mutation-service }
<a id="mutation-service"></a>
```ts
@Injectable({ providedIn: 'root' })
export class TodosService {
#useMutation = injectMutation();
Expand All @@ -210,7 +211,8 @@ The `variables` in the `mutationFn` callback are the variables that will be pass

Now create your component in which you want to use your newly created service:

```ts { #observable-mutation-component }
<a id="observable-mutation-component"></a>
```ts
@Component({
template: `
<input #ref />
Expand Down Expand Up @@ -241,7 +243,8 @@ export class TodosComponent {

If you prefer a signal based approach, then you can use the `result` getter function on `addTodo`.

```ts { #signal-mutation-component }
<a id="signal-mutation-component"></a>
```ts
@Component({
template: `
<input #ref />
Expand Down

0 comments on commit 19bfac0

Please sign in to comment.