#paginator

12 messages · Page 1 of 1 (latest)

glacial gyro
#

@stark garnet write example code getting data from a conex component and using the convex helpers paginator to intergate through it.

stark garnetBOT
#

Hi @glacial gyro. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Convex components can’t use the built‑in .paginate, so you should use the paginator helper from convex-helpers instead when you need pagination inside a component. [Components authoring]

Below is a minimal end‑to‑end example that:

  • Reads from a Convex component inside a regular query (or another component function) via components.myComponent.
  • Uses paginator from convex-helpers/server/pagination to paginate through the component’s data.
// convex/myPaginatedComponent.ts
import { v } from "convex/values";
import { query } from "./_generated/server";
import { paginator } from "convex-helpers/server/pagination";
import { paginationOptsValidator } from "convex/server";
import schema from "./schema";

// This is a *component-aware* query that calls into a component
// (e.g. components.myComponent.listItems) and paginates the results
export const listFromComponent = query({
  args: {
    paginationOpts: paginationOptsValidator,
  },
  handler: async (ctx, { paginationOpts }) => {
    // Start a paginator using your schema
    const p = paginator(ctx.db, schema);

    // You can treat the component’s table just like any other table.
    // For example, suppose your component writes to "component_items".
    const queryBuilder = p
      .query("component_items")
      // use an index if you have one, e.g. by_owner
      // .withIndex("by_owner", q => q.eq("ownerId", someOwnerId))
      // you can also filter in TypeScript if needed
      .filterWith(async (doc) => {
        // arbitrary predicate
        return !doc.archived;
      });

    // Finally, paginate using convex-helpers’ paginator
    return queryBuilder.paginate(paginationOpts);
  },
});
#

In React, you’d not use the built‑in usePaginatedQuery for a component‑backed API, but the usePaginatedQuery from convex-helpers instead, per the docs. [Components authoring]

// src/App.tsx
import { usePaginatedQuery } from "convex-helpers/react"; // NOT convex/react
import { api } from "../convex/_generated/api";

export function App() {
  const { results, status, loadMore } = usePaginatedQuery(
    api.myPaginatedComponent.listFromComponent,
    {},                      // args except paginationOpts
    { initialNumItems: 10 }, // first page size
  );

  return (
    <div>
      {results?.map((item) => (
        <div key={item._id}>{JSON.stringify(item)}</div>
      ))}
      <button
        disabled={status !== "CanLoadMore"}
        onClick={() => loadMore(10)}
      >
        Load more
      </button>
    </div>
  );
}

The key points, all from the docs:

  • Inside components (or code using components) you should not call .paginate; instead, call paginator(ctx.db, schema) and then .paginate(paginationOpts) on that helper. [Components authoring]
  • In React, pair that with usePaginatedQuery from convex-helpers, not convex/react, when your API comes from a component. [Components authoring]

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@glacial gyro Kapa.ai is still learning and improving, please let me know how I did by reacting below.

glacial gyro
#

@stark garnet can paginator be used within a component?

stark garnetBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Yes.

The docs explicitly say that the built‑in .paginate() does not work in components and that you should use paginator from convex-helpers when you need pagination within your component. [Components authoring]

So:

  • Inside a Convex component, you should use paginator from convex-helpers for pagination.
  • If you expose that paginated API to React and want to use usePaginatedQuery, you should use the usePaginatedQuery from convex-helpers instead of convex/react. [Components authoring]

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@glacial gyro Kapa.ai is still learning and improving, please let me know how I did by reacting below.

glacial gyro
stark garnetBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

You’re right to point to that file; it’s the canonical example the docs reference. And yes: that example does use paginator from within a component, which matches what the docs say is recommended. [Components authoring]

From the docs (paraphrased):

The built‑in .paginate() doesn’t work in components… therefore we recommend you use paginator from convex-helpers if you need pagination within your component. [Components authoring]

And they link exactly to that chunks.ts example as the reference implementation. [Components authoring]

So to answer your earlier question succinctly:

  • Yes, paginator is intended to be used inside components.
  • The RAG component (chunks.ts at the link you gave) is the official example of doing so, and it’s what the docs point to.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: