david Posts

david

•Created by david on 7/17/2024 in #❓-help

How to treat mongoose/mongodb ObjectIDs as their serialized string values on the frontend?

Node Environment Version: v20.10.0 Package Manager: PNPM Workspaces Repo Setup: Monorepo/Turborepo Environment: WSL with VSCode TRPC Versions:

    "@trpc/client": "11.0.0-rc.403",
    "@trpc/react-query": "11.0.0-rc.403",
    "@trpc/server": "11.0.0-rc.403",

    "@trpc/client": "11.0.0-rc.403",
    "@trpc/react-query": "11.0.0-rc.403",
    "@trpc/server": "11.0.0-rc.403",

If I have a query procedure as follows:

 get_all_users: authenticatedProcedure.query(async ({ ctx }) => {
    const users = await User.find({})
      .select<{
        user_name: string;
      }>("user_name")
      .lean();

    return users;
  }),

 get_all_users: authenticatedProcedure.query(async ({ ctx }) => {
    const users = await User.find({})
      .select<{
        user_name: string;
      }>("user_name")
      .lean();

    return users;
  }),

and a simple frontend render on react as follows:

import { trpc } from "@/features/trpc";

const ViewUsers = () => {
  const { data, isLoading, error } = trpc.admin.get_all_users.useQuery();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {data?.map((user) => <div key={user._id}>{user.user_name}</div>)}
    </div>
  );
};
export default ViewUsers;

import { trpc } from "@/features/trpc";

const ViewUsers = () => {
  const { data, isLoading, error } = trpc.admin.get_all_users.useQuery();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {data?.map((user) => <div key={user._id}>{user.user_name}</div>)}
    </div>
  );
};
export default ViewUsers;

The frontend gives an error like:

Type 'ObjectId' is not assignable to type 'Key | null | undefined'.ts(2322)
index.d.ts(261, 9): The expected type comes from property 'key' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'
(property) React.Attributes.key?: React.Key | null | undefined

Type 'ObjectId' is not assignable to type 'Key | null | undefined'.ts(2322)
index.d.ts(261, 9): The expected type comes from property 'key' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'
(property) React.Attributes.key?: React.Key | null | undefined

However. The actual serialized value is of course a string for each _id. What is the current expectation to handle these values? Of course, you can manually say String(user._id) but is there a more appropriate method to handle this? Like a way to inform TS that these are strings and not ObjectId's on the frontend? I've tried my best to look at some other threads mentioning it, they however seem to mention declaring additional zod output schemas which feels quite cumbersome if you're intending on having varying different data returned. The goal is to have the values treated as strings i feel. Thanks for any help guys :)

3 replies

TtRPC

•Created by david on 6/26/2024 in #❓-help

All backend imports becoming accessible on frontend?

Node Environment Version: v20.10.0 Package Manager: PNPM Workspaces Repo Setup: Monorepo/Turborepo Environment: WSL with VSCode TRPC Versions:

    "@trpc/client": "11.0.0-rc.403",
    "@trpc/react-query": "11.0.0-rc.403",
    "@trpc/server": "11.0.0-rc.403",

    "@trpc/client": "11.0.0-rc.403",
    "@trpc/react-query": "11.0.0-rc.403",
    "@trpc/server": "11.0.0-rc.403",

Hello! First time user of TRPC. I've setup my project, and now have it so that it exports appRouter on the backend Backend

export type AppRouter = typeof appRouter;

export type AppRouter = typeof appRouter;

Then on the frontend like the tutorial I have a hooks file for trpc that imports the backend Frontend

import { createTRPCReact } from "@trpc/react-query";
import type { AppRouter } from "../../../../../backend/src";

export const trpc = createTRPCReact<AppRouter>({});

import { createTRPCReact } from "@trpc/react-query";
import type { AppRouter } from "../../../../../backend/src";

export const trpc = createTRPCReact<AppRouter>({});

The structure is setup as follows

apps/
├─ backend/
├─ frontend/

apps/
├─ backend/
├─ frontend/

However in VSCode all other backend imports are displayed during autoimport now in the frontend project? For example I can now do something like

import User from "../../../../../backend/src/models/User";

import User from "../../../../../backend/src/models/User";

When the line to import AppRouter is removed, none of the backend autocomplete imports appear. I realistically would only like to expose that type and nothing else, I don't think imports actually work, as in Vite/React will throw errors when you try to use that backend import them during runtime. But is there a way to prevent the other imports from appearing? Is this behaviour expected? I also tried to use pnpm link and export only a file containing the AppRouter but this didn't seem to prevent it either Backend package.json

  "exports": {
    ".": "./src/types/trpc.types.ts"
  },

  "exports": {
    ".": "./src/types/trpc.types.ts"
  },

Backend trpc.types.ts

import { appRouter } from "../app";

export type AppRouter = typeof appRouter;

import { appRouter } from "../app";

export type AppRouter = typeof appRouter;

Frontend

import type { AppRouter } from "backend";

// This still shows when writing "import Us.." for example.
import User from "node_modules/backend/src/models/User";

import type { AppRouter } from "backend";

// This still shows when writing "import Us.." for example.
import User from "node_modules/backend/src/models/User";

10 replies