getAuthUserId with tanstack userId null

When using using useQuery from @tanstack/react-query, getAuthUserId always returning null so the current userId is null

6 Replies

How are you hooking up auth? It's possible but it's extra work. Something like this? https://github.com/get-convex/convex-react-query?tab=readme-ov-file#authentication-example-todo

jeremienegieOP•5mo ago

 <ConvexAuthNextjsServerProvider>
      <html lang="en">
        <body className={inter.className}>
          <ConvexClientProvider>
            <TanstackProvider>
              <JotaiProvider>
                <Toaster />
                <Modals />
                {children}
              </JotaiProvider>
            </TanstackProvider>
          </ConvexClientProvider>
        </body>
      </html>
    </ConvexAuthNextjsServerProvider>

 <ConvexAuthNextjsServerProvider>
      <html lang="en">
        <body className={inter.className}>
          <ConvexClientProvider>
            <TanstackProvider>
              <JotaiProvider>
                <Toaster />
                <Modals />
                {children}
              </JotaiProvider>
            </TanstackProvider>
          </ConvexClientProvider>
        </body>
      </html>
    </ConvexAuthNextjsServerProvider>

this in my layout.tsx mutations are working fine it's just queries

ballingt•5mo ago

Oh with Nextjs, interesting. Are these queries being kicked of from the server or the client?

jeremienegieOP•5mo ago

From the client so when I do this

export const useGetChannel = ({ id }: UseGetChannelProps) => {
  const data = useQuery(api.channels.getById, { id });
  const isLoading = data === undefined;

  return { data, isLoading };
};

export const useGetChannel = ({ id }: UseGetChannelProps) => {
  const data = useQuery(api.channels.getById, { id });
  const isLoading = data === undefined;

  return { data, isLoading };
};

UserId in getById is there but doing this

export const useGetChannel = ({ id }: UseGetChannelProps) => {
  const query = useQuery({ ...convexQuery(api.channels.getById, { id }) });
  return query;
};

export const useGetChannel = ({ id }: UseGetChannelProps) => {
  const query = useQuery({ ...convexQuery(api.channels.getById, { id }) });
  return query;
};

For some reason userId is null

ballingt•5mo ago

This needs work, hence the TODO at https://github.com/get-convex/convex-react-query?tab=readme-ov-file#authentication-example-todo — everything should be possible now but as I roll back onto this project I'll get an example @jeremienegie If you open up the browser devtools and look at the WebSocket connection, is auth ever being sent over? You may have two separate convex clients depending on how you've set things up Is this code you can share? Or DM? If you've got a smaller reproduction you can open an issue at https://github.com/get-convex/convex-react-query I haven't tried an example yet so I don't know if there's something that doesn't work yet or if it's misconfigured, should have some progress on a real example by next week.

jeremienegieOP•4mo ago

// convex/channels.ts
export const getById = query({
  args: {
    id: v.id("channels"),
  },
  handler: async (ctx, args) => {
    const userId = await getAuthUserId(ctx);

    if (!userId) {
      return null;
    }

    const channel = await ctx.db.get(args.id);

    if (!channel) {
      return null;
    }

    const member = await ctx.db
      .query("members")
      .withIndex("by_workspace_id_user_id", (q) =>
        q.eq("workspaceId", channel.workspaceId).eq("userId", userId)
      )
      .unique();

    if (!member) {
      return null;
    }

    return channel;
  },
});

// convex/channels.ts
export const getById = query({
  args: {
    id: v.id("channels"),
  },
  handler: async (ctx, args) => {
    const userId = await getAuthUserId(ctx);

    if (!userId) {
      return null;
    }

    const channel = await ctx.db.get(args.id);

    if (!channel) {
      return null;
    }

    const member = await ctx.db
      .query("members")
      .withIndex("by_workspace_id_user_id", (q) =>
        q.eq("workspaceId", channel.workspaceId).eq("userId", userId)
      )
      .unique();

    if (!member) {
      return null;
    }

    return channel;
  },
});

// use-get-channel.ts
import { Id } from "../../../../convex/_generated/dataModel";
// import { useQuery } from "convex/react";
import { api } from "../../../../convex/_generated/api";
import { useQuery } from "@tanstack/react-query";
import { convexQuery } from "@convex-dev/react-query";

type UseGetChannelProps = {
  id: Id<"channels">;
};

// I console.log userId and it prints the userId
// export const useGetChannel = ({ id }: UseGetChannelProps) => {
//   const data = useQuery(api.channels.getById, { id });
//   const isLoading = data === undefined;

//   return { data, isLoading };
// };


// I console.log userId and it shows null
export const useGetChannel = ({ id }: UseGetChannelProps) => {
  const query = useQuery({ ...convexQuery(api.channels.getById, { id }) });
  return query;
};

// use-get-channel.ts
import { Id } from "../../../../convex/_generated/dataModel";
// import { useQuery } from "convex/react";
import { api } from "../../../../convex/_generated/api";
import { useQuery } from "@tanstack/react-query";
import { convexQuery } from "@convex-dev/react-query";

type UseGetChannelProps = {
  id: Id<"channels">;
};

// I console.log userId and it prints the userId
// export const useGetChannel = ({ id }: UseGetChannelProps) => {
//   const data = useQuery(api.channels.getById, { id });
//   const isLoading = data === undefined;

//   return { data, isLoading };
// };


// I console.log userId and it shows null
export const useGetChannel = ({ id }: UseGetChannelProps) => {
  const query = useQuery({ ...convexQuery(api.channels.getById, { id }) });
  return query;
};

I shared my layout.ts above I don't think I'm running two convex client but ey I'm just learning convex I don't understand why one working anf the other no my mutations with tanstack is running perfectly with the set up I have Okay thank you. Hi @ballingt I wanted to ask if you had a look at the problem

getAuthUserId with tanstack userId null

Did you find this page helpful?