Refactor Components to Use TanStack Query for Data Fetching

[craigyu]

Description:

Refactor all components that are currently fetching data directly, to use TanStack Query if they are not already. The current approach involves manual state management and inconsistent error handling, making it challenging to maintain and test.

Components to Refactor

The following components currently have direct data-fetching logic and should be refactored to use TanStack Query for a more consistent and efficient approach to managing server state:

• ManagePermissions.vue: Currently handles API calls internally for fetching permission details. Refactor to use TanStack Query to take advantage of features like caching and automatic background updates.
• MyPermissions.vue: Fetches user permissions directly, which results in manual state handling and less reusable code. Refactor to use TanStack Query to ensure a consistent and more maintainable data-fetching approach.
• GrantAccess.vue: Manages data related to user identity and roles, requiring multiple direct API calls. Refactor this component to use TanStack Query for easier state synchronization and improved performance.
• UserPermissionHistoryTable/index.vue: This component fetches user permission history data manually, which can benefit from TanStack Query's caching and background refetching capabilities.
• ForestClientCard.vue: Handles fetching forest client data manually, which leads to redundant code. Refactor to utilize TanStack Query, improving code reuse and consistency.
• GrantApplicationAdmin.vue and GrantDelegatedAdmin.vue: These components also include direct API calls for user roles and access grants. Refactor them to use TanStack Query for a consistent approach to data fetching.
• Implement display name #1128, #1603, #1604 along the way

Specific Improvements

• Replace all direct API calls in the identified components with TanStack Query hooks.
• Utilize features like caching, background updates, and retry logic provided by TanStack Query.
• Remove any manual loading state, error handling, or retry mechanisms in favor of TanStack Query’s built-in capabilities.
• Ensure that all refactored components use the QueryClient for centralized state management.

Acceptance Criteria

• [ ] All identified components use TanStack Query hooks for data fetching instead of manual API calls.
• [ ] Manual state handling for loading and errors is removed, and TanStack Query’s built-in state management is utilized.
• [ ] Data fetching is consistent across the application, with TanStack Query providing caching and background updates.
• [ ] Display name implemented
• [ ] Manual testing confirms that data is fetched, cached (data cached in the user profile component, possibly data on the user history page, and data on the username validation component and client numbers on the add user permission page), and updated seamlessly without any regression in functionality.
• [ ] #1128
• [ ] #1603
• [ ] #1604

[craigyu]

User Permissions History -> Permissions History