timmm
timmm
PostsComments
CCConvex Community
Created by timmm on 9/9/2024 in #support-community
Tanstack + Realtime not working
I'm using tanstack query and I'm not getting updates until I refresh the page Is there anything obvious I'm doing wrong? This pattern was adapted from the example on the tanstack website https://tanstack.com/router/v1/docs/framework/react/examples/start-convex-trellaux Here's the project table 
projects: defineTable({
      id: v.string(),
      ownerUserId: v.id("users"),
      name: v.string(),
    })
      .index("id", ["id"])
      .index("ownerUserId", ["ownerUserId"]),
projects: defineTable({
      id: v.string(),
      ownerUserId: v.id("users"),
      name: v.string(),
    })
      .index("id", ["id"])
      .index("ownerUserId", ["ownerUserId"]),
This is my getProject code on the backend 
async function ensureProjectExists(
  ctx: QueryCtx,
  id: string,
): Promise<Doc<"projects">> {
  const project = await ctx.db
    .query("projects")
    .withIndex("id", (q) => q.eq("id", id))
    .unique();

  invariant(project, `missing project: ${id}`);
  return project;
}

export const getProject = query({
  args: {
    projectId: v.string(),
  },
  handler: async (ctx, args) => {
    const userId = await getAuthUserId(ctx);
    if (userId === null) throw new Error("Not authenticated");
    const project = withoutSystemFields(
      await ensureProjectExists(ctx, args.projectId),
    );
    if (project.ownerUserId != userId) throw new Error("Not authorized");
    return project;
  },
});
async function ensureProjectExists(
  ctx: QueryCtx,
  id: string,
): Promise<Doc<"projects">> {
  const project = await ctx.db
    .query("projects")
    .withIndex("id", (q) => q.eq("id", id))
    .unique();

  invariant(project, `missing project: ${id}`);
  return project;
}

export const getProject = query({
  args: {
    projectId: v.string(),
  },
  handler: async (ctx, args) => {
    const userId = await getAuthUserId(ctx);
    if (userId === null) throw new Error("Not authenticated");
    const project = withoutSystemFields(
      await ensureProjectExists(ctx, args.projectId),
    );
    if (project.ownerUserId != userId) throw new Error("Not authorized");
    return project;
  },
});
This is my queries on the frontend 
export const projectQueries = {
  list: () => convexQuery(api.projects.getUsersProjects, {}),
  getProject: ({ projectId }: { projectId: string }) =>
    convexQuery(api.projects.getProject, { projectId }),
};

export function useCreateProjectMutation() {
  const mutationFn = useConvexMutation(
    api.projects.createProject,
  ).withOptimisticUpdate((localStore, args) => {
    const { project } = args;

    const { id: projectId } = project;
    const projectQuery = localStore.getQuery(api.projects.getProject, {
      projectId,
    });
    if (projectQuery) {
      localStore.setQuery(
        api.projects.getProject,
        { projectId },
        {
          id: project.id,
          name: project.initialName,
          ownerUserId: projectQuery.ownerUserId,
        },
      );
    }
  });

  return useMutation({ mutationFn });
}
export const projectQueries = {
  list: () => convexQuery(api.projects.getUsersProjects, {}),
  getProject: ({ projectId }: { projectId: string }) =>
    convexQuery(api.projects.getProject, { projectId }),
};

export function useCreateProjectMutation() {
  const mutationFn = useConvexMutation(
    api.projects.createProject,
  ).withOptimisticUpdate((localStore, args) => {
    const { project } = args;

    const { id: projectId } = project;
    const projectQuery = localStore.getQuery(api.projects.getProject, {
      projectId,
    });
    if (projectQuery) {
      localStore.setQuery(
        api.projects.getProject,
        { projectId },
        {
          id: project.id,
          name: project.initialName,
          ownerUserId: projectQuery.ownerUserId,
        },
      );
    }
  });

  return useMutation({ mutationFn });
}
This is how i render it 
export function ProjectChat({ projectId, chatId }: ProjectChatProps) {
  const projectQuery = useSuspenseQuery(
    convexQuery(api.projects.getProject, {
      projectId,
    }),
  );

  if (!projectQuery.data) {
    return null;
  }

  return (
    <div className="flex flex-col">
      <div className="p-2">{projectQuery.data.name}</div>
      <div className="flex">
        <div className="w-[500px] flex-shrink-0">{projectQuery.data.name}</div>
        <div className="flex-grow">test</div>
      </div>
    </div>
  );
}
export function ProjectChat({ projectId, chatId }: ProjectChatProps) {
  const projectQuery = useSuspenseQuery(
    convexQuery(api.projects.getProject, {
      projectId,
    }),
  );

  if (!projectQuery.data) {
    return null;
  }

  return (
    <div className="flex flex-col">
      <div className="p-2">{projectQuery.data.name}</div>
      <div className="flex">
        <div className="w-[500px] flex-shrink-0">{projectQuery.data.name}</div>
        <div className="flex-grow">test</div>
      </div>
    </div>
  );
}
9 replies