SolidJS•8mo ago

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•8mo 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•8mo 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•8mo 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•8mo ago

thank you very much, I can see the idea.

bigmistqke•8mo ago

ur welcome!

Gaming

Programming

Async Primitive