[Security Solution] Fixes exception modal not loading content (#72770)

## Summary

When using the `useFetchIndexPatterns` hook multiple times within a component (e.g. add_exception_modal & edit_exception_modal), the `apolloClient` will perform `queryDeduplication` and prevent the first query from executing. A deep compare is not performed on `indices`, so another field must be passed to circumvent this.


For all the lovely details, see apollographql/react-apollo#2202

Note: As of yesterday, [support has been added](apollographql/apollo-client#6526) for configuring `queryDeduplicating` via `context`. This is available in `apollo-client` `2.6`, so when upgrading (currently on `2.3.8`) we can swap out this workaround to leverage this functionality.

Note II: This [link](https://www.apollographql.com/docs/link/links/dedup/#context) may also be an option after upgrading to a supported version.

x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.tsx

@@ -114,9 +114,12 @@ export const AddExceptionModal = memo(function AddExceptionModal({
  const { loading: isSignalIndexLoading, signalIndexName } = useSignalIndex();
  const [
  { isLoading: isSignalIndexPatternLoading, indexPatterns: signalIndexPatterns },
- ] = useFetchIndexPatterns(signalIndexName !== null ? [signalIndexName] : []);
+ ] = useFetchIndexPatterns(signalIndexName !== null ? [signalIndexName] : [], 'signals');
 
- const [{ isLoading: isIndexPatternLoading, indexPatterns }] = useFetchIndexPatterns(ruleIndices);
+ const [{ isLoading: isIndexPatternLoading, indexPatterns }] = useFetchIndexPatterns(
+ ruleIndices,
+ 'rules'
+ );
 
  const onError = useCallback(
  (error: Error) => {

x-pack/plugins/security_solution/public/common/components/exceptions/edit_exception_modal/index.tsx

@@ -97,9 +97,12 @@ export const EditExceptionModal = memo(function EditExceptionModal({
  const { loading: isSignalIndexLoading, signalIndexName } = useSignalIndex();
  const [
  { isLoading: isSignalIndexPatternLoading, indexPatterns: signalIndexPatterns },
- ] = useFetchIndexPatterns(signalIndexName !== null ? [signalIndexName] : []);
+ ] = useFetchIndexPatterns(signalIndexName !== null ? [signalIndexName] : [], 'signals');
 
- const [{ isLoading: isIndexPatternLoading, indexPatterns }] = useFetchIndexPatterns(ruleIndices);
+ const [{ isLoading: isIndexPatternLoading, indexPatterns }] = useFetchIndexPatterns(
+ ruleIndices,
+ 'rules'
+ );
 
  const onError = useCallback(
  (error) => {

x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/fetch_index_patterns.tsx

@@ -38,7 +38,14 @@ const DEFAULT_BROWSER_FIELDS = {};
 const DEFAULT_INDEX_PATTERNS = { fields: [], title: '' };
 const DEFAULT_DOC_VALUE_FIELDS: DocValueFields[] = [];
 
-export const useFetchIndexPatterns = (defaultIndices: string[] = []): Return => {
+// Fun fact: When using this hook multiple times within a component (e.g. add_exception_modal & edit_exception_modal),
+// the apolloClient will perform queryDeduplication and prevent the first query from executing. A deep compare is not
+// performed on `indices`, so another field must be passed to circumvent this.
+// For details, see https://github.com/apollographql/react-apollo/issues/2202
+export const useFetchIndexPatterns = (
+ defaultIndices: string[] = [],
+ queryDeduplication?: string
+): Return => {
  const apolloClient = useApolloClient();
  const [indices, setIndices] = useState<string[]>(defaultIndices);
 
@@ -74,6 +81,7 @@ export const useFetchIndexPatterns = (defaultIndices: string[] = []): Return =>
  variables: {
  sourceId: 'default',
  defaultIndex: indices,
+ ...(queryDeduplication != null ? { queryDeduplication } : {}),
  },
  context: {
  fetchOptions: {