dnbull•2mo ago

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>

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);
  },
});

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'}

{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.

3 Replies

Convex Bot•2mo ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

erquhart•2mo ago

results is always present, that part is a red herring - this is simply stuck in loading. Are you using expectAuth: true in the Convex React client?

dnbullOP•2mo ago

Hey thanks for the response, and yes it looks like expectAuth: true was the reason for my issues.

Question about `isLoading` from `usePaginatedQuery` hook.

Did you find this page helpful?