Pagination with createAsync and cache

[srikrsna]

Hey! With the v0.10.0 APIs I am trying to understand how pagination can work.

For page based pagination i.e. the page token can be part of the url and we can just navigate to the new url which should just refresh the data. This seems straightforward to me.

My use case is slightly different, I want my results to be part of an scrollable list like how social feeds are. Previously I just used createResource like this:

import {
  Accessor,
  batch,
  createEffect,
  createMemo,
  createResource,
  createSignal,
  on,
} from "solid-js";

/**
 * Create a paginated resource.
 *
 * @param source is the input to the paginated fetch. States gets reset when source changes.
 */
export function createPaginatedResource<I, T>(
  source: Accessor<I>,
  fetch: (i: I, page: string) => Promise<{ page: T[]; nextPageToken: string }>,
) {
  const [pageToken, setPageToken] = createSignal<string>();
  const [resource, { refetch: refetchResource, mutate }] = createResource(
    async () => {
      const result = await fetch(source(), pageToken() ?? "");
      setPageToken(result.nextPageToken);
      return result.page;
    },
  );
  const refetch = () => {
    setPageToken(undefined);
    return refetchResource();
  };
  // Whenever the source changes we want to refetch the first page.
  //
  // This should only happen after the first change.
  createEffect(
    on(
      source,
      () => {
        setPageToken(undefined);
        refetch();
      },
      { defer: true },
    ),
  );
  const hasMore = createMemo(() => pageToken() !== "");
  const loadMore = async () => {
    if (!hasMore() || pageToken() == undefined) {
      return;
    }
    const nextPage = await fetch(source(), pageToken() ?? "");
    batch(() => {
      setPageToken(nextPage.nextPageToken);
      mutate((prev) => [...(prev ?? []), ...nextPage.page]);
    });
  };
  return [resource, { hasMore, loadMore, refetch }] as const;
}

I did not integrate this with the data functions of the previous router. With the newer APIs backed by a cache I was hoping to utilize the load option of the route along with cache to load the first page and continue loading something like this. But the docs say cache won't work inside createResource.

Any idea how I can make use of createAsync and cache here?

[srikrsna]

Never mind got it working:

import { batch, createMemo, createResource, createSignal } from "solid-js";

export function createPaginatedResource<T>(
  fn: (page: string) => Promise<{ page: T[]; nextPageToken: string }>,
) {
  const [pageToken, setPageToken] = createSignal<string>();
  const [resource, { mutate }] = createResource(
    () => fn(""),
    async (p) => {
      const v = await p;
      setPageToken(v.nextPageToken);
      return v.page;
    },
  );
  const hasMore = createMemo(() => pageToken() !== "");
  const loadMore = async () => {
    const nextToken = pageToken();
    if (!hasMore() || nextToken == undefined) {
      return;
    }
    const nextPage = await fn(nextToken);
    batch(() => {
      setPageToken(nextPage.nextPageToken);
      mutate((prev) => [...(prev ?? []), ...nextPage.page]);
    });
  };
  return [resource, { hasMore, loadMore }] as const;
}