Migrating to v3

@suspensive/react-query v1 was originally added as one of TanStack Query’s community resources  and was a library that provided useSuspenseQuery, useSuspenseQueries and useSuspenseInfiniteQuery to users of @tanstack/react-query v4. Afterwards, as useSuspenseQuery, useSuspenseQueries, and useSuspenseInfiniteQuery were officially added to @tanstack/react-query v5 with changes interfaces such as enabled disappeared and queryOptions were received as one. Therefore we made the interface of @suspensive/react-query v2 as similar to the official interface as possible to make it easier for existing users of @suspensive/react-query v1 to migrate to @tanstack/react-query v5.

However, because of the higher browser specifications (class private fields) required by @tanstack/react-query v5 , @tanstack/react-query v4 is still useful to many teams. Therefore, we will maintain support for @tanstack/react-query v4.

What’s new

New mutationOptions #1490 

mutationOptions helps you easily reuse and consistently manage option objects for Mutations. This provides similar benefits to the ones offered by queryOptions.

import { mutationOptions, useMutation, Mutation } from '@suspensive/react-query'
 
const editPostMutationOptions = (postId: number) =>
  mutationOptions({
    mutationFn: (content: string) => fetch(`https://example.com/posts/${postId}`, {
      method: 'PATCH',
      body: JSON.stringify({ content }),
    }).then(res => res.json()),
  })
 
// You can directly use mutationOptions without creating custom mutation hooks.
const editPostMutation = useMutation(editPostMutationOptions(1))
 
// Directly use mutationOptions with <Mutation />.
const Example = () => (
  <Mutation {...editPostMutationOptions(1)}>
    {({ mutate, isLoading }) => (
      <div>
        <p>{isLoading ? 'Updating...' : 'Latest updated'}</p>
        <textarea onBlur={(e) => mutate(e.target.value)} disabled={isLoading} />
      </div>
    )}
  </Mutation>
)

Handling BREAKING CHANGES

networkMode is now fixed to 'always' in useSuspenseQuery, useSuspenseQueries, useSuspenseInfiniteQuery of @suspensive/react-query

Previously, online status was determined using the navigator.onLine API. However, Chromium-based browsers have a known issue where this API may return incorrect values, falsely reporting the device as offline even when it is connected.
To ensure consistent behavior across all environments, @suspensive/react-query now sets the default networkMode to 'always' when using Suspense hooks.

This change aligns with the default behavior in React Query v5 and prevents Suspense hooks from starting with fetchStatus: 'paused' during runtime.

• Reference: Default networkMode configuration and fetchStatus = “paused” , navigator.onLine returning false value even network is available 

import { queryOptions, useSuspenseQuery } from '@suspensive/react-query'
 
// Applies the same to queryOptions and infiniteQueryOptions as well.
const QueryOptionsExample = () => {
  const options = queryOptions({
    queryKey: ['key'],
    queryFn: () => api()
-   networkMode: 'always'
  })
}
 
// Applies the same to useSuspenseQuery, useSuspenseInfiniteQuery, SuspenseQuery, and SuspenseInfiniteQuery.
const SuspenseQueryExample = () => {
  const query = useSuspenseQuery({
    queryKey: ['key'],
    queryFn: () => api()
-   networkMode: 'always'
  })
}