diff --git a/packages/core/upload/admin/src/hooks/tests/useAssets.test.js b/packages/core/upload/admin/src/hooks/tests/useAssets.test.js index 7996f5c87e..82aa180c14 100644 --- a/packages/core/upload/admin/src/hooks/tests/useAssets.test.js +++ b/packages/core/upload/admin/src/hooks/tests/useAssets.test.js @@ -243,4 +243,97 @@ describe('useAssets', () => { console.error = originalConsoleError; }); + + it('should filter out any assets without a name', async () => { + const { get } = useFetchClient(); + + get.mockReturnValue({ + data: { + results: [ + { + name: null, + mime: 'image/jpeg', + ext: 'jpg', + }, + { + name: 'test', + mime: 'image/jpeg', + ext: 'jpg', + }, + ], + }, + }); + + const { result, waitFor } = await setup({}); + + await waitFor(() => result.current.data !== undefined); + + expect(result.current.data.results).toEqual([ + { + name: 'test', + mime: 'image/jpeg', + ext: 'jpg', + }, + ]); + }); + + it('should set mime and ext to strings as defaults if they are nullish', async () => { + const { get } = useFetchClient(); + + get.mockReturnValue({ + data: { + results: [ + { + name: 'test 1', + mime: null, + ext: 'jpg', + }, + { + name: 'test 2', + mime: 'image/jpeg', + ext: null, + }, + { + name: 'test 3', + mime: null, + ext: null, + }, + { + name: 'test 4', + mime: 'image/jpeg', + ext: 'jpg', + }, + ], + }, + }); + + const { result, waitFor } = await setup({}); + + await waitFor(() => result.current.data !== undefined); + + expect(result.current.data.results).toMatchInlineSnapshot(` + [ + { + "ext": "jpg", + "mime": "", + "name": "test 1", + }, + { + "ext": "", + "mime": "image/jpeg", + "name": "test 2", + }, + { + "ext": "", + "mime": "", + "name": "test 3", + }, + { + "ext": "jpg", + "mime": "image/jpeg", + "name": "test 4", + }, + ] + `); + }); }); diff --git a/packages/core/upload/admin/src/hooks/useAssets.js b/packages/core/upload/admin/src/hooks/useAssets.js index 3768e6c933..a41feeeaa2 100644 --- a/packages/core/upload/admin/src/hooks/useAssets.js +++ b/packages/core/upload/admin/src/hooks/useAssets.js @@ -71,6 +71,31 @@ export const useAssets = ({ skipWhen = false, query = {} } = {}) => { enabled: !skipWhen, staleTime: 0, cacheTime: 0, + select(data) { + if (data?.results && Array.isArray(data.results)) { + return { + ...data, + results: data.results + /** + * Filter out assets that don't have a name. + * So we don't try to render them as assets + * and get errors. + */ + .filter((asset) => asset.name) + .map((asset) => ({ + ...asset, + /** + * Mime and ext cannot be null in the front-end because + * we expect them to be strings and use the `includes` method. + */ + mime: asset.mime ?? '', + ext: asset.ext ?? '', + })), + }; + } + + return data; + }, }); return { data, error, isLoading };