4 replies

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-useruse-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.tsuse-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.tsconvex/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;
  },
});

Convex Community•8mo ago•

4 replies

SG.dev

Convex Auth - re-rendering / caching issue in NextJS

"@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.tsuse-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.tsconvex/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;
  },
});

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

Convex Community

Join the Convex Discord! Explore Convex, the backend platform that keeps your app in sync.

15,960 Members

Join

Convex Auth - re-rendering / caching issue in NextJS

Convex Auth - re-rendering / caching issue in NextJS

Continue the conversation

Convex Community

Continue the conversation

Convex Community

Similar Threads