diff --git a/web/vtadmin/src/hooks/api.ts b/web/vtadmin/src/hooks/api.ts index 606a808d1d9..9fe30fa99c1 100644 --- a/web/vtadmin/src/hooks/api.ts +++ b/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(['clusters'], fetchClusters); -export const useGates = () => useQuery(['gates'], fetchGates); -export const useKeyspaces = () => useQuery(['keyspaces'], fetchKeyspaces); -export const useSchemas = () => useQuery(['schemas'], fetchSchemas); -export const useTablets = () => useQuery(['tablets'], fetchTablets); +/** + * useClusters is a query hook that fetches all clusters VTAdmin is configured to discover. + */ +export const useClusters = (options?: UseQueryOptions | undefined) => + useQuery(['clusters'], fetchClusters, options); + +/** + * useGates is a query hook that fetches all VTGates across every cluster. + */ +export const useGates = (options?: UseQueryOptions | undefined) => + useQuery(['gates'], fetchGates, options); + +/** + * useKeyspaces is a query hook that fetches all keyspaces across every cluster. + */ +export const useKeyspaces = (options?: UseQueryOptions | undefined) => + useQuery(['keyspaces'], fetchKeyspaces, options); + +/** + * useSchemas is a query hook that fetches all schemas across every cluster. + */ +export const useSchemas = (options?: UseQueryOptions | undefined) => + useQuery(['schemas'], fetchSchemas, options); + +/** + * useTablets is a query hook that fetches all tablets across every cluster. + */ +export const useTablets = (options?: UseQueryOptions | 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) => { + 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 | undefined) => { const queryClient = useQueryClient(); - return useQuery(['schema', params], () => fetchSchema(params), { + return useQuery(['schema', params], () => fetchSchema(params), { initialData: () => { const schemas = queryClient.getQueryData('schemas'); return (schemas || []).find( @@ -64,5 +93,6 @@ export const useSchema = (params: FetchSchemaParams) => { s.table_definitions.find((td) => td.name === params.table) ); }, + ...options, }); };