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:

npm 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.

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>
  );
};

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

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

Suspense with deferred fetch option

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

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

Suspense waiting multiples calls

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

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

Hook to know if the call is fetching or not.

const 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