david Posts - Answer Overflow

david

Explore posts from servers

•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

RRailway

•Created by david on 1/29/2024 in #✋｜help

WordPress setup issues? (New Timer) ForbiddenYou don't have permission to access this resource.

Hello! I'm looking to potentially migrate a majority of our companies heroku applications and wordpress websites over to railway.app, just wanted to give it a test and am struggling to setup heroku (apologies first time!) Project ID: 6902c949-4f5a-4122-964a-4a5d3e317c9e I'm currently on a trial plan, and have tried using this template which I found by going from https://railway.app/templates -> https://railway.app/template/EP4wIt. I didn't modify any of the configuration (just wanted to see if i could get it up and running first) have waited ~ 25 mins now and when attempting to access the site an error occurs with: Forbidden You don't have permission to access this resource. Apache/2.4.57 (Debian) Server at primary-production-c5f5.up.railway.app Port 80 When looking into the logs for the application I can see this error: AH01276: Cannot serve directory /var/www/html/: No matching DirectoryIndex (index.php,index.html,index.php,index.html) found, and server-generated directory index forbidden by Options directive I have a bit of experience with Docker, but much less with WordPress (mostly work with node!) the wordpress movement is more of an important piece at the moment for our business requirements. Any guidance would be massively appreciated thank you 😄 and looking forward to hopefully centralizing all of our deployments!

8 replies

Gaming

Programming