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
anduseMutation
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
anduseMutation
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