SG.devS
Convex Community•5mo ago•
4 replies
SG.dev

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",


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

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;
  },
});
Was this page helpful?