Fix project query mutate.

We properly update the query cache after a mutation.
This helps avoid races where client serves stale data
after we invalidate the query.

Author: gz

web-ui/src/analytics/editor.tsx

@@ -31,6 +31,7 @@ import { ProjectDescr } from 'src/types/manager/models/ProjectDescr'
 import CompileIndicator from './CompileIndicator'
 import SaveIndicator, { SaveIndicatorState } from 'src/components/SaveIndicator'
 import { PLACEHOLDER_VALUES } from 'src/utils'
+import { projectQueryCacheUpdate } from 'src/types/defaultQueryFn'
 
 // How many ms to wait until we save the project.
 const SAVE_DELAY = 2000
@@ -248,20 +249,24 @@ const useUpdateProjectIfChanged = (
   )
   useEffect(() => {
     if (project.project_id !== null && state === 'isModified' && !isLoading) {
+      const updateRequest = {
+        project_id: project.project_id,
+        name: project.name,
+        description: project.description,
+        code: project.code
+      }
       mutate(
+        updateRequest,
         {
-          project_id: project.project_id,
-          name: project.name,
-          description: project.description,
-          code: project.code
-        },
-        {
-          onSuccess: (data: UpdateProjectResponse) => {
-            setProject((prevState: ProgramState) => ({ ...prevState, version: data.version }))
-            setState('isUpToDate')
+          onSettled: () => {
             queryClient.invalidateQueries(['project'])
             queryClient.invalidateQueries(['projectCode', { project_id: project.project_id }])
             queryClient.invalidateQueries(['projectStatus', { project_id: project.project_id }])
+          },
+          onSuccess: (data: UpdateProjectResponse) => {
+            projectQueryCacheUpdate(queryClient, updateRequest)
+            setProject((prevState: ProgramState) => ({ ...prevState, version: data.version }))
+            setState('isUpToDate')
             setFormError({})
           },
           onError: (error: CancelError) => {

web-ui/src/types/defaultQueryFn.ts

@@ -8,10 +8,72 @@
 //    no queryFn is provided (ideally we never provide a queryFn to reduce
 //    duplication and bugs but always rely on defaultQueryFn to route to the correct API call)
 
-import { QueryFunctionContext } from '@tanstack/react-query'
+import { QueryClient, QueryFunctionContext } from '@tanstack/react-query'
 import { match, P } from 'ts-pattern'
+import {
+  ConfigService,
+  ConnectorService,
+  PipelineService,
+  ProjectCodeResponse,
+  ProjectDescr,
+  ProjectService,
+  UpdateProjectRequest
+} from './manager'
 
-import { ConfigService, ConnectorService, PipelineService, ProjectService } from './manager'
+// Updates the query cache for a `UpdateProjectRequest` response.
+export const projectQueryCacheUpdate = (queryClient: QueryClient, newData: UpdateProjectRequest) => {
+  queryClient.setQueryData(
+    ['projectCode', { project_id: newData.project_id }],
+    (oldData: ProjectCodeResponse | undefined) => {
+      if (oldData) {
+        const newd = {
+          ...oldData,
+          ...{
+            project: {
+              ...oldData.project,
+              ...{
+                name: newData.name,
+                description: newData.description ? newData.description : oldData.project.description
+              },
+            },
+            code: newData.code ? newData.code : oldData.code
+          }
+        };
+        console.log('newdata is')
+        console.log(newd);
+        return newd
+      } else {
+        return oldData
+      }
+    }
+  )
+
+  queryClient.setQueryData(
+    ['projectStatus', { project_id: newData.project_id }],
+    (oldData: ProjectDescr | undefined) => {
+      return oldData
+        ? {
+            ...oldData,
+            ...{ name: newData.name, description: newData.description ? newData.description : oldData.description }
+          }
+        : oldData
+    }
+  )
+
+  queryClient.setQueryData(['project'], (oldData: ProjectDescr[] | undefined) =>
+    oldData?.map((project: ProjectDescr) => {
+      if (project.project_id === newData.project_id) {
+        const projectDescUpdates = {
+          name: newData.name,
+          description: newData.description ? newData.description : project.description
+        }
+        return { ...project, ...projectDescUpdates }
+      } else {
+        return project
+      }
+    })
+  )
+}
 
 export const defaultQueryFn = async (context: QueryFunctionContext) => {
   return match(context.queryKey)