[Security Solution] Fixes exception modal not loading content (elasti…

…c#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: {