dnbullD
Convex Community•4mo ago•
3 replies
dnbull

Question about `isLoading` from `usePaginatedQuery` hook.

Am I missing something here? The idea here is that if no results return (empty array), I expect the isLoading to be set to false but it stays true even if the results are 0. 

const { results, status, loadMore, isLoading } = usePaginatedQuery(
    api.articles.listArticles,
    {},
    { initialNumItems: ARTICLES_PER_PAGE }
  );
  return (
    <div>
      <Welcome />
      {isLoading ? (
        <div>Loading...</div>
      ) : results.length === 0 ? (
        <ArticleDialog />
      ) : (
        results.map((article) => (
          <div key={article._id} className="flex flex-col gap-5">
            <p>{article?.title}</p>
          </div>
        ))
      )}
    </div>


export const listArticles = query({
  args: { paginationOpts: paginationOptsValidator },
  handler: async (ctx, args) => {
    const identity = await ctx.auth.getUserIdentity();

    if (!identity) {
      return {
        page: [],
        isDone: true,
        continueCursor: '',
      };
    }

    const userId = identity.subject;

    return await ctx.db
      .query('articles')
      .withIndex('userId', (q) => q.eq('userId', userId))
      .order('desc')
      .paginate(args.paginationOpts);
  },
});


console log results:
{results: 0, isLoading: true, status: 'LoadingFirstPage', timestamp: '13:28:30.244Z'}


If I do have an item in the results, the isLoading results to false as expected.
Was this page helpful?