SolidJS•5mo ago

Pagination

Hi everyone Anyone already did pagination or infinite scrolling on Solid? If yes, can share how to do it please? I found a primitive for that, but I can't use the data fetching I have with the createInfiniteScroll. This is my second attempt:

const [searchParams, setSearchParams] = useSearchParams();

  const totalOfProjects = createAsync(() => getTotalOfProjects());

  const [paginationProps, page, setPage] = createPagination({
    pages: Math.ceil((totalOfProjects() ?? 0) / DEFAULT_PAGINATION_OFFSET),
  });

  const projects = createAsync(() => getProjects(page()));

  createEffect(() => {
    setSearchParams({
      page: page(),
    });
  });

const [searchParams, setSearchParams] = useSearchParams();

  const totalOfProjects = createAsync(() => getTotalOfProjects());

  const [paginationProps, page, setPage] = createPagination({
    pages: Math.ceil((totalOfProjects() ?? 0) / DEFAULT_PAGINATION_OFFSET),
  });

  const projects = createAsync(() => getProjects(page()));

  createEffect(() => {
    setSearchParams({
      page: page(),
    });
  });

Where The getProjects is:

const getProjects = cache(async (page = 1): Promise<GetProjectsQueryResult> => {
  'use server';

  try {
    const { start, end } = getPagination(page);

    return client.fetch<GetProjectsQueryResult>(getProjectsQuery, {
      start,
      end,
    });
  } catch {
    return [];
  }
}, 'projects');

const getProjects = cache(async (page = 1): Promise<GetProjectsQueryResult> => {
  'use server';

  try {
    const { start, end } = getPagination(page);

    return client.fetch<GetProjectsQueryResult>(getProjectsQuery, {
      start,
      end,
    });
  } catch {
    return [];
  }
}, 'projects');

Thanks 🙏

8 Replies

Daniel Sousa @TutoDSOP•5mo ago

Anyone can help me please?

Alex Lohr•5mo ago

Got you covered: https://primitives.solidjs.community/package/pagination

Solid Primitives

A library of high-quality primitives that extend SolidJS reactivity

Daniel Sousa @TutoDSOP•5mo ago

I'm trying to use that Any problem to do this:

  const [searchParams, setSearchParams] = useSearchParams();

  const totalOfProjects = createAsync(() => getTotalOfProjects());

  const [paginationProps, page, setPage] = createPagination({
    pages: Math.ceil((totalOfProjects() ?? 0) / DEFAULT_PAGINATION_OFFSET),
  });

  const projects = createAsync(() => getProjects(1));

  createEffect(() => {
    setSearchParams({
      page: page(),
    });
  });

  const [searchParams, setSearchParams] = useSearchParams();

  const totalOfProjects = createAsync(() => getTotalOfProjects());

  const [paginationProps, page, setPage] = createPagination({
    pages: Math.ceil((totalOfProjects() ?? 0) / DEFAULT_PAGINATION_OFFSET),
  });

  const projects = createAsync(() => getProjects(1));

  createEffect(() => {
    setSearchParams({
      page: page(),
    });
  });

I try to use createInfiniteScroll but didn't work

Alex Lohr•5mo ago

The problem here is that when totalOfProjects changes, pages is not updated. wrap the options in a function to make them reactive: createPagination(() => ({ pages: ... })). I haven't written infinite scrolling, so I need to have a closer look once I have some time.

Daniel Sousa @TutoDSOP•5mo ago

Thanks 🙏

Alex Lohr•5mo ago

happy to help. The use of reactivity in createPagination was a fun exercise. It is as fine-grained as possible.

Daniel Sousa @TutoDSOP•5mo ago

Is my first time using Solid, so thank you for your help and sorry for any noob question

Alex Lohr•5mo ago

I'm happy to help, so feel free to ask whenever you have any question.

Gaming

Programming

Pagination