From 96b7aa21e7d4f6778d3a071ab6b33589d7ace96f Mon Sep 17 00:00:00 2001 From: haworku Date: Thu, 22 Feb 2024 12:34:25 -0800 Subject: [PATCH] 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 --- .../components/Modal/UnlockSubmitModal.tsx | 65 ------------------- .../fetchHealthPlanPackageWrapper.ts | 2 +- .../pages/StateDashboard/StateDashboard.tsx | 13 +--- .../SubmissionType/SubmissionType.tsx | 42 +----------- 4 files changed, 3 insertions(+), 119 deletions(-) diff --git a/services/app-web/src/components/Modal/UnlockSubmitModal.tsx b/services/app-web/src/components/Modal/UnlockSubmitModal.tsx index 2bf656979a..caae61ccdf 100644 --- 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 index 1c46cc14f1..4dfd017bd4 100644 --- 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 index 6babe917fe..b6fecc111a 100644 --- 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 index 4a8fcbcc4d..1d4fa96e1c 100644 --- 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({ - 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