use-mcp-request.ts

Overview

The use-mcp-request.ts file provides a collection of custom React hooks built on top of the @tanstack/react-query library to interact with MCP (likely "Multi-Cloud Platform" or similar) server-related backend APIs. It encapsulates the logic for CRUD operations, importing/exporting MCP servers, managing associated tools, and testing or caching server tools.

These hooks enable components within the application to easily perform asynchronous queries and mutations related to MCP servers, with built-in support for caching, pagination, debounced search, and optimistic UI updates via React Query's cache invalidation.

Detailed Explanation of Exports

Enum: McpApiAction

Defines string constants used as query or mutation keys for React Query. This helps organize and uniquely identify different API interactions related to MCP servers.

Hook: useListMcpServer

Fetches a paginated list of MCP servers with optional search filtering.

• Returns:

  • data: IMcpServerListResponse — Contains total count and list of MCP servers.

  • loading: boolean — Loading state of the query.

  • handleInputChange: (event) => void — Handler to update the search input.

  • setPagination: (pagination) => void — Function to update pagination state.

  • searchString: string — Current search string input.

  • pagination: { current, pageSize, total } — Pagination info.

• Key Features:

  • Uses a debounced search input to avoid excessive API calls.

  • Pagination state synced with router (via useGetPaginationWithRouter).

  • Query cache is not garbage collected (gcTime: 0).

• Usage Example:

  const { data, loading, handleInputChange, setPagination, searchString, pagination } = useListMcpServer();
  

Hook: useGetMcpServer(id: string)

Fetches details of a single MCP server by its ID.

• Parameters:

  • id: string — MCP server identifier.

• Returns:

  • data: IMcpServer — MCP server data.

  • loading: boolean — Loading state.

  • id: string — The MCP server ID used.

• Notes:

  • Query is disabled if id is falsy.

• Usage Example:

  const { data, loading } = useGetMcpServer('server-id-123');
  

Hook: useCreateMcpServer

Mutation hook to create a new MCP server.

• Returns:

  • data: mutation response code (number).

  • loading: boolean — Mutation loading state.

  • createMcpServer: (params: Record<string, any>) => Promise<number> — Function to invoke the creation.

• Behavior:

  • On success (code === 0), shows success message and invalidates the MCP server list query to refresh data.

• Usage Example:

  const { createMcpServer, loading } = useCreateMcpServer();
  await createMcpServer({ name: 'New MCP Server', ... });
  

Hook: useUpdateMcpServer

Mutation hook to update an existing MCP server.

• Returns:

  • data: mutation response code (number).

  • loading: boolean.

  • updateMcpServer: (params: Record<string, any>) => Promise<number>.

• Behavior:

  • Shows success message and refreshes MCP server list upon success.

• Usage Example:

  const { updateMcpServer, loading } = useUpdateMcpServer();
  await updateMcpServer({ id: 'server-id', name: 'Updated Name' });
  

Hook: useDeleteMcpServer

Mutation hook to delete MCP servers by IDs.

• Returns:

  • data: mutation response data.

  • loading: boolean.

  • deleteMcpServer: (ids: string[]) => Promise<any>.

• Behavior:

  • Shows success message and invalidates MCP server list on success.

• Usage Example:

  const { deleteMcpServer, loading } = useDeleteMcpServer();
  await deleteMcpServer(['id1', 'id2']);
  

Hook: useImportMcpServer

Mutation hook to import MCP servers in bulk.

• Returns:

  • data: mutation response data.

  • loading: boolean.

  • importMcpServer: (params: IImportMcpServersRequestBody) => Promise<any>.

• Behavior:

  • Shows operation success message and refreshes MCP server list.

• Usage Example:

  const { importMcpServer, loading } = useImportMcpServer();
  await importMcpServer({ servers: [...] });
  

Hook: useExportMcpServer

Mutation hook to export MCP servers by IDs.

• Returns:

  • data: ResponseType<IExportedMcpServers>.

  • loading: boolean.

  • exportMcpServer: (ids: string[]) => Promise<ResponseType<IExportedMcpServers>>.

• Behavior:

  • Shows success message on completion.

• Usage Example:

  const { exportMcpServer, loading } = useExportMcpServer();
  const exportedData = await exportMcpServer(['id1', 'id2']);
  

Hook: useListMcpServerTools

Queries MCP server tools for a dynamic list of MCP server IDs.

• State:

  • ids: string[] — MCP server IDs for which to fetch tools.

  • setIds: (ids: string[]) => void — Setter for ids.

• Returns:

  • data: IMCPToolRecord.

  • loading: boolean.

  • setIds: Setter for IDs.

• Behavior:

  • Query runs only if ids length > 0.

• Usage Example:

  const { data, loading, setIds } = useListMcpServerTools();
  setIds(['server1', 'server2']);
  

Hook: useTestMcpServer

Mutation hook to test MCP servers with provided parameters.

• Returns:

  • data: ResponseType<IMCPTool[]>.

  • loading: boolean.

  • testMcpServer: (params: ITestMcpRequestBody) => Promise<ResponseType<IMCPTool[]>>.

• Usage Example:

  const { testMcpServer, loading } = useTestMcpServer();
  const result = await testMcpServer({ serverId: 'id', toolParams: {...} });
  

Hook: useCacheMcpServerTool

Mutation hook to cache a MCP server tool.

• Returns:

  • data: mutation response data.

  • loading: boolean.

  • cacheMcpServerTool: (params: Record<string, any>) => Promise<any>.

• Usage Example:

  const { cacheMcpServerTool, loading } = useCacheMcpServerTool();
  await cacheMcpServerTool({ toolId: 'tool1' });
  

Hook: useTestMcpServerTool

Mutation hook to test a MCP server tool.

• Returns:

  • data: mutation response data.

  • loading: boolean.

  • testMcpServerTool: (params: Record<string, any>) => Promise<any>.

• Usage Example:

  const { testMcpServerTool, loading } = useTestMcpServerTool();
  await testMcpServerTool({ toolId: 'tool1', testParams: {...} });
  

Important Implementation Details

• React Query Integration:
  This file heavily leverages React Query's useQuery for fetching and useMutation for modifying data with automatic cache management and invalidation.

• Debounced Search:
  The listing hook (useListMcpServer) debounces search input by 500ms using the useDebounce hook from ahooks to reduce API calls.

• Cache Invalidation:
  On successful mutations (create, update, delete, import), the MCP server list query cache is invalidated to ensure UI reflects fresh data.

• Internationalization:
  Success messages use the i18n module for localized feedback to users.

• Custom Logic Hooks:
  Pagination and search state management are delegated to custom hooks useGetPaginationWithRouter and useHandleSearchChange imported from a local ./logic-hooks module, likely syncing state with the URL router.

Interaction with Other Parts of the System

• API Service Layer:
  The hooks call API functions from mcpServerService and listMcpServers imported from @/services/mcp-server-service. This service abstracts the actual HTTP requests.

• Interfaces and Types:
  Data types such as IMcpServer, IMcpServerListResponse, IExportedMcpServers, etc., are imported from the @/interfaces/database/mcp and @/interfaces/request/mcp modules ensuring type safety and consistent data structures.

• UI Feedback Component:
  User notifications are displayed using the message component from @/components/ui/message.

• Localization:
  The i18n module (@/locales/config) is used for translating user messages.

• React Query Client:
  The hooks use the useQueryClient from React Query to manage cache invalidation and refetching strategies.

Visual Diagram: Hook Structure and Data Flow

flowchart TD
    subgraph Queries
        useListMcpServer["useListMcpServer"]
        useGetMcpServer["useGetMcpServer"]
        useListMcpServerTools["useListMcpServerTools"]
    end

    subgraph Mutations
        useCreateMcpServer["useCreateMcpServer"]
        useUpdateMcpServer["useUpdateMcpServer"]
        useDeleteMcpServer["useDeleteMcpServer"]
        useImportMcpServer["useImportMcpServer"]
        useExportMcpServer["useExportMcpServer"]
        useTestMcpServer["useTestMcpServer"]
        useCacheMcpServerTool["useCacheMcpServerTool"]
        useTestMcpServerTool["useTestMcpServerTool"]
    end

    Queries -->|fetch data| mcpServerService["mcpServerService API"]
    Mutations -->|send mutation| mcpServerService

    useListMcpServer -->|pagination, search| useHandleSearchChange["useHandleSearchChange"]
    useListMcpServer --> useGetPaginationWithRouter["useGetPaginationWithRouter"]

    mcpServerService --> message["message (UI feedback)"]
    mcpServerService --> i18n["i18n (localization)"]

Summary

The use-mcp-request.ts file is a centralized module that provides typed, reusable React hooks to interact with MCP server backend APIs efficiently. It abstracts complex asynchronous logic including caching, invalidation, debounced search, pagination, and user notifications, enabling UI components to focus on rendering and user experience. It also promotes consistent API usage patterns and integrates seamlessly with the application's localization, state management, and service layers.