Implementation:Risingwavelabs Risingwave UseFetch Hook

Property	Value
Module	useFetch React Hook
File	dashboard/lib/api/fetch.ts
Language	TypeScript
Lines	61
Type	React Hook
Dependencies	React (useEffect, useState), useErrorToast

Overview

fetch.ts provides the useFetch React hook for declarative data fetching with optional polling and error handling. It accepts a fetch function, an optional polling interval in milliseconds, and a conditional when flag. The hook uses useEffect to call the fetch function on mount and optionally set up a setInterval for periodic refreshing. Errors are displayed via the useErrorToast hook. This is the primary data-fetching abstraction used across all dashboard pages, providing a consistent pattern for loading and refreshing data from the meta node API.

Code Reference

Source Location

dashboard/lib/api/fetch.ts

Signature

export default function useFetch<T>(
  fetchFn: () => Promise<T>,
  intervalMs: number | null = null,
  when: boolean = true
): { response: T | undefined }

Import

import useFetch from "../lib/api/fetch"

I/O Contract

Parameters

Parameter	Type	Default	Description
fetchFn	() => Promise<T>	(required)	Async function that fetches data. Important: intentionally excluded from the useEffect dependency array to prevent infinite re-render loops
intervalMs	null	null	Polling interval in milliseconds. If null, data is fetched only once on mount
when	boolean	true	Conditional flag. If false, the fetch function is not called

Return Value

Property	Type	Description
response	undefined	The fetched data, or undefined if not yet loaded or if an error occurred

Error Handling

Errors thrown by fetchFn are caught and displayed to the user via the useErrorToast hook. The error is not rethrown, so the component continues to render with response as undefined.

Effect Dependencies

The useEffect depends on [toast, intervalMs, when]. The fetchFn parameter is deliberately excluded from dependencies to avoid infinite re-render loops, as documented in the source code comment.

Usage Examples

One-Time Fetch

import useFetch from "../lib/api/fetch"
import { getClusterInfoComputeNode } from "../lib/api/cluster"

function MyComponent() {
  // Fetch compute nodes once on mount
  const { response: computeNodes } = useFetch(getClusterInfoComputeNode)

  if (!computeNodes) return <Spinner />
  return <div>{computeNodes.length} nodes</div>
}

Periodic Polling

import useFetch from "../lib/api/fetch"
import { getRelations } from "../lib/api/streaming"

function RelationList() {
  // Fetch relations every 5 seconds
  const { response: relations } = useFetch(getRelations, 5000)

  return <ul>{relations?.map((r) => <li key={r.id}>{r.name}</li>)}</ul>
}

Conditional Fetch

import useFetch from "../lib/api/fetch"

function ConditionalComponent({ enabled }: { enabled: boolean }) {
  // Only fetch when enabled is true
  const { response: data } = useFetch(fetchData, null, enabled)

  return <div>{data ? "Loaded" : "Not loaded"}</div>
}

Related Pages

• Risingwavelabs_Risingwave_Dashboard_API_Client - The HTTP client whose methods are typically passed as the fetchFn parameter
• Risingwavelabs_Risingwave_Cluster_API - Cluster API functions commonly used with useFetch
• Risingwavelabs_Risingwave_Streaming_API_Functions - Streaming API functions commonly used with useFetch
• Risingwavelabs_Risingwave_Cluster_Page - Example page that uses useFetch indirectly via cluster API calls
• Risingwavelabs_Risingwave_Relation_Graph_Page - Example page that uses useFetch for relation and dependency data