React Query Suspense

---

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.

---

📦 Install

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

1npm install @kappys/react-query-suspense

⚡ Quick start

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

Simple way wrapping a component with ReactQuerySuspense waiting the example query key call.

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

1import React from "react";
2import { ReactQuerySuspense, QueryKey } from '@kappys/react-query-suspense'
3
4export const SampleComponent: React.FC<React.PropsWithChildren<{
5  keys: QueryKey[];
6}>> = ({ children, keys }) => {
7
8  const key: QueryKey = ["example"];
9
10  return (
11    <ReactQuerySuspense Fallback={<>loading</>} queryKeys={keys}>
12      <div>{children}</div>
13    </ReactQuerySuspense>
14  );
15};

Example with ReactQuerySuspense in real world waiting multiples calls

📝 Features

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

Suspense

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

Suspense with deferred fetch option

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

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

Suspense waiting multiples calls

1const keys1 = ['query', 'key1'];
2const keys2 = ['query', 'key2'];
3
4<ReactQuerySuspense Fallback={<>loading</>} queryKeys={[[keys1], [keys2]]}>
5  <div>Test</div>
6</ReactQuerySuspense>

Hook to know if the call is fetching or not.

1
2const suspense: boolean = useReactQuerySuspense({ queryKeys })

📘 API Reference

ReactQuerySuspense

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.

useReactQuerySuspense

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.

Issues

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

🐛 Bugs

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

[See Bugs][bugs]

💡 Feature Requests

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]

LICENSE

MIT