query/packages/svelte-query/tests/useMutationState/SelectExample.svelte at b73c36acb714a52c6596e22f3d2a6cad9c58ad9d · TanStack/query · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script lang="ts">
  import { QueryClient } from '@tanstack/query-core'
  import {
    createMutation,
    setQueryClientContext,
    useMutationState,
  } from '../../src/index.js'
  import type {
    Accessor,
    CreateMutationOptions,
    MutationStateOptions,
  } from '../../src/index.js'

  let {
    mutationOpts,
    mutationStateOpts,
  }: {
    mutationOpts: Accessor<CreateMutationOptions>
    mutationStateOpts: MutationStateOptions<any, any>
  } = $props()

  const queryClient = new QueryClient()
  setQueryClientContext(queryClient)

  const mutation = createMutation(mutationOpts)

  const variables = useMutationState(mutationStateOpts)
</script>

<button onclick={() => mutation.mutate()}>mutate</button>

<div>
  Variables: {JSON.stringify(variables)}
</div>