SG.dev•3w ago

Convex Auth - re-rendering / caching issue in NextJS

Hey all, I'm seeking some advice for how I can resolve an issue I'm experiencing. On page navigation the components that consume my use-user hook tend to flash with a loading state and I would like to avoid this. Any help would be much appreciated. I initially tried this without using the react-query wrapper, but the problem persists in both cases. Related packages I'm using:

"@auth/core": "0.37.0",
"@convex-dev/auth": "^0.0.88",
"@convex-dev/react-query": "0.0.0-alpha.11",
"next": "15.5.0",
"@tanstack/react-query": "^5.85.5",

"@auth/core": "0.37.0",
"@convex-dev/auth": "^0.0.88",
"@convex-dev/react-query": "0.0.0-alpha.11",
"next": "15.5.0",
"@tanstack/react-query": "^5.85.5",

use-user.ts

import { convexQuery } from "@convex-dev/react-query";
import { useQuery } from "@tanstack/react-query";
import { api } from "../../../../convex/_generated/api";

export const useUser = () => {
  const {
    data: user,
    isLoading,
    error,
  } = useQuery(convexQuery(api.users.getUser, {}));

  const { data: userOrgs, isLoading: isUserOrgsLoading } = useQuery(
    convexQuery(api.users.getUserOrgs, {})
  );

  return { user, isLoading, error, userOrgs, isUserOrgsLoading };
};

import { convexQuery } from "@convex-dev/react-query";
import { useQuery } from "@tanstack/react-query";
import { api } from "../../../../convex/_generated/api";

export const useUser = () => {
  const {
    data: user,
    isLoading,
    error,
  } = useQuery(convexQuery(api.users.getUser, {}));

  const { data: userOrgs, isLoading: isUserOrgsLoading } = useQuery(
    convexQuery(api.users.getUserOrgs, {})
  );

  return { user, isLoading, error, userOrgs, isUserOrgsLoading };
};

convex/users.ts

import { getAuthUserId } from "@convex-dev/auth/server";
import { query } from "./_generated/server";

export const getUser = query({
  handler: async (ctx) => {
    const userId = await getAuthUserId(ctx);
    if (!userId) {
      return;
    }
    const user = await ctx.db.get(userId);
    if (!user) {
      return null;
    }
    return user;
  },
});

import { getAuthUserId } from "@convex-dev/auth/server";
import { query } from "./_generated/server";

export const getUser = query({
  handler: async (ctx) => {
    const userId = await getAuthUserId(ctx);
    if (!userId) {
      return;
    }
    const user = await ctx.db.get(userId);
    if (!user) {
      return null;
    }
    return user;
  },
});

4 Replies

Convex Bot•3w 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!

SG.devOP•3w ago

Seems to work fine now when using NextJS Link component for page navigation

Clever Tagline•3w ago

I only work in one NextJS project that's pretty old, and only very seldom, but I believe Link is the "proper" way to navigate within the app. Only use <a> if you need to link to some page/resource outside of the app.

SG.devOP•2w ago

yeah I was using a Breadcrumb component from shadcn that was using the <a> under the hood, it wasn't immediately obvious.

Convex Auth - re-rendering / caching issue in NextJS

Did you find this page helpful?