FEATURE: Update dependencies

Resources/Private/JavaScript/clipboard/src/hooks/useClipboard.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { gql, useMutation, useQuery } from '@apollo/client';
 
 import { AssetIdentity } from '@media-ui/core/src/interfaces';
@@ -8,9 +8,8 @@ import { TOGGLE_CLIPBOARD_STATE, CLIPBOARD } from '../queries/ClipboardQuery';
 export type ClipboardItems = Record<string, AssetIdentity>;
 
 export default function useClipboard() {
-    const {
-        data: { clipboard },
-    } = useQuery<{ clipboard: ClipboardItems }>(CLIPBOARD);
+    const { data } = useQuery<{ clipboard: ClipboardItems }>(CLIPBOARD);
+    const clipboard = useMemo(() => data?.clipboard ?? {}, [data]);
 
     const [mutateClipboard] = useMutation<void, { assetId: string; assetSourceId: string; force: boolean }>(
         TOGGLE_CLIPBOARD_STATE

Resources/Private/JavaScript/core/src/hooks/useSelectAssetSource.ts

@@ -9,8 +9,8 @@ import { useAssetSourcesQuery } from './index';
 import { currentPageState } from '../state';
 
 const useSelectAssetSource = (): [AssetSource, (assetSource: AssetSource) => Promise<ExecutionResult<any>>] => {
-    const selectedAssetSourceQuery = useQuery(SELECTED_ASSET_SOURCE_ID);
-    const { selectedAssetSourceId } = selectedAssetSourceQuery.data;
+    const { data } = useQuery(SELECTED_ASSET_SOURCE_ID);
+    const selectedAssetSourceId = useMemo(() => data?.selectedAssetSourceId ?? null, [data]);
     const { assetSources } = useAssetSourcesQuery();
     const setCurrentPage = useSetRecoilState(currentPageState);
     const selectedAssetSource = useMemo(

Resources/Private/JavaScript/media-module/package.json

@@ -4,7 +4,7 @@
   "license": "GNU GPLv3",
   "private": true,
   "dependencies": {
-    "@apollo/client": "^3.3.13",
+    "@apollo/client": "~3.4.17",
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-brands-svg-icons": "^5.15.1",
     "@fortawesome/free-regular-svg-icons": "^5.15.1",

Resources/Private/JavaScript/media-module/src/hooks/useViewModeSelection.ts

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
 import { ExecutionResult } from 'graphql';
 
@@ -9,8 +10,8 @@ export enum VIEW_MODES {
 }
 
 export default function useViewModeSelection(): [VIEW_MODES, (viewMode: VIEW_MODES) => Promise<ExecutionResult<any>>] {
-    const viewModeSelectionQuery = useQuery(VIEW_MODE_SELECTION);
-    const { viewModeSelection } = viewModeSelectionQuery.data;
+    const { data } = useQuery(VIEW_MODE_SELECTION);
+    const viewModeSelection = useMemo(() => data?.viewModeSelection ?? VIEW_MODES.Thumbnails, [data]);
     const [mutateViewModeSelection] = useMutation(SET_VIEW_MODE_SELECTION);
     const setViewModeSelection = (viewMode: VIEW_MODES) =>
         mutateViewModeSelection({

Resources/Private/JavaScript/media-module/src/lib/FontAwesome.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck - FIXME: due to type problem https://github.com/FortAwesome/react-fontawesome/issues/470
 // We need to import Icon here, so that we can UNDO the config change to fontawesome-svg-core which happened in "Icon".
 // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
 import { Icon } from '@neos-project/react-ui-components';