feat: Update cache when editing files

https://harperdb.atlassian.net/browse/STUDIO-483

Author: dawsontoth

src/features/instance/applications/context/EditorViewProvider.tsx

@@ -9,7 +9,10 @@ import {
 	SetComponentFileRequest,
 	useSetComponentFile,
 } from '@/features/instance/operations/mutations/setComponentFile';
-import { getComponentFileQueryOptions } from '@/features/instance/operations/queries/getComponentFile';
+import {
+	getComponentFileQueryKey,
+	getComponentFileQueryOptions,
+} from '@/features/instance/operations/queries/getComponentFile';
 import {
 	APIDirectoryEntry,
 	APIFileEntry,
@@ -114,6 +117,11 @@ export function EditorViewProvider({ children }: PropsWithChildren) {
 	const pathToLoad = openedEntry && (isDirectory(openedEntry) ? openedEntry.overviewEntry?.path : openedEntry.path) || '';
 	const projectToLoad = openedEntry && (isDirectory(openedEntry) ? openedEntry.overviewEntry?.project : openedEntry.project) || '';
 	const loadedOverviewEntry = openedEntry && (isDirectory(openedEntry) ? !!openedEntry.overviewEntry?.path : false) || false;
+	const fileQueryKey = getComponentFileQueryKey({
+		file: pathToLoad?.split('/').slice(1).join('/'),
+		project: projectToLoad,
+		...instanceParams,
+	});
 	const { data: getComponentFileQueryData } = useQuery(
 		getComponentFileQueryOptions(
 			{
@@ -148,16 +156,17 @@ export function EditorViewProvider({ children }: PropsWithChildren) {
 			saveComponentFile(data, {
 				onSuccess: () => {
 					if (openedEntry?.path === filePath && data.payload !== undefined) {
-						setOpenedEntryContents(data.payload || undefined);
 						setUpdatedEntryContents(undefined);
+						setOpenedEntryContents(data.payload || undefined);
+						queryClient.setQueryData(fileQueryKey, { ...getComponentFileQueryData, message: data.payload });
 					}
 				},
 				onError: (error) => {
 					console.error('Error saving file:', error);
 				},
 			});
 		},
-		[saveComponentFile, setUpdatedEntryContents, openedEntry],
+		[saveComponentFile, setUpdatedEntryContents, setOpenedEntryContents, openedEntry],
 	);
 
 	const restrictPackageModification = useMemo(() => {

src/features/instance/operations/queries/getComponentFile.ts

@@ -33,16 +33,20 @@ export async function getComponentFile({
 	};
 }
 
-export function getComponentFileQueryOptions({ entityId, instanceClient, file, project }: GetComponentFileRequest) {
+export function getComponentFileQueryOptions(params: GetComponentFileRequest) {
 	return queryOptions({
-		queryKey: [
-			entityId,
-			queryKeys.operations.get_component_file,
-			file,
-			project,
-		] as const,
-		queryFn: () => getComponentFile({ entityId, instanceClient, file, project }),
-		enabled: !!file && !!project,
+		queryKey: getComponentFileQueryKey(params),
+		queryFn: () => getComponentFile(params),
+		enabled: !!params.file && !!params.project,
 		retry: false,
 	});
 }
+
+export function getComponentFileQueryKey(params: GetComponentFileRequest) {
+	return [
+		params.entityId,
+		queryKeys.operations.get_component_file,
+		params.file,
+		params.project,
+	] as const;
+}