fix(solid-query/useMutationState): recompute the result when the filt… · TanStack/query@3b4b9e8 · GitHub
Skip to content

Commit 3b4b9e8

Browse files
sukvvonsukvvon
committed
fix(solid-query/useMutationState): recompute the result when the filters or the 'queryClient' change
1 parent 01703ec commit 3b4b9e8

3 files changed

Lines changed: 90 additions & 1 deletion

File tree

‎.changeset/solid-use-mutation-state-recompute.md‎

Lines changed: 5 additions & 0 deletions

‎packages/solid-query/src/__tests__/useMutationState.test.tsx‎

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
22
import { fireEvent } from '@solidjs/testing-library'
3-
import { createEffect } from 'solid-js'
3+
import { createEffect, createSignal } from 'solid-js'
44
import { queryKey, sleep } from '@tanstack/query-test-utils'
55
import { QueryClient, useMutation, useMutationState } from '..'
66
import { renderWithClient } from './utils'
@@ -60,6 +60,85 @@ describe('useMutationState', () => {
6060
expect(rendered.getByText('count: 1')).toBeInTheDocument()
6161
})
6262

63+
it('should update when the filters change', async () => {
64+
const mutationKey1 = queryKey()
65+
const mutationKey2 = queryKey()
66+
const [mutationKey, setMutationKey] = createSignal(mutationKey1)
67+
68+
function States() {
69+
const states = useMutationState(() => ({
70+
filters: { mutationKey: mutationKey() },
71+
select: (mutation) => mutation.state.data,
72+
}))
73+
74+
return <div>data: {states().join(',')}</div>
75+
}
76+
77+
function Mutate() {
78+
const mutation1 = useMutation(() => ({
79+
mutationKey: mutationKey1,
80+
mutationFn: () => sleep(10).then(() => 'data1'),
81+
}))
82+
const mutation2 = useMutation(() => ({
83+
mutationKey: mutationKey2,
84+
mutationFn: () => sleep(10).then(() => 'data2'),
85+
}))
86+
87+
return (
88+
<div>
89+
<button onClick={() => mutation1.mutate()}>mutate1</button>
90+
<button onClick={() => mutation2.mutate()}>mutate2</button>
91+
</div>
92+
)
93+
}
94+
95+
const rendered = renderWithClient(queryClient, () => (
96+
<div>
97+
<States />
98+
<Mutate />
99+
</div>
100+
))
101+
102+
fireEvent.click(rendered.getByRole('button', { name: /mutate1/i }))
103+
fireEvent.click(rendered.getByRole('button', { name: /mutate2/i }))
104+
await vi.advanceTimersByTimeAsync(10)
105+
expect(rendered.getByText('data: data1')).toBeInTheDocument()
106+
107+
setMutationKey(mutationKey2)
108+
expect(rendered.getByText('data: data2')).toBeInTheDocument()
109+
})
110+
111+
it('should update when the queryClient changes', async () => {
112+
const queryClient2 = new QueryClient()
113+
const [client, setClient] = createSignal(queryClient)
114+
115+
void queryClient2
116+
.getMutationCache()
117+
.build(queryClient2, {
118+
mutationFn: () => sleep(10).then(() => 'data2'),
119+
})
120+
.execute(undefined)
121+
await vi.advanceTimersByTimeAsync(10)
122+
123+
function Page() {
124+
const states = useMutationState(
125+
() => ({ select: (mutation) => mutation.state.data }),
126+
client,
127+
)
128+
129+
return <div>data: {states().join(',') || 'none'}</div>
130+
}
131+
132+
const rendered = renderWithClient(queryClient, () => <Page />)
133+
134+
expect(rendered.getByText('data: none')).toBeInTheDocument()
135+
136+
setClient(queryClient2)
137+
expect(rendered.getByText('data: data2')).toBeInTheDocument()
138+
139+
queryClient2.clear()
140+
})
141+
63142
it('should return variables after calling mutate', async () => {
64143
const variables: Array<Array<unknown>> = []
65144
const mutationKey = queryKey()

‎packages/solid-query/src/useMutationState.ts‎

Lines changed: 5 additions & 0 deletions

0 commit comments

Comments
 (0)