[Security Solution][Endpoint] Add default query options to React-Query client and adjust existing hooks (#131165)

* Expose the QueryClient used in the app as SecuritySolutionQueryClient
* Add defaults to `SecuritySolutionQueryClient`
* Update existing hooks and remove defaults from useQuery
* Fix option Type for hooks that use `useMutation()` from React-Query
This commit is contained in:
Paul Tavares 2022-04-29 10:04:25 -04:00 committed by GitHub
parent 6bc515fb64
commit 6e6c9614f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 83 additions and 63 deletions

View file

@ -8,14 +8,38 @@
import React, { memo, PropsWithChildren, useMemo } from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
type QueryClientOptionsProp = ConstructorParameters<typeof QueryClient>[0];
/**
* A security solution specific react-query query client that sets defaults
*/
export class SecuritySolutionQueryClient extends QueryClient {
constructor(options: QueryClientOptionsProp = {}) {
const optionsWithDefaults: QueryClientOptionsProp = {
...options,
defaultOptions: {
...(options.defaultOptions ?? {}),
queries: {
refetchIntervalInBackground: false,
refetchOnWindowFocus: false,
refetchOnMount: true,
keepPreviousData: true,
...(options?.defaultOptions?.queries ?? {}),
},
},
};
super(optionsWithDefaults);
}
}
export type ReactQueryClientProviderProps = PropsWithChildren<{
queryClient?: QueryClient;
queryClient?: SecuritySolutionQueryClient;
}>;
export const ReactQueryClientProvider = memo<ReactQueryClientProviderProps>(
({ queryClient, children }) => {
const client = useMemo(() => {
return queryClient || new QueryClient();
return queryClient || new SecuritySolutionQueryClient();
}, [queryClient]);
return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
}

View file

@ -7,14 +7,19 @@
import pMap from 'p-map';
import { HttpFetchError } from '@kbn/core/public';
import { ExceptionListItemSchema } from '@kbn/securitysolution-io-ts-list-types';
import { useMutation, UseMutationResult, UseQueryOptions } from 'react-query';
import { useMutation, UseMutationOptions, UseMutationResult } from 'react-query';
import { ExceptionsListApiClient } from '../../services/exceptions_list/exceptions_list_api_client';
const DEFAULT_OPTIONS = Object.freeze({});
export function useBulkDeleteArtifact(
exceptionListApiClient: ExceptionsListApiClient,
customOptions: UseQueryOptions<ExceptionListItemSchema[], HttpFetchError> = DEFAULT_OPTIONS,
customOptions: UseMutationOptions<
ExceptionListItemSchema[],
HttpFetchError,
Array<{ itemId?: string; id?: string }>,
() => void
> = DEFAULT_OPTIONS,
options: {
concurrency: number;
} = {

View file

@ -10,14 +10,19 @@ import {
UpdateExceptionListItemSchema,
ExceptionListItemSchema,
} from '@kbn/securitysolution-io-ts-list-types';
import { useMutation, UseMutationResult, UseQueryOptions } from 'react-query';
import { useMutation, UseMutationOptions, UseMutationResult } from 'react-query';
import { ExceptionsListApiClient } from '../../services/exceptions_list/exceptions_list_api_client';
const DEFAULT_OPTIONS = Object.freeze({});
export function useBulkUpdateArtifact(
exceptionListApiClient: ExceptionsListApiClient,
customOptions: UseQueryOptions<ExceptionListItemSchema[], HttpFetchError> = DEFAULT_OPTIONS,
customOptions: UseMutationOptions<
ExceptionListItemSchema[],
HttpFetchError,
UpdateExceptionListItemSchema[],
() => void
> = DEFAULT_OPTIONS,
options: {
concurrency: number;
} = {

View file

@ -9,14 +9,19 @@ import {
ExceptionListItemSchema,
} from '@kbn/securitysolution-io-ts-list-types';
import { HttpFetchError } from '@kbn/core/public';
import { useMutation, UseMutationResult, UseQueryOptions } from 'react-query';
import { useMutation, UseMutationOptions, UseMutationResult } from 'react-query';
import { ExceptionsListApiClient } from '../../services/exceptions_list/exceptions_list_api_client';
const DEFAULT_OPTIONS = Object.freeze({});
export function useCreateArtifact(
exceptionListApiClient: ExceptionsListApiClient,
customOptions: UseQueryOptions<ExceptionListItemSchema, HttpFetchError> = DEFAULT_OPTIONS
customOptions: UseMutationOptions<
ExceptionListItemSchema,
HttpFetchError,
CreateExceptionListItemSchema,
() => void
> = DEFAULT_OPTIONS
): UseMutationResult<
ExceptionListItemSchema,
HttpFetchError,

View file

@ -6,14 +6,19 @@
*/
import { ExceptionListItemSchema } from '@kbn/securitysolution-io-ts-list-types';
import { HttpFetchError } from '@kbn/core/public';
import { useMutation, UseMutationResult, UseQueryOptions } from 'react-query';
import { useMutation, UseMutationOptions, UseMutationResult } from 'react-query';
import { ExceptionsListApiClient } from '../../services/exceptions_list/exceptions_list_api_client';
const DEFAULT_OPTIONS = Object.freeze({});
export function useDeleteArtifact(
exceptionListApiClient: ExceptionsListApiClient,
customOptions: UseQueryOptions<ExceptionListItemSchema, HttpFetchError> = DEFAULT_OPTIONS
customOptions: UseMutationOptions<
ExceptionListItemSchema,
HttpFetchError,
{ itemId?: string; id?: string },
() => void
> = DEFAULT_OPTIONS
): UseMutationResult<
ExceptionListItemSchema,
HttpFetchError,

View file

@ -9,24 +9,17 @@ import { HttpFetchError } from '@kbn/core/public';
import { QueryObserverResult, useQuery, UseQueryOptions } from 'react-query';
import { ExceptionsListApiClient } from '../../services/exceptions_list/exceptions_list_api_client';
const DEFAULT_OPTIONS = Object.freeze({});
export function useGetArtifact(
exceptionListApiClient: ExceptionsListApiClient,
itemId?: string,
id?: string,
customQueryOptions: UseQueryOptions<ExceptionListItemSchema, HttpFetchError> = DEFAULT_OPTIONS
customQueryOptions?: UseQueryOptions<ExceptionListItemSchema, HttpFetchError>
): QueryObserverResult<ExceptionListItemSchema, HttpFetchError> {
return useQuery<ExceptionListItemSchema, HttpFetchError>(
['get', exceptionListApiClient, itemId, id],
() => {
return exceptionListApiClient.get(itemId, id);
},
{
refetchIntervalInBackground: false,
refetchOnWindowFocus: false,
refetchOnMount: true,
...customQueryOptions,
}
customQueryOptions
);
}

View file

@ -31,9 +31,7 @@ export function useListArtifact(
excludedPolicies: string[];
}> = DEFAULT_OPTIONS,
searchableFields: MaybeImmutable<string[]> = DEFAULT_EXCEPTION_LIST_ITEM_SEARCHABLE_FIELDS,
customQueryOptions: Partial<
UseQueryOptions<FoundExceptionListItemSchema, HttpFetchError>
> = DEFAULT_OPTIONS,
customQueryOptions?: Partial<UseQueryOptions<FoundExceptionListItemSchema, HttpFetchError>>,
customQueryIds: string[] = []
): QueryObserverResult<FoundExceptionListItemSchema, HttpFetchError> {
const {
@ -64,12 +62,6 @@ export function useListArtifact(
return result;
},
{
refetchIntervalInBackground: false,
refetchOnWindowFocus: false,
refetchOnMount: true,
keepPreviousData: true,
...customQueryOptions,
}
customQueryOptions
);
}

View file

@ -21,9 +21,7 @@ export function useSummaryArtifact(
policies: string[];
}> = DEFAULT_OPTIONS,
searchableFields: MaybeImmutable<string[]> = DEFAULT_EXCEPTION_LIST_ITEM_SEARCHABLE_FIELDS,
customQueryOptions: Partial<
UseQueryOptions<ExceptionListSummarySchema, HttpFetchError>
> = DEFAULT_OPTIONS
customQueryOptions: Partial<UseQueryOptions<ExceptionListSummarySchema, HttpFetchError>>
): QueryObserverResult<ExceptionListSummarySchema, HttpFetchError> {
const { filter = '', policies = [] } = options;
@ -37,12 +35,6 @@ export function useSummaryArtifact(
})
);
},
{
refetchIntervalInBackground: false,
refetchOnWindowFocus: false,
refetchOnMount: true,
keepPreviousData: true,
...customQueryOptions,
}
customQueryOptions
);
}

View file

@ -9,14 +9,19 @@ import {
ExceptionListItemSchema,
} from '@kbn/securitysolution-io-ts-list-types';
import { HttpFetchError } from '@kbn/core/public';
import { useMutation, UseMutationResult, UseQueryOptions } from 'react-query';
import { useMutation, UseMutationOptions, UseMutationResult } from 'react-query';
import { ExceptionsListApiClient } from '../../services/exceptions_list/exceptions_list_api_client';
const DEFAULT_OPTIONS = Object.freeze({});
export function useUpdateArtifact(
exceptionListApiClient: ExceptionsListApiClient,
customQueryOptions: UseQueryOptions<ExceptionListItemSchema, HttpFetchError> = DEFAULT_OPTIONS
customQueryOptions: UseMutationOptions<
ExceptionListItemSchema,
HttpFetchError,
UpdateExceptionListItemSchema,
() => void
> = DEFAULT_OPTIONS
): UseMutationResult<
ExceptionListItemSchema,
HttpFetchError,

View file

@ -13,7 +13,7 @@ import { I18nProvider } from '@kbn/i18n-react';
import type { PackageInfo } from '@kbn/fleet-plugin/common/types';
import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
import { QueryClient } from 'react-query';
import { SecuritySolutionQueryClient } from '../../../../../common/containers/query_client/query_client_provider';
import {
AppContextTestRender,
createAppRootMockRenderer,
@ -85,7 +85,7 @@ export const createFleetContextRendererMock = (): AppContextTestRender => {
additionalMiddleware: [mockedContext.middlewareSpy.actionSpyMiddleware],
});
const queryClient = new QueryClient();
const queryClient = new SecuritySolutionQueryClient();
const Wrapper: RenderOptions['wrapper'] = ({ children }) => {
const services = useMemo(() => {

View file

@ -8,8 +8,10 @@
import React, { memo, PropsWithChildren } from 'react';
import { Provider as ReduxStoreProvider } from 'react-redux';
import { Store } from 'redux';
import type { QueryClient } from 'react-query';
import { ReactQueryClientProvider } from '../../../../../../common/containers/query_client/query_client_provider';
import {
ReactQueryClientProvider,
SecuritySolutionQueryClient,
} from '../../../../../../common/containers/query_client/query_client_provider';
import { SecuritySolutionStartDependenciesContext } from '../../../../../../common/components/user_privileges/endpoint/security_solution_start_dependencies';
import { CurrentLicense } from '../../../../../../common/components/current_license';
import { StartPlugins } from '../../../../../../types';
@ -17,7 +19,7 @@ import { StartPlugins } from '../../../../../../types';
export type RenderContextProvidersProps = PropsWithChildren<{
store: Store;
depsStart: Pick<StartPlugins, 'data' | 'fleet'>;
queryClient?: QueryClient;
queryClient?: SecuritySolutionQueryClient;
}>;
export const RenderContextProviders = memo<RenderContextProvidersProps>(

View file

@ -40,11 +40,11 @@ export function useGetEndpointSpecificPolicies(
},
});
},
{
refetchIntervalInBackground: false,
refetchOnWindowFocus: false,
onError,
}
onError
? {
onError,
}
: undefined
);
}
@ -56,7 +56,7 @@ export function useGetEndpointSpecificPolicies(
*/
export function useGetAgentCountForPolicy({
policyIds,
customQueryOptions = {},
customQueryOptions,
}: {
policyIds: string[];
customQueryOptions?: UseQueryOptions<GetAgentPoliciesResponse, HttpFetchError>;
@ -72,11 +72,7 @@ export function useGetAgentCountForPolicy({
},
});
},
{
refetchIntervalInBackground: false,
refetchOnWindowFocus: false,
...customQueryOptions,
}
customQueryOptions
);
}
@ -84,7 +80,7 @@ export function useGetAgentCountForPolicy({
* This hook returns the endpoint security package which contains endpoint version info
*/
export function useGetEndpointSecurityPackage({
customQueryOptions = {},
customQueryOptions,
}: {
customQueryOptions?: UseQueryOptions<GetPackagesResponse['items'][number], HttpFetchError>;
}): QueryObserverResult<GetPackagesResponse['items'][number], HttpFetchError> {
@ -94,10 +90,6 @@ export function useGetEndpointSecurityPackage({
() => {
return sendGetEndpointSecurityPackage(http);
},
{
refetchIntervalInBackground: false,
refetchOnWindowFocus: false,
...customQueryOptions,
}
customQueryOptions
);
}