Configuring QueryClient with TypeScript

Demonstrate setting up a QueryClient instance with global defaults typed for better code predictability and maintainability.

import { QueryClient, DefaultOptions } from '@tanstack/react-query';

Importing QueryClient and DefaultOptions from the react-query library.

interface CustomQueryConfig extends DefaultOptions {
  queries: {
    retry: boolean;
    refetchOnWindowFocus: boolean;
  };
}

Defining an interface that extends the default options for more type safety.

const customOptions: CustomQueryConfig = {
  queries: {
    retry: false, // Avoid retrying failed queries
    refetchOnWindowFocus: false, // Do not refetch on window focus by default
  },
};

Setting up custom global defaults for the QueryClient.

const queryClient = new QueryClient({
  defaultOptions: customOptions,
});

Creating a new QueryClient instance with the custom default options.

export default queryClient;

Exporting the configured QueryClient instance for use throughout the application.