[vtadmin-web] Add comments + 'options' parameter to API hooks

web/vtadmin/src/hooks/api.ts

@@ -1,4 +1,4 @@
-import { useQuery, useQueryClient } from 'react-query';
+import { useQuery, useQueryClient, UseQueryOptions } from 'react-query';
 import {
     fetchClusters,
     fetchGates,
@@ -10,11 +10,35 @@ import {
 } from '../api/http';
 import { vtadmin as pb } from '../proto/vtadmin';
 
-export const useClusters = () => useQuery<pb.Cluster[], Error>(['clusters'], fetchClusters);
-export const useGates = () => useQuery<pb.VTGate[], Error>(['gates'], fetchGates);
-export const useKeyspaces = () => useQuery<pb.Keyspace[], Error>(['keyspaces'], fetchKeyspaces);
-export const useSchemas = () => useQuery<pb.Schema[], Error>(['schemas'], fetchSchemas);
-export const useTablets = () => useQuery<pb.Tablet[], Error>(['tablets'], fetchTablets);
+/**
+ * useClusters is a query hook that fetches all clusters VTAdmin is configured to discover.
+ */
+export const useClusters = (options?: UseQueryOptions<pb.Cluster[], Error> | undefined) =>
+    useQuery(['clusters'], fetchClusters, options);
+
+/**
+ * useGates is a query hook that fetches all VTGates across every cluster.
+ */
+export const useGates = (options?: UseQueryOptions<pb.VTGate[], Error> | undefined) =>
+    useQuery(['gates'], fetchGates, options);
+
+/**
+ * useKeyspaces is a query hook that fetches all keyspaces across every cluster.
+ */
+export const useKeyspaces = (options?: UseQueryOptions<pb.Keyspace[], Error> | undefined) =>
+    useQuery(['keyspaces'], fetchKeyspaces, options);
+
+/**
+ * useSchemas is a query hook that fetches all schemas across every cluster.
+ */
+export const useSchemas = (options?: UseQueryOptions<pb.Schema[], Error> | undefined) =>
+    useQuery(['schemas'], fetchSchemas, options);
+
+/**
+ * useTablets is a query hook that fetches all tablets across every cluster.
+ */
+export const useTablets = (options?: UseQueryOptions<pb.Tablet[], Error> | undefined) =>
+    useQuery(['tablets'], fetchTablets, options);
 
 export interface TableDefinition {
     cluster?: pb.Schema['cluster'];
@@ -25,14 +49,16 @@ export interface TableDefinition {
     tableDefinition?: pb.Schema['table_definitions'][0];
 }
 
-// useTableDefinitions is a helper hook for when a flattened list
-// of table definitions (across all keyspaces and clusters) is required,
-// instead of the default vtadmin-api/Vitess grouping of schemas by keyspace.
-//
-// Under the hood, this calls the useSchemas hook and therefore uses
-// the same query cache.
-export const useTableDefinitions = () => {
-    const { data, ...query } = useSchemas();
+/**
+ * useTableDefinitions is a helper hook for when a flattened list
+ * of table definitions (across all keyspaces and clusters) is required,
+ * instead of the default vtadmin-api/Vitess grouping of schemas by keyspace.
+ *
+ * Under the hood, this calls the useSchemas hook and therefore uses
+ * the same query cache.
+ */
+export const useTableDefinitions = (...args: Parameters<typeof useSchemas>) => {
+    const { data, ...query } = useSchemas(...args);
 
     if (!Array.isArray(data)) {
         return { data, ...query };
@@ -52,9 +78,12 @@ export const useTableDefinitions = () => {
     return { ...query, data: tds };
 };
 
-export const useSchema = (params: FetchSchemaParams) => {
+/**
+ * useSchema is a query hook that fetches a single schema for the given parameters.
+ */
+export const useSchema = (params: FetchSchemaParams, options?: UseQueryOptions<pb.Schema, Error> | undefined) => {
     const queryClient = useQueryClient();
-    return useQuery<pb.Schema, Error>(['schema', params], () => fetchSchema(params), {
+    return useQuery(['schema', params], () => fetchSchema(params), {
         initialData: () => {
             const schemas = queryClient.getQueryData<pb.Schema[]>('schemas');
             return (schemas || []).find(
@@ -64,5 +93,6 @@ export const useSchema = (params: FetchSchemaParams) => {
                     s.table_definitions.find((td) => td.name === params.table)
             );
         },
+        ...options,
     });
 };