Fixed issues with caching problems from Apollo-GraphQL and our current strategy/usage (#30180)

* Added apollo dev tools if `NODE_ENV` is production mode
  * Pulled out the fetch policy to be global for all (but sources) queries we use
  * Kept the __typeName by instituting dataIdFromObject
  * https://github.com/elastic/ingest-dev/issues/213

x-pack/plugins/secops/public/containers/authentications/index.tsx

@@ -11,7 +11,7 @@ import { connect } from 'react-redux';
 
 import { AuthenticationsEdges, GetAuthenticationsQuery, PageInfo } from '../../graphql/types';
 import { hostsModel, hostsSelectors, inputsModel, State } from '../../store';
-import { createFilter } from '../helpers';
+import { createFilter, getDefaultFetchPolicy } from '../helpers';
 import { QueryTemplate, QueryTemplateProps } from '../query_template';
 import { authenticationsQuery } from './index.gql_query';
 
@@ -55,7 +55,7 @@ class AuthenticationsComponentQuery extends QueryTemplate<
     return (
       <Query<GetAuthenticationsQuery.Query, GetAuthenticationsQuery.Variables>
         query={authenticationsQuery}
-        fetchPolicy="cache-and-network"
+        fetchPolicy={getDefaultFetchPolicy()}
         pollInterval={poll}
         notifyOnNetworkStatusChange
         variables={{

x-pack/plugins/secops/public/containers/events/index.tsx

@@ -11,7 +11,7 @@ import { connect } from 'react-redux';
 
 import { Direction, Ecs, GetEventsQuery, PageInfo } from '../../graphql/types';
 import { hostsModel, hostsSelectors, inputsModel, State } from '../../store';
-import { createFilter } from '../helpers';
+import { createFilter, getDefaultFetchPolicy } from '../helpers';
 import { QueryTemplate, QueryTemplateProps } from '../query_template';
 import { eventsQuery } from './index.gql_query';
 
@@ -55,7 +55,7 @@ class EventsComponentQuery extends QueryTemplate<
     return (
       <Query<GetEventsQuery.Query, GetEventsQuery.Variables>
         query={eventsQuery}
-        fetchPolicy="cache-and-network"
+        fetchPolicy={getDefaultFetchPolicy()}
         notifyOnNetworkStatusChange
         pollInterval={poll}
         variables={{

x-pack/plugins/secops/public/containers/helpers.ts

@@ -6,7 +6,10 @@
 
 import { isString } from 'lodash/fp';
 
+import { FetchPolicy } from 'apollo-client';
 import { ESQuery } from '../../common/typed_json';
 
 export const createFilter = (filterQuery: ESQuery | string | undefined) =>
   isString(filterQuery) ? filterQuery : JSON.stringify(filterQuery);
+
+export const getDefaultFetchPolicy = (): FetchPolicy => 'cache-and-network';

x-pack/plugins/secops/public/containers/hosts/index.tsx

@@ -11,7 +11,7 @@ import { connect } from 'react-redux';
 
 import { GetHostsTableQuery, GetHostSummaryQuery, HostsEdges, PageInfo } from '../../graphql/types';
 import { hostsModel, hostsSelectors, inputsModel, State } from '../../store';
-import { createFilter } from '../helpers';
+import { createFilter, getDefaultFetchPolicy } from '../helpers';
 import { QueryTemplate, QueryTemplateProps } from '../query_template';
 import { HostSummaryQuery } from './host_summary.gql_query';
 import { HostsTableQuery } from './hosts_table.gql_query';
@@ -64,7 +64,7 @@ class HostsComponentQuery extends QueryTemplate<
         GetHostsTableQuery.Variables | GetHostSummaryQuery.Variables
       >
         query={type === hostsModel.HostsType.page ? HostsTableQuery : HostSummaryQuery}
-        fetchPolicy="cache-and-network"
+        fetchPolicy={getDefaultFetchPolicy()}
         pollInterval={poll}
         notifyOnNetworkStatusChange
         variables={{

x-pack/plugins/secops/public/containers/kpi_events/index.tsx

@@ -12,7 +12,7 @@ import { pure } from 'recompose';
 import { ESQuery } from '../../../common/typed_json';
 import { Direction, GetKpiEventsQuery, KpiItem } from '../../graphql/types';
 import { inputsModel } from '../../store';
-import { createFilter } from '../helpers';
+import { createFilter, getDefaultFetchPolicy } from '../helpers';
 import { kpiEventsQuery } from './index.gql_query';
 
 export interface KpiEventsArgs {
@@ -36,7 +36,7 @@ export const KpiEventsQuery = pure<OwnProps>(
   ({ children, filterQuery, id = 'kpiEventsQuery', poll, sourceId, startDate, endDate }) => (
     <Query<GetKpiEventsQuery.Query, GetKpiEventsQuery.Variables>
       query={kpiEventsQuery}
-      fetchPolicy="cache-and-network"
+      fetchPolicy={getDefaultFetchPolicy()}
       notifyOnNetworkStatusChange
       pollInterval={poll}
       variables={{

x-pack/plugins/secops/public/containers/timeline/index.tsx

@@ -11,7 +11,7 @@ import { Query } from 'react-apollo';
 import memoizeOne from 'memoize-one';
 import { Ecs, EcsEdges, GetTimelineQuery, PageInfo, SortField } from '../../graphql/types';
 import { inputsModel } from '../../store';
-import { createFilter } from '../helpers';
+import { createFilter, getDefaultFetchPolicy } from '../helpers';
 import { QueryTemplate, QueryTemplateProps } from '../query_template';
 import { timelineQuery } from './index.gql_query';
 
@@ -58,7 +58,7 @@ export class TimelineQuery extends QueryTemplate<
     return (
       <Query<GetTimelineQuery.Query, GetTimelineQuery.Variables>
         query={timelineQuery}
-        fetchPolicy="cache-and-network"
+        fetchPolicy={getDefaultFetchPolicy()}
         notifyOnNetworkStatusChange
         pollInterval={poll}
         variables={{

x-pack/plugins/secops/public/containers/uncommon_processes/index.tsx

@@ -11,7 +11,7 @@ import { connect } from 'react-redux';
 
 import { GetUncommonProcessesQuery, PageInfo, UncommonProcessesEdges } from '../../graphql/types';
 import { hostsModel, hostsSelectors, inputsModel, State } from '../../store';
-import { createFilter } from '../helpers';
+import { createFilter, getDefaultFetchPolicy } from '../helpers';
 import { QueryTemplate, QueryTemplateProps } from '../query_template';
 import { uncommonProcessesQuery } from './index.gql_query';
 
@@ -55,7 +55,7 @@ class UncommonProcessesComponentQuery extends QueryTemplate<
     return (
       <Query<GetUncommonProcessesQuery.Query, GetUncommonProcessesQuery.Variables>
         query={uncommonProcessesQuery}
-        fetchPolicy="cache-and-network"
+        fetchPolicy={getDefaultFetchPolicy()}
         pollInterval={poll}
         notifyOnNetworkStatusChange
         variables={{

x-pack/plugins/secops/public/lib/compose/kibana_compose.ts

@@ -28,6 +28,7 @@ import { errorLink } from '../../containers/errors';
 
 export function compose(): AppFrontendLibs {
   const cache = new InMemoryCache({
+    dataIdFromObject: () => null,
     fragmentMatcher: new IntrospectionFragmentMatcher({
       introspectionQueryResultData,
     }),
@@ -39,6 +40,7 @@ export function compose(): AppFrontendLibs {
   });
 
   const graphQLOptions = {
+    connectToDevTools: process.env.NODE_ENV !== 'production',
     cache,
     link: ApolloLink.from([
       errorLink,