S
SolidJS4mo ago
Mant

Async Primitive

Hi I'm a bit stuck, you know that primitive is asynchronous and can be used in a following case. there's the createResource primitive, but I can't see how to use it properly, especially as I'd like to be able to put the files in indexedDB.
let images: Promise<{ items: ImageType[]; }> | undefined;
async function fetchImages(forceRefresh: boolean = false) {
if (!images || forceRefresh) {
images = fetch("/images");
}
return images;
}
function DisplayImage() {
async function getImage() {
let files = await fetchImages();
let file = files.items.find(file => file.key === key);
if (!file) {
let files = await fetchFiles(true);
let file = files.items.find(file => file.key === key);
return file
}
return file;
}
let key = "key_image";
return <>
<img src={getImage(key)} /> // <- error is async
</>;
}
let images: Promise<{ items: ImageType[]; }> | undefined;
async function fetchImages(forceRefresh: boolean = false) {
if (!images || forceRefresh) {
images = fetch("/images");
}
return images;
}
function DisplayImage() {
async function getImage() {
let files = await fetchImages();
let file = files.items.find(file => file.key === key);
if (!file) {
let files = await fetchFiles(true);
let file = files.items.find(file => file.key === key);
return file
}
return file;
}
let key = "key_image";
return <>
<img src={getImage(key)} /> // <- error is async
</>;
}
5 Replies
bigmistqke 🌈
bigmistqke 🌈4mo ago
Yes, createResource is definitely the answer! You give it an async function and it returns a signal with additional properties about the fetch call (it's pending state, if it errored, ...). It's a very powerful primitive, especially how it works together with suspense. Is there something specific about createResource that you have troubles with?
Mant
Mant4mo ago
the getImage is async, and can restart a refetch or fetch in indexedDB, which seems to me to make the software more complex.
bigmistqke 🌈
bigmistqke 🌈4mo ago
let images: Promise<{ items: ImageType[]; }> | undefined;
async function fetchImages(forceRefresh: boolean = false) {
if (!images || forceRefresh) {
images = fetch("/images");
}
return images;
}
function DisplayImage() {
const [source] = createResource("key_image", async (key) => {
let files = await fetchImages();
let file = files.items.find(file => file.key === key);
if (!file) {
let files = await fetchFiles(true);
let file = files.items.find(file => file.key === key);
return file
}
return file;
})

return <>
<img src={source()} />
</>;
}
let images: Promise<{ items: ImageType[]; }> | undefined;
async function fetchImages(forceRefresh: boolean = false) {
if (!images || forceRefresh) {
images = fetch("/images");
}
return images;
}
function DisplayImage() {
const [source] = createResource("key_image", async (key) => {
let files = await fetchImages();
let file = files.items.find(file => file.key === key);
if (!file) {
let files = await fetchFiles(true);
let file = files.items.find(file => file.key === key);
return file
}
return file;
})

return <>
<img src={source()} />
</>;
}
Something like this should be fine regarding createResource. if you want 'key_image' to be dynamic you could change it into a signal:
const [key, setKey] = createSignal("key_image")
const [source] = createResource(key, async (key) => {
const [key, setKey] = createSignal("key_image")
const [source] = createResource(key, async (key) => {
or if it comes from a prop:
const [source] = createResource(() => props.key, async (key) => {
const [source] = createResource(() => props.key, async (key) => {
Mant
Mant4mo ago
thank you very much, I can see the idea.
bigmistqke 🌈
bigmistqke 🌈4mo ago
ur welcome!
Want results from more Discord servers?
Add your server
More Posts