Lit Element - Can I use react query cache in lit element to cache the API response?

Question

Here is my case.

I need to surface messages in different pages of a big website. And I plan to use lit element to generate a local element <my-element> and used it in different pages. In this element, we need a API call to fetch data from our backend, code like below:

    @customElement('my-element')
    export class SimpleGreeting extends LitElement {

        @property()
        id = 'SomeId';

        render() {
            const response = fetch('https://myendpoint/message?id=' +id);
            return html`<p>Hello, ${response}!</p>`;
        }

    }

But in some pages, the message need to be surfaced in each row of table like below

Id	message
id1	<my-element id=id1 />
id2	<my-element id=id2 />
id3	<my-element id=id3 />

In this way, each lit element will call backend https://myendpoint/message?id=' +id to get the message, this is time consuming.

So assume the backend API https://myendpoint/message can fetch all messages belongs to this page in one request, is there any way that we can render above table with only one API call to https://myendpoint/message?

My idea is to leverage ReactQuery cache to cache the API response and filter it by id. Then if one API call in <my-element id=id1 /> is completed and the result cached, other API call in lit element <my-element id=id2 /> will directly get response from react cache and there won't be a real network request.

Can somebody here help to confirm if my solution will work? If not, any guidance?