zid•15mo ago

split for paginated queries

trying to implement basic paginated query. also saw read that "skip" feature does not exist yet for usePaginatedQuery. with that in mind, i get the following error: TypeError: Cannot read properties of null (reading 'splitCursor')

  // client
  const { results, isLoading, status, loadMore } = usePaginatedQuery(
    api.user.getUserEquips,
    { userId, type: "mana" },
    { initialNumItems: 5 }
  );

// server
export const getUserEquips = query({
  args: {
    paginationOpts: paginationOptsValidator,
    userId: v.union(v.string(), v.null()),
    type: v.union(v.string(), v.null()),
  },
  handler: async ({ db }, { userId, type }) => {
    if (
      userId === null ||
      userId === undefined ||
      type === null ||
      type === undefined
    ) {
      return;
    }

    return await db
      .query("userEquips")
      .withIndex("by_userId_type", (q) =>
        q.eq("userId", userId).eq("type", type)
      )
      .order("desc")
      .paginate(args.paginationOpts);
  },
});

  // client
  const { results, isLoading, status, loadMore } = usePaginatedQuery(
    api.user.getUserEquips,
    { userId, type: "mana" },
    { initialNumItems: 5 }
  );

// server
export const getUserEquips = query({
  args: {
    paginationOpts: paginationOptsValidator,
    userId: v.union(v.string(), v.null()),
    type: v.union(v.string(), v.null()),
  },
  handler: async ({ db }, { userId, type }) => {
    if (
      userId === null ||
      userId === undefined ||
      type === null ||
      type === undefined
    ) {
      return;
    }

    return await db
      .query("userEquips")
      .withIndex("by_userId_type", (q) =>
        q.eq("userId", userId).eq("type", type)
      )
      .order("desc")
      .paginate(args.paginationOpts);
  },
});

when i pass in a literal value to userId, it works. so it seems i need to figure out a way to pass in async values/arguments to usePaginatedQuery. since "skip" is not yet supported, what would you suggest? Is the only way to initialize the paginated query in a child component of where the userId has been fetched?

3 Replies

lee•15mo ago

Hmm we can probably make that error message better. I think a child component would work best, but you could also try returning placeholder data. Instead of return; you could try return { page: [], isDone: false, continueCursor: "" }; Let me know how that goes. cc @ballingt who was thinkng about "skip" for paginated queries

ballingt•15mo ago

Yeah this is coming up @zid

unsphere•15mo ago

yeah skip für paginated queries would be nice. I am facing the need for it in my actual use case as well.

split for paginated queries

Did you find this page helpful?