Fix polling behavior

app/Base/configs/apollo.ts

@@ -66,6 +66,9 @@ const apolloOptions: ApolloClientOptions<NormalizedCacheObject> = {
             AssistedTaggingQueryType: {
                 keyFields: [],
             },
+            AssistedTaggingMutationType: {
+                keyFields: [],
+            },
         },
     }),
     assumeImmutableResults: true,

app/views/EntryEdit/LeftPane/AssistItem/index.tsx

@@ -469,14 +469,19 @@ function AssistItem(props: Props) {
     ]);
 
     const [draftEntryId, setDraftEntryId] = useState<string | undefined>(undefined);
+    // FIXME: randomId is used to create different query variables after each poll
+    // so that apollo doesn't create unnecessary cache
+    const [randomId, setRandomId] = useState<string>(randomString());
     const [predictionsLoading, setPredictionsLoading] = useState(false);
 
     const queryVariables = useMemo(() => (
         draftEntryId && projectId ? ({
             projectId,
             draftEntryId,
+            randomId,
         }) : undefined
     ), [
+        randomId,
         projectId,
         draftEntryId,
     ]);
@@ -486,8 +491,7 @@ function AssistItem(props: Props) {
     const {
         loading: draftEntryFetchPending,
         data,
-        startPolling,
-        stopPolling,
+        refetch,
         error: fetchErrors,
     } = useQuery<ProjectDraftEntryQuery, ProjectDraftEntryQueryVariables>(
         PROJECT_DRAFT_ENTRY,
@@ -496,6 +500,7 @@ function AssistItem(props: Props) {
             variables: queryVariables,
             onCompleted: (response) => {
                 const result = response?.project?.assistedTagging?.draftEntry;
+                setPredictionsLoading(true);
 
                 // FIXME: Handle errors more gracefully
                 if (!result) {
@@ -548,28 +553,32 @@ function AssistItem(props: Props) {
         },
     );
 
-    const shouldPoll = useMemo(() => {
-        const draftEntry = data?.project?.assistedTagging?.draftEntry;
-        return draftEntry?.predictionStatus === 'PENDING' || draftEntry?.predictionStatus === 'STARTED';
-    }, [data]);
-
     useEffect(
         () => {
-            if (!shouldPoll) {
-                return undefined;
-            }
-            setPredictionsLoading(true);
-            startPolling(2000);
+            const timeout = setTimeout(
+                () => {
+                    const draftEntry = data?.project?.assistedTagging?.draftEntry;
+                    const shouldPoll = draftEntry?.predictionStatus === 'PENDING'
+                    || draftEntry?.predictionStatus === 'STARTED';
+
+                    if (shouldPoll) {
+                        setPredictionsLoading(true);
+                        setRandomId(randomString());
+                        refetch();
+                    } else {
+                        setPredictionsLoading(false);
+                    }
+                },
+                2000,
+            );
 
             return () => {
-                setPredictionsLoading(false);
-                stopPolling();
+                clearTimeout(timeout);
             };
         },
         [
-            shouldPoll,
-            startPolling,
-            stopPolling,
+            data,
+            refetch,
         ],
     );
 

app/views/ExploreDeep/index.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useMemo, useState, useCallback } from 'react';
 import {
     isDefined,
+    randomString,
     formatDateToString,
 } from '@togglecorp/fujs';
 import {
@@ -447,18 +448,28 @@ function ExploreDeep(props: Props) {
             variables,
         },
     );
+    // FIXME: randomId is used to create different query variables after each poll
+    // so that apollo doesn't create unnecessary cache
+    const [randomId, setRandomId] = useState<string>(randomString());
+
+    const queryVariables = useMemo(() => (
+        exportIdToDownload ? ({
+            id: exportIdToDownload,
+            randomId,
+        }) : undefined
+    ), [
+        exportIdToDownload,
+        randomId,
+    ]);
 
     const {
         data: genericExportData,
-        startPolling,
-        stopPolling,
+        refetch,
     } = useQuery<GenericExportQuery, GenericExportQueryVariables>(
         GENERIC_EXPORT,
         {
-            skip: !exportIdToDownload,
-            variables: exportIdToDownload ? {
-                id: exportIdToDownload,
-            } : undefined,
+            skip: !queryVariables,
+            variables: queryVariables,
             onCompleted: (response) => {
                 if (!response?.genericExport) {
                     setExportIdToDownload(undefined);
@@ -543,22 +554,26 @@ function ExploreDeep(props: Props) {
 
     useEffect(
         () => {
-            const shouldPoll = exportIdToDownload
-                && genericExportData?.genericExport?.status !== 'SUCCESS'
-                && genericExportData?.genericExport?.status !== 'FAILURE';
-
-            if (shouldPoll) {
-                startPolling(5000);
-            } else {
-                stopPolling();
-            }
+            const timeout = setTimeout(
+                () => {
+                    const shouldPoll = genericExportData?.genericExport?.status === 'PENDING'
+                    || genericExportData?.genericExport?.status === 'STARTED';
+
+                    if (shouldPoll) {
+                        setRandomId(randomString());
+                        refetch();
+                    }
+                },
+                2000,
+            );
+
+            return () => {
+                clearTimeout(timeout);
+            };
         },
         [
-            removeAlert,
-            exportIdToDownload,
             genericExportData,
-            startPolling,
-            stopPolling,
+            refetch,
         ],
     );