SolidJS•17mo ago

How to await on the Resource's promise?

Say users is a resource (from createResource). I would like to await for the underlying promise to complete. How could I acheive this?

const fetchUser = async (userId: string) => {
  const [users] = useUsers(); // users is built with createResource
  await users.???; // how to await the underlying promise?
  return users().find(({ id }) => id === userId);
};

const fetchUser = async (userId: string) => {
  const [users] = useUsers(); // users is built with createResource
  await users.???; // how to await the underlying promise?
  return users().find(({ id }) => id === userId);
};

7 Replies

marcus.og•17mo ago

since createResource creates only async signal, i would rather reuse fetcher function in fetchUser

davedbase•17mo ago

You can await on the refetch function itself.

const [myResource, { refetch }] = createResource(fetchUser);

// Somehwere in your code...
await refetch()

const [myResource, { refetch }] = createResource(fetchUser);

// Somehwere in your code...
await refetch()

Tommypop•17mo ago

This may be worth setting to be a derived signal or a memo, which resolves to a value when the resource resolves. (This might not fully fit your use case though)

const [users] = useUsers();
const [userId,setUserId] = createSignal(1234);
const user = createMemo(() => {
  return users().find(({ id }) => id === userId());
})

const [users] = useUsers();
const [userId,setUserId] = createSignal(1234);
const user = createMemo(() => {
  return users().find(({ id }) => id === userId());
})

MathieuOP•17mo ago

that will work even for the first fetching? I tried and it didn't seem to work. There is no delay between a log before await refetch() and a log after (while the request takes a while)

console.log(refetch)

console.log(refetch)

ƒ load(refetching = true) { if (refetching !== false && scheduled) return; scheduled = false; const lookup = dynamic ? dynamic() : source; loadedUnderTransition = Transition && Tr…

console.log(refetch())

console.log(refetch())

undefined

I think I should close this issue because I think it makes more sense for me to expose the fetcher, I think as @marcus.og suggested otherwise I have something like that haha

async function awaitResource(resourceFetcher) {
  return await new Promise((resolve) => {
    createRoot((dispose) => {
      const [resource] = resourceFetcher();

      createEffect(() => {
        if (!resource.loading) {
          resolve(resource());
          dispose();
        }
      });
    });
  });
}

async function awaitResource(resourceFetcher) {
  return await new Promise((resolve) => {
    createRoot((dispose) => {
      const [resource] = resourceFetcher();

      createEffect(() => {
        if (!resource.loading) {
          resolve(resource());
          dispose();
        }
      });
    });
  });
}

Otonashi•17mo ago

that's more or less what solid-primitive's until does https://github.com/solidjs-community/solid-primitives/tree/main/packages/promise#until

GitHub

solid-primitives/packages/promise at main · solidjs-community/solid...

A library of high-quality primitives that extend SolidJS reactivity. - solidjs-community/solid-primitives

Otonashi•17mo ago

though the usage is different (await until(users)).find(({ id }) => id === userId)

MathieuOP•16mo ago

Why is it okay to have createComputed inside the Promise block? Isn't the Pomise block considered async? And we can't have createEffect & co inside async code? here: https://github.com/solidjs-community/solid-primitives/blob/main/packages/promise/src/index.ts#L111 I guess the block in the promise is executed in the synchronous execution and I got confused

Gaming

Programming

How to await on the Resource's promise?