SolidJS•14mo 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

TutoDSOP•14mo ago

Anyone can help me please?

Alex Lohr•14mo ago

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

Solid Primitives

A library of high-quality primitives that extend SolidJS reactivity

TutoDSOP•14mo 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•14mo 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.

TutoDSOP•14mo ago

Thanks 🙏

Alex Lohr•14mo ago

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

TutoDSOP•14mo ago

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

Alex Lohr•14mo ago

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

Gaming

Programming

Pagination

Did you find this page helpful?