diff --git a/changes/issue-2785-manage-queries-fix b/changes/issue-2785-manage-queries-fix new file mode 100644 index 0000000000..e287060d14 --- /dev/null +++ b/changes/issue-2785-manage-queries-fix @@ -0,0 +1 @@ +* Fix memoization of query table data on manage queries page \ No newline at end of file diff --git a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx index 63cd2d05bb..ecc858c1b5 100644 --- a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx +++ b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx @@ -1,8 +1,14 @@ -import React, { useContext, useCallback, useEffect, useState } from "react"; +import React, { + useContext, + useCallback, + useEffect, + useMemo, + useState, +} from "react"; import { useDispatch } from "react-redux"; import { useQuery } from "react-query"; import { push } from "react-router-redux"; -import { memoize, pick } from "lodash"; +import { pick } from "lodash"; import { AppContext } from "context/app"; import { performanceIndicator } from "fleet/helpers"; @@ -67,10 +73,9 @@ const PLATFORM_FILTER_OPTIONS = [ }, ]; -const memoizedSqlTables = memoize(sqlTools.parseSqlTables); const getPlatforms = (queryString: string): string[] => sqlTools - .listCompatiblePlatforms(memoizedSqlTables(queryString)) + .listCompatiblePlatforms(sqlTools.parseSqlTables(queryString)) .filter((p: string) => PLATFORMS.includes(p)); const enhanceQuery = (q: IQuery) => { @@ -99,33 +104,41 @@ const ManageQueriesPage = (): JSX.Element => { ); const { - data: fleetQueriesByPlatform, + data: fleetQueries, error: fleetQueriesError, isLoading: isLoadingFleetQueries, refetch: refetchFleetQueries, - } = useQuery( + } = useQuery( "fleet queries by platform", () => fleetQueriesAPI.loadAll(), { // refetchOnMount: false, // refetchOnReconnect: false, // refetchOnWindowFocus: false, - select: (data: IFleetQueriesResponse) => - data.queries.reduce( - (dictionary: IQueriesByPlatform, q) => { - const queryEntry = enhanceQuery(q); - dictionary.all.push(queryEntry); - queryEntry.platforms.forEach((platform) => - dictionary[platform]?.push(queryEntry) - ); - - return dictionary; - }, - { all: [], darwin: [], linux: [], windows: [] } - ), + select: (data: IFleetQueriesResponse) => data.queries, } ); + const fleetQueriesByPlatform = useMemo(() => { + const emptyDictionary: IQueriesByPlatform = { + all: [], + darwin: [], + linux: [], + windows: [], + }; + const queriesByPlatform = fleetQueries?.reduce( + (dict: IQueriesByPlatform, q: IQuery) => { + const query = enhanceQuery(q); + dict.all.push(query); + query.platforms.forEach((platform) => dict[platform]?.push(query)); + return dict; + }, + emptyDictionary + ); + + return queriesByPlatform || emptyDictionary; + }, [fleetQueries]); + useEffect(() => { if (!isLoadingFleetQueries && fleetQueriesByPlatform) { let queriesList = fleetQueriesByPlatform[selectedPlatform];