feat(solid-query): Add useMutationState

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

@@ -0,0 +1,90 @@
+import { describe, expect, expectTypeOf, it } from 'vitest'
+import { fireEvent, render, waitFor } from '@solidjs/testing-library'
+import { createEffect } from 'solid-js'
+import { useMutationState } from '../useMutationState'
+import { createMutation } from '../createMutation'
+import { QueryClientProvider } from '../QueryClientProvider'
+import { createQueryClient, doNotExecute, sleep } from './utils'
+import type { MutationState, MutationStatus } from '@tanstack/query-core'
+
+describe('useMutationState', () => {
+  describe('types', () => {
+    it('should default to QueryState', () => {
+      doNotExecute(() => {
+        const result = useMutationState(() => ({
+          filters: { status: 'pending' },
+        }))
+
+        expectTypeOf<Array<MutationState>>(result())
+      })
+    })
+    it('should infer with select', () => {
+      doNotExecute(() => {
+        const result = useMutationState(() => ({
+          filters: { status: 'pending' },
+          select: (mutation) => mutation.state.status,
+        }))
+
+        expectTypeOf<Array<MutationStatus>>(result())
+      })
+    })
+  })
+  it('should return variables after calling mutate', async () => {
+    const queryClient = createQueryClient()
+    const variables: Array<Array<unknown>> = []
+    const mutationKey = ['mutation']
+
+    function Variables() {
+      const states = useMutationState(() => ({
+        filters: { mutationKey, status: 'pending' },
+        select: (mutation) => mutation.state.variables,
+      }))
+
+      createEffect(() => {
+        variables.push(states())
+      })
+
+      return null
+    }
+
+    function Mutate() {
+      const mutation = createMutation(() => ({
+        mutationKey,
+        mutationFn: async (input: number) => {
+          await sleep(150)
+          return 'data' + input
+        },
+      }))
+
+      return (
+        <div>
+          data: {mutation.data ?? 'null'}
+          <button onClick={() => mutation.mutate(1)}>mutate</button>
+        </div>
+      )
+    }
+
+    function Page() {
+      return (
+        <div>
+          <Variables />
+          <Mutate />
+        </div>
+      )
+    }
+
+    const rendered = render(() => (
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>
+    ))
+
+    await waitFor(() => rendered.getByText('data: null'))
+
+    fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
+
+    await waitFor(() => rendered.getByText('data: data1'))
+
+    expect(variables).toEqual([[], [1], []])
+  })
+})

packages/solid-query/src/__tests__/utils.tsx

@@ -66,3 +66,5 @@ export function setActTimeout(fn: () => void, ms?: number) {
 export function expectTypeNotAny<T>(_: 0 extends 1 & T ? never : T): void {
   return undefined
 }
+
+export const doNotExecute = (_func: () => void) => true

packages/solid-query/src/useMutationState.ts

@@ -0,0 +1,63 @@
+import { createEffect, createMemo, createSignal, onCleanup } from 'solid-js'
+import { replaceEqualDeep } from '@tanstack/query-core'
+import { useQueryClient } from './QueryClientProvider'
+import type {
+  DefaultError,
+  Mutation,
+  MutationCache,
+  MutationFilters,
+  MutationState,
+} from '@tanstack/query-core'
+import type { Accessor } from 'solid-js'
+import type { QueryClient } from './QueryClient'
+
+type MutationStateOptions<TResult = MutationState> = {
+  filters?: MutationFilters
+  select?: (
+    mutation: Mutation<unknown, DefaultError, unknown, unknown>,
+  ) => TResult
+}
+
+function getResult<TResult = MutationState>(
+  mutationCache: MutationCache,
+  options: MutationStateOptions<TResult>,
+): Array<TResult> {
+  return mutationCache
+    .findAll(options.filters)
+    .map(
+      (mutation): TResult =>
+        (options.select
+          ? options.select(
+              mutation as Mutation<unknown, DefaultError, unknown, unknown>,
+            )
+          : mutation.state) as TResult,
+    )
+}
+
+export function useMutationState<TResult = MutationState>(
+  options: Accessor<MutationStateOptions<TResult>> = () => ({}),
+  queryClient?: Accessor<QueryClient>,
+): Accessor<Array<TResult>> {
+  const client = createMemo(() => useQueryClient(queryClient?.()))
+  const mutationCache = createMemo(() => client().getMutationCache())
+
+  const [result, setResult] = createSignal(
+    getResult(mutationCache(), options()),
+  )
+
+  createEffect(() => {
+    const unsubscribe = mutationCache().subscribe(() => {
+      const nextResult = replaceEqualDeep(
+        result(),
+        getResult(mutationCache(), options()),
+      )
+      if (result() !== nextResult) {
+        setResult(nextResult)
+      }
+    })
+
+    onCleanup(unsubscribe)
+  })
+
+  return result
+}