another way to suspense the @tanstack/query calls by queryKeys with multiples possibilities.
Suspense your component wherever you want just passing a query key call.

React Query Suspense is available as a package on NPM, install with your favorite package manager:

npm install @kappys/react-query-suspense

start wrapping the content that you want suspense until the call is ready to render.

Is not necessary pass isLoading or isSuccess, just pass the queryKey and forget all things.

import React from "react";
import { ReactQuerySuspense, QueryKey } from '@kappys/react-query-suspense'

export const SampleComponent: React.FC<React.PropsWithChildren<{
  keys: QueryKey[];
}>> = ({ children, keys }) => {

  const key: QueryKey = ["example"];

  return (
    <ReactQuerySuspense Fallback={<>loading</>} queryKeys={keys}>
      <div>{children}</div>
    </ReactQuerySuspense>
  );
};

Important: On Error fetch, this library will keep loading, in a future we will implement FallbackError

<ReactQuerySuspense Fallback={<>loading</>} queryKeys={['query', 'key']}>
  <div>Test</div>
</ReactQuerySuspense>

• it will force to put the loading in the first rendering.

<ReactQuerySuspense Fallback={<>loading</>} queryKeys={['query', 'key']} deferredFetch>
  <div>Test</div>
</ReactQuerySuspense>

const keys1 = ['query', 'key1'];
const keys2 = ['query', 'key2'];

<ReactQuerySuspense Fallback={<>loading</>} queryKeys={[[keys1], [keys2]]}>
  <div>Test</div>
</ReactQuerySuspense>

const suspense: boolean = useReactQuerySuspense({ queryKeys })

Attributes

• Fallback: React.ReactNode
  • Required
• queryKeys: QueryKey[]
  • Required
  • QueryKey that you are using to identify your calls in useQuery and useMutation
• context?: QueryClient
  • Optional
  • Possibility to pass another context to listen, the context is provided when you call new QueryClient
• deferredFetch?: boolean
  • Optional
  • it provides you the possibility to render the Fallback first.

Options

• queryKeys: QueryKey[]
  • Required
  • QueryKey that you are using to identify your calls in useQuery and useMutation
• context?: QueryClient
  • Optional
  • Possibility to pass another context to listen, the context is provided when you call new QueryClient
• deferredFetch?: boolean
  • Optional
  • It provides you the possibility to render the Fallback first.

Return

• suspense: boolean
  • Return a boolean with the status of suspense.

Looking to contribute? Look for the [Good First Issue][good-first-issue] label.

Please file an issue for bugs, missing documentation, or unexpected behavior.

[See Bugs][bugs]

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

[See Feature Requests][requests]

MIT