Code99

Appearance

Generic <Resource> Management Hooks in React Query Application ​

This document explains the common functionalities offered by the custom hook functions provided in your React + React Query application, applicable to managing various resources.

Purpose: ​

  • Facilitate efficient data fetching, creation, deletion, and updates for any resource type using React Query.
  • Offer a reusable and type-safe API for interacting with your server's endpoints.
  • Simplify common resource management tasks across different components.

Key Features: ​

  • Type-safe: Utilize interfaces (like <Resource>Type) for data and request/response structures, ensuring data consistency.
  • Authentication: Leverage useAuthenticatedQuery and useAuthenticatedMutation for secure access when necessary.
  • CRUD operations: Provide functions for fetching (useGet<Resources>), creating (useCreate<Resource>), updating (useUpdate<Resource>), and deleting (useDelete<Resource>) resources.
  • Query invalidation: Allow manual refresh using useRefresh<Resources> to update displayed data.
  • Flexibility: Adaptable to various resources by changing data types and API endpoints.

Provided Hooks: ​

  1. useGet<Resources>:
    • Fetches a paginated list of resources with optional search, sorting, or filtering functionality.
    • Uses useAuthenticatedQuery for secured access if applicable.
  2. useCreate<Resource>:
    • Creates a new resource on the server with provided data.
    • Uses useAuthenticatedMutation for secured access if applicable.
  3. useDelete<Resource>:
    • Deletes a specific resource by its ID.
    • Uses useAuthenticatedMutation for secured access if applicable.
  4. useUpdate<Resource>:
    • Updates an existing resource by its ID with provided data.
    • Uses useAuthenticatedMutation for secured access if applicable.
  5. useGet<Resource>:
    • Fetches a single resource by its ID.
    • Uses useAuthenticatedQuery for secured access if applicable.
    • Disabled if no ID is provided.
  6. useRefresh<Resources>:
    • Manually refreshes the useGet<Resources> query cache.

Benefits: ​

  • Improved code organization and reusability across components for managing resources.
  • Consistent approach to data fetching, manipulation, and caching with React Query.
  • Enhanced type safety and maintainability.

Additional Notes: ​

  • Replace <Resource>Type with the actual interface name used in your code for specific resources.
  • Adapt data types and API endpoints based on your resource types and server structure.
  • Consider using these hooks in conjunction with React components for displaying and managing resources.
  • Explore React Query's documentation for advanced caching and refetching options.