Removing FE cacheing from application (#2268)

* Removing all cacheing from application - prep for multiple APIs in use - reduce chance for regressions - submission form, summary pages, dashboard and Q&A all fetch their own data * Leave cache manipulation in place on QA pages
Enterprise-CMCS · Feb 22, 2024 · 96b7aa2 · 96b7aa2
1 parent 3feaa79
commit 96b7aa2
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 119 deletions.
diff --git a/services/app-web/src/components/Modal/UnlockSubmitModal.tsx b/services/app-web/src/components/Modal/UnlockSubmitModal.tsx
@@ -4,7 +4,6 @@ import { FormGroup, ModalRef, Textarea } from '@trussworks/react-uswds'
 import { useNavigate } from 'react-router-dom'
 import {
     FetchHealthPlanPackageWithQuestionsDocument,
-    FetchHealthPlanPackageDocument,
     HealthPlanPackage,
     useSubmitHealthPlanPackageMutation,
     useUnlockHealthPlanPackageMutation,
@@ -18,7 +17,6 @@ import * as Yup from 'yup'
 import styles from './UnlockSubmitModal.module.scss'
 import { GenericApiErrorProps } from '../Banner/GenericApiErrorBanner/GenericApiErrorBanner'
 import { ERROR_MESSAGES } from '../../constants/errors'
-import { useAuth } from '../../contexts/AuthContext'
 
 type ModalType = 'SUBMIT' | 'RESUBMIT' | 'UNLOCK'
 
@@ -79,7 +77,6 @@ export const UnlockSubmitModal = ({
         GenericApiErrorProps | undefined
     >(undefined) // when api errors error
     const navigate = useNavigate()
-    const { loggedInUser } = useAuth()
     const modalValues: ModalValueType = modalValueDictionary[modalType]
 
     const modalFormInitialValues = {
@@ -139,73 +136,11 @@ export const UnlockSubmitModal = ({
         if (result instanceof Error && result.cause === 'EMAIL_ERROR') {
             modalRef.current?.toggleModal(undefined, false)
 
-            // We cannot update cache and re-fetch query inside the mutation because it returns an apollo
-            // error on failing emails. We have to manually update cache depending on unlock or submit
             if (modalType !== 'UNLOCK' && submissionName) {
-                // Updating the package status here so when redirected to the dashboard the status will be up-to-date
-                // without having to wait for the refetch.
-                client.cache.updateQuery(
-                    {
-                        query: FetchHealthPlanPackageDocument,
-                        variables: {
-                            input: {
-                                pkgID: healthPlanPackage.id,
-                            },
-                        },
-                    },
-                    (data) => {
-                        const pkg = data?.fetchHealthPlanPackage?.pkg
-
-                        if (pkg) {
-                            return {
-                                fetchHealthPlanPackage: {
-                                    __typename: 'FetchHealthPlanPackagePayload',
-                                    pkg: {
-                                        ...pkg,
-                                        status: 'SUBMITTED',
-                                    },
-                                },
-                            }
-                        }
-                    }
-                )
                 navigate(
                     `/dashboard/submissions?justSubmitted=${submissionName}`
                 )
             } else {
-                // Updating the cache here with unlockInfo before manually re-fetching query.
-                // This will prevent the loading animation to happen and have up-to-date unlock banner.
-                const pkg = healthPlanPackage as HealthPlanPackage
-                client.cache.writeQuery({
-                    query: FetchHealthPlanPackageWithQuestionsDocument,
-                    data: {
-                        fetchHealthPlanPackage: {
-                            pkg: {
-                                ...pkg,
-                                status: 'UNLOCKED',
-                                revisions: [
-                                    {
-                                        __typename: 'HealthPlanRevisionEdge',
-                                        node: {
-                                            ...pkg.revisions[
-                                                pkg.revisions.length - 1
-                                            ].node,
-                                            unlockInfo: {
-                                                updatedAt: new Date(),
-                                                updatedBy: loggedInUser?.email,
-                                                updatedReason:
-                                                    unlockSubmitModalInput,
-                                            },
-                                            submitInfo: null,
-                                            id: null,
-                                        },
-                                    },
-                                    ...pkg.revisions,
-                                ],
-                            },
-                        },
-                    },
-                })
                 await client.refetchQueries({
                     include: [FetchHealthPlanPackageWithQuestionsDocument],
                 })

diff --git a/services/app-web/src/gqlHelpers/fetchHealthPlanPackageWrapper.ts b/services/app-web/src/gqlHelpers/fetchHealthPlanPackageWrapper.ts
@@ -157,7 +157,7 @@ function useFetchHealthPlanPackageWithQuestionsWrapper(
                 },
             },
             onCompleted,
-            fetchPolicy: 'cache-and-network',
+            fetchPolicy: 'network-only',
         })
     )
     const result = results.result

diff --git a/services/app-web/src/pages/StateDashboard/StateDashboard.tsx b/services/app-web/src/pages/StateDashboard/StateDashboard.tsx
@@ -18,8 +18,6 @@ import {
     Loading,
 } from '../../components'
 import { getCurrentRevisionFromHealthPlanPackage } from '../../gqlHelpers'
-import { useLDClient } from 'launchdarkly-react-client-sdk'
-import { featureFlags } from '../../common-code/featureFlags'
 
 /**
  * We only pull a subset of data out of the submission and revisions for display in Dashboard
@@ -30,17 +28,8 @@ export const StateDashboard = (): React.ReactElement => {
     const { loginStatus, loggedInUser } = useAuth()
     const location = useLocation()
 
-    // Force use network until we have all the APIs in use and we can reimplement cacheing
-    const ldClient = useLDClient()
-    const useContractAndRatesAPI: boolean = ldClient?.variation(
-        featureFlags.RATE_EDIT_UNLOCK.flag,
-        featureFlags.RATE_EDIT_UNLOCK.defaultValue
-    )
-
     const { loading, data, error } = useIndexHealthPlanPackagesQuery({
-        fetchPolicy: useContractAndRatesAPI
-            ? 'network-only'
-            : 'cache-and-network',
+        fetchPolicy: 'network-only',
     })
 
     if (error) {

diff --git a/services/app-web/src/pages/StateSubmission/SubmissionType/SubmissionType.tsx b/services/app-web/src/pages/StateSubmission/SubmissionType/SubmissionType.tsx
@@ -32,8 +32,6 @@ import {
     SubmissionType as SubmissionTypeT,
     useCreateHealthPlanPackageMutation,
     CreateHealthPlanPackageInput,
-    IndexHealthPlanPackagesDocument,
-    IndexHealthPlanPackagesQuery,
 } from '../../../gen/gqlClient'
 import { PageActions } from '../PageActions'
 import styles from '../StateSubmissionForm.module.scss'
@@ -79,45 +77,7 @@ export const SubmissionType = ({
     const isNewSubmission = location.pathname === '/submissions/new'
 
     const [createHealthPlanPackage, { error }] =
-        useCreateHealthPlanPackageMutation({
-            // This function updates the Apollo Client Cache after we create a new DraftSubmission
-            // Without it, we wouldn't show this newly created submission on the dashboard page
-            // without a refresh. Anytime a mutation does more than "modify an existing object"
-            // you'll need to handle the cache.
-            update(cache, { data }) {
-                const pkg = data?.createHealthPlanPackage.pkg
-                if (pkg) {
-                    const result =
-                        cache.readQuery<IndexHealthPlanPackagesQuery>({
-                            query: IndexHealthPlanPackagesDocument,
-                        })
-
-                    const indexHealthPlanPackages = {
-                        totalCount:
-                            result?.indexHealthPlanPackages.totalCount || 0,
-                        edges: result?.indexHealthPlanPackages.edges || [],
-                    }
-
-                    cache.writeQuery({
-                        query: IndexHealthPlanPackagesDocument,
-                        data: {
-                            indexHealthPlanPackages: {
-                                __typename: 'IndexHealthPlanPackagesPayload',
-                                totalCount:
-                                    indexHealthPlanPackages.totalCount + 1,
-                                edges: [
-                                    {
-                                        __typename: 'HealthPlanPackageEdge',
-                                        node: pkg,
-                                    },
-                                    ...indexHealthPlanPackages.edges,
-                                ],
-                            },
-                        },
-                    })
-                }
-            },
-        })
+        useCreateHealthPlanPackageMutation()
 
     useEffect(() => {
         // Focus the error summary heading only if we are displaying