How to fetch images from media library using useSelect ?

[tresorama]

In a custom block i'm trying to get an image from the media library, but i cannot get some data back, i only receive undefined.
But likely i'm doing some sort of mistake...

I've tried doing these but no one is working

import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';

// ... (inside react render function)

const mediaId = 604;

useSelect(
  select => {
    const media = select(coreStore).getMedia(mediaId, { context: 'view' }); // undefined
    return media;
  },
  [mediaId]
);

or

import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';

// ... (inside react render function)

const mediaId = 604;

useSelect(
  select => {
    const media = select(coreStore).getEntityRecord('postType', 'attachment', mediaId); // undefined
    return media;
  },
  [mediaId]
);

Any suggestion?

---

I'm also wondering how to know every "getter" available in a store? And signature of invokation for each of them ? I cannot find a clear explanation in the docs.

For example I consider "getMedia" a getter.
Typescript says that "getMedia"do not exist in the type def of store coming from @wordpress/core-data, but at runtime in the browser I checked and the methods named "getMedia" exists in the store object.

How to be self aware of all these getters, and how to use them?

[tresorama]

Discovered this about the first code example (copy-pasted here).

import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';

// ... (inside react render function)

const mediaId = 604;

useSelect(
  select => {
    const media = select(coreStore).getMedia(mediaId, { context: 'view' }); // undefined
    return media;
  },
  [mediaId]
);

This code works, but the output of media is undefined until the fetch it's resolved, so you need to add other code (I don't know which is the official code) to get if you are in "loading" state.
This means that after a while (in a re-render of the compoent that invoke the hook) the media variable will receive the fetched object, but while is loading media is undefined.
A naive solution is to check if media exists or not is the following, but doing that you are not sure if a undefined value represent "loading" or "not existing/not found".

const media = useSelect(
  select => {
    const media = select(coreStore).getMedia(mediaId, { context: 'view' }); // undefined
    return media;
  },
  [mediaId]
)

if (!media) return "Loading...";

return <div>...</div>