Configuring React Query for Suspense

Illustrate how to configure the React Query client to enable Suspense support, ensuring that queries automatically leverage Suspense for data fetching.

import { QueryClient } from 'react-query';

First, import the QueryClient from react-query.

const queryConfig = {
  defaultOptions: {
    queries: {
      suspense: true
    }
  }
};

Define a configuration object for the React Query client. Here, we set 'suspense' to true in the defaultOptions for queries, which enables Suspense support.

const queryClient = new QueryClient(queryConfig);

Create a new instance of QueryClient by passing the configuration object. This instance will be configured to support Suspense for data fetching.

export { queryClient };

Export the configured queryClient instance so it can be used throughout the application.