@tanstack/solid-query 5.0.0 → 5.2.0

package/build/dev.cjs

@@ -447,7 +447,7 @@ exports.queryOptions = queryOptions;
 exports.useIsFetching = useIsFetching;
 exports.useIsMutating = useIsMutating;
 Object.keys(queryCore).forEach(function (k) {
-  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,
     get: function () { return queryCore[k]; }
   });

package/build/index.cjs

@@ -447,7 +447,7 @@ exports.queryOptions = queryOptions;
 exports.useIsFetching = useIsFetching;
 exports.useIsMutating = useIsMutating;
 Object.keys(queryCore).forEach(function (k) {
-  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,
     get: function () { return queryCore[k]; }
   });

package/build/index.d.cts

@@ -2,7 +2,6 @@ import { DefaultError, QueryKey, QueryObserverOptions as QueryObserverOptions$1,
 export * from '@tanstack/query-core';
 import * as solid_js from 'solid-js';
 import { JSX, Accessor } from 'solid-js';
-import * as solid_js_types_reactive_signal from 'solid-js/types/reactive/signal';
 
 interface QueryObserverOptions<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, TPageParam = never> extends Omit<QueryObserverOptions$1<TQueryFnData, TError, TData, TQueryData, TQueryKey, TPageParam>, 'structuralSharing'> {
     /**
@@ -145,6 +144,6 @@ declare function createQueries<T extends Array<any>, TCombinedResult extends Que
 }>, queryClient?: Accessor<QueryClient>): TCombinedResult;
 
 declare const useIsRestoring: () => Accessor<boolean>;
-declare const IsRestoringProvider: solid_js_types_reactive_signal.ContextProviderComponent<Accessor<boolean>>;
+declare const IsRestoringProvider: solid_js.ContextProviderComponent<Accessor<boolean>>;
 
 export { CreateBaseMutationResult, CreateBaseQueryOptions, CreateBaseQueryResult, CreateInfiniteQueryOptions, CreateInfiniteQueryResult, CreateMutateAsyncFunction, CreateMutateFunction, CreateMutationOptions, CreateMutationResult, CreateQueryOptions, CreateQueryResult, DefaultOptions, DefinedCreateBaseQueryResult, DefinedCreateQueryResult, FunctionedParams, InfiniteQueryObserverOptions, IsRestoringProvider, QueryClient, QueryClientConfig, QueryClientContext, QueryClientProvider, QueryClientProviderProps, QueryObserverOptions, SolidInfiniteQueryOptions, SolidMutationOptions, SolidQueryOptions, createInfiniteQuery, createMutation, createQueries, createQuery, queryOptions, useIsFetching, useIsMutating, useIsRestoring, useQueryClient };

package/build/index.d.ts

@@ -2,7 +2,6 @@ import { DefaultError, QueryKey, QueryObserverOptions as QueryObserverOptions$1,
 export * from '@tanstack/query-core';
 import * as solid_js from 'solid-js';
 import { JSX, Accessor } from 'solid-js';
-import * as solid_js_types_reactive_signal from 'solid-js/types/reactive/signal';
 
 interface QueryObserverOptions<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, TPageParam = never> extends Omit<QueryObserverOptions$1<TQueryFnData, TError, TData, TQueryData, TQueryKey, TPageParam>, 'structuralSharing'> {
     /**
@@ -145,6 +144,6 @@ declare function createQueries<T extends Array<any>, TCombinedResult extends Que
 }>, queryClient?: Accessor<QueryClient>): TCombinedResult;
 
 declare const useIsRestoring: () => Accessor<boolean>;
-declare const IsRestoringProvider: solid_js_types_reactive_signal.ContextProviderComponent<Accessor<boolean>>;
+declare const IsRestoringProvider: solid_js.ContextProviderComponent<Accessor<boolean>>;
 
 export { CreateBaseMutationResult, CreateBaseQueryOptions, CreateBaseQueryResult, CreateInfiniteQueryOptions, CreateInfiniteQueryResult, CreateMutateAsyncFunction, CreateMutateFunction, CreateMutationOptions, CreateMutationResult, CreateQueryOptions, CreateQueryResult, DefaultOptions, DefinedCreateBaseQueryResult, DefinedCreateQueryResult, FunctionedParams, InfiniteQueryObserverOptions, IsRestoringProvider, QueryClient, QueryClientConfig, QueryClientContext, QueryClientProvider, QueryClientProviderProps, QueryObserverOptions, SolidInfiniteQueryOptions, SolidMutationOptions, SolidQueryOptions, createInfiniteQuery, createMutation, createQueries, createQuery, queryOptions, useIsFetching, useIsMutating, useIsRestoring, useQueryClient };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Solid",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -48,10 +48,10 @@
   ],
   "dependencies": {
     "solid-js": "^1.7.8",
-    "@tanstack/query-core": "5.0.0"
+    "@tanstack/query-core": "5.0.5"
   },
   "devDependencies": {
-    "tsup-preset-solid": "^2.0.1",
+    "tsup-preset-solid": "^2.1.0",
     "vite-plugin-solid": "^2.7.0"
   },
   "peerDependencies": {

package/src/__tests__/QueryClientProvider.test.tsx

@@ -1,7 +1,6 @@
+import { describe, expect, it, vi } from 'vitest'
 import { render, screen, waitFor } from '@solidjs/testing-library'
-
 import { QueryCache } from '@tanstack/query-core'
-import { vi } from 'vitest'
 import { QueryClientProvider, createQuery, useQueryClient } from '..'
 import { createQueryClient, queryKey, sleep } from './utils'
 

package/src/__tests__/createInfiniteQuery.test.tsx

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest'
 import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
 
 import {
@@ -10,7 +11,6 @@ import {
   createSignal,
   on,
 } from 'solid-js'
-import { vi } from 'vitest'
 import {
   QueryCache,
   QueryClientProvider,

package/src/__tests__/createMutation.test.tsx

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom'
+import { describe, expect, it, vi } from 'vitest'
 import {
   ErrorBoundary,
   createEffect,
@@ -6,7 +6,6 @@ import {
   createSignal,
 } from 'solid-js'
 import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
-import { vi } from 'vitest'
 import {
   MutationCache,
   QueryCache,

package/src/__tests__/createQueries.test.tsx

@@ -1,8 +1,8 @@
+import { describe, expect, expectTypeOf, it, vi } from 'vitest'
 import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
 import * as QueryCore from '@tanstack/query-core'
 
 import { createRenderEffect, createSignal } from 'solid-js'
-import { vi } from 'vitest'
 import {
   QueriesObserver,
   QueryCache,

package/src/__tests__/createQuery.test.tsx

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom'
+import { describe, expect, expectTypeOf, it, vi } from 'vitest'
 import {
   ErrorBoundary,
   Match,
@@ -10,7 +10,6 @@ import {
   on,
 } from 'solid-js'
 import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
-import { vi } from 'vitest'
 import { reconcile } from 'solid-js/store'
 import {
   QueryCache,

package/src/__tests__/createQuery.types.test.tsx

@@ -1,3 +1,4 @@
+import { describe, it } from 'vitest'
 import { createQuery, queryOptions } from '../index'
 
 export type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <

package/src/__tests__/suspense.test.tsx

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest'
 import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
 
 import {
@@ -8,7 +9,6 @@ import {
   createSignal,
   on,
 } from 'solid-js'
-import { vi } from 'vitest'
 import {
   QueryCache,
   QueryClientProvider,

package/src/__tests__/transition.test.tsx

@@ -1,5 +1,5 @@
+import { describe, it } from 'vitest'
 import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
-
 import { Show, Suspense, createSignal, startTransition } from 'solid-js'
 import { QueryCache, QueryClientProvider, createQuery } from '..'
 import { createQueryClient, queryKey, sleep } from './utils'

package/src/__tests__/useIsFetching.test.tsx

@@ -1,5 +1,5 @@
+import { describe, expect, it } from 'vitest'
 import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
-
 import { Show, createEffect, createRenderEffect, createSignal } from 'solid-js'
 import { QueryCache, QueryClientProvider, createQuery, useIsFetching } from '..'
 import { createQueryClient, queryKey, setActTimeout, sleep } from './utils'

package/src/__tests__/useIsMutating.test.tsx

@@ -1,8 +1,7 @@
+import { describe, expect, it, vi } from 'vitest'
 import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
-
 import { Show, createEffect, createRenderEffect, createSignal } from 'solid-js'
 import * as QueryCore from '@tanstack/query-core'
-import { vi } from 'vitest'
 import { QueryClientProvider, createMutation, useIsMutating } from '..'
 import { createQueryClient, setActTimeout, sleep } from './utils'
 

package/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], []])
+  })
+})

package/src/__tests__/utils.tsx

@@ -1,5 +1,5 @@
-import { Show, createEffect, createSignal, onCleanup } from 'solid-js'
 import { vi } from 'vitest'
+import { Show, createEffect, createSignal, onCleanup } from 'solid-js'
 import { onlineManager } from '@tanstack/query-core'
 import { QueryClient } from '../QueryClient'
 import type { QueryClientConfig } from '@tanstack/query-core'
@@ -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

package/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
+}