Hook proposal >>> useResourceValue

[omerman]

What is it about?

a hook that accepts useResource return value, listens to when it finishes
and makes the resource handling in a react query like way

const myResource = useResource$(...);
const { data, loading, error } = useResourceValue(myResource);

data - Signal that holds the actual awaited value
error - Signal that holds the error
loading - re-export of the myResource.loading

What's the motivation for this proposal?

Basically in the code we can use <Resource ../> to render something out of the resource.
Sometimes we would just want to pass the result as a property to another component.
Thats not possible in the Promise state of the resource's value.

Proposed Solution / Feature

What do you propose?

I actually already have a draft version of my own that seems to work well.

Code examples

export function useResourceValue<T>(resource: ResourceReturn<T>) {
  const data = useSignal<T | undefined>(undefined);
  const error = useSignal<Error | undefined>(undefined);

  // Check if we already have data at initialization (SSR case)
  if (!resource.loading) {
    resource.value.then(
      (resolvedValue) => {
        data.value = resolvedValue;
      },
      (rejectedError) => {
        error.value = rejectedError;
      },
    );
  }

  useTask$(({ track }) => {
    // Track the loading state
    const isLoading = track(() => resource.loading);

    if (!isLoading) {
      // Once loading is complete, the promise has settled
      // Use it to get the actual data
      resource.value.then(
        (resolvedValue) => {
          data.value = resolvedValue;
        },
        (rejectedError) => {
          error.value = rejectedError;
        },
      );
    }
  });

  return {
    data: data,
    loading: resource.loading,
    error: error,
  };
}

// Example usage
  const tracksResource = useResource$(async ({ cleanup, track, previous }) => {
    track(favoritesDrawerOpen);
    track(user);
    if (!favoritesDrawerOpen.value || !user.value) return previous || null;
    if (previous) return previous;

    const controller = new AbortController();
    cleanup(() => controller.abort());

    return await fetchFavoriteTracks(controller.signal);
  });

  const { data: tracks, loading } = useResourceValue(tracksResource);

  ...
  return <SomeComponent tracks={tracks ?? []}>

The above is more convenient(DXwise) than rendering a Resource with a pending/resolved/error rendering versions.
Its much easier to maintain.

Links / References

No response

[ianlet]

We also made a very similar hook in our project, but with a slightly different approach:

import type { QRL, ResourceFn, ResourceOptions } from "@builder.io/qwik";
import { implicit$FirstArg, useResourceQrl, useStore, useTask$ } from "@builder.io/qwik";

interface InlineResource<T> {
  value?: T | null;
  loading: boolean;
  error?: Error;
}

export function useInlineResourceQrl<T>(
  qrl: QRL<ResourceFn<T>>,
  opts?: ResourceOptions,
): InlineResource<T> {
  const store = useStore<InlineResource<T>>({
    value: undefined,
    error: undefined,
    loading: true,
  });
  const resource = useResourceQrl(qrl, opts);

  useTask$(async ({ track }) => {
    const loading = track(() => resource.loading);

    if (!loading) {
      try {
        store.value = await resource.value;
      } catch (e) {
        store.error = e as Error;
      }
    }

    store.loading = loading;
  });

  return store;
}

export const useInlineResource$ =  /* @__PURE__ */ implicit$FirstArg(useInlineResourceQrl);

Usage:

const UseInlineResource = component$(() => {
  const todoId = useSignal(1);

  const todo = useInlineResource$(async ({ track, cleanup }) => {
    const id = track(todoId);

    const controller = new AbortController();
    cleanup(() => controller.abort());

    const r = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {
      signal: controller.signal,
    });
    return await r.json();
  });

  return (
    <div>
      <button onClick$={() => todoId.value++}>Next todo</button>

      <ul>
        <li>Loading: {todo.loading ? "true" : "false"}</li>
        <li>Value: {JSON.stringify(todo.value)}</li>
        <li>Error: {todo.error?.message}</li>
      </ul>
    </div>
  );
});

If that can be useful to anyone.

[omerman]

Thank you for sharing, I might switch to yours 🙏