cucaracha Posts - Answer Overflow

cucaracha

Explore posts from servers

•Created by cucaracha on 9/10/2024 in #❓-help

Auth in context is initially null leading to TRPCClientError: UNAUTHORIZED

im trying to get some images in my server component using a protected procedure

import { api } from '@/app/_trpc/server';
import Images from '@/components/images';

export default async function Home() {
  void api.main.getImages.prefetch();

  return (
    <main className="container flex flex-col pt-8">
      <Images />
    </main>
  );
}

import { api } from '@/app/_trpc/server';
import Images from '@/components/images';

export default async function Home() {
  void api.main.getImages.prefetch();

  return (
    <main className="container flex flex-col pt-8">
      <Images />
    </main>
  );
}

problem is that the session is initially null (using nextauth5) in my context which leads to a TRPCClientError: UNAUTHORIZED. then another call is made and the session exists

export const createTRPCContext = async (opts: { headers: Headers }) => {
  const session = await auth();

  return {
    db,
    session,
    ...opts,
  };
};

export const protectedProcedure = t.procedure
  .use(timingMiddleware)
  .use(({ ctx, next }) => {
    if (!ctx.session || !ctx.session.user) {
      throw new TRPCError({ code: 'UNAUTHORIZED' });
    }
    return next({
      ctx: {
        // infers the `session` as non-nullable
        session: { ...ctx.session, user: ctx.session.user },
      },
    });
  });

export const createTRPCContext = async (opts: { headers: Headers }) => {
  const session = await auth();

  return {
    db,
    session,
    ...opts,
  };
};

export const protectedProcedure = t.procedure
  .use(timingMiddleware)
  .use(({ ctx, next }) => {
    if (!ctx.session || !ctx.session.user) {
      throw new TRPCError({ code: 'UNAUTHORIZED' });
    }
    return next({
      ctx: {
        // infers the `session` as non-nullable
        session: { ...ctx.session, user: ctx.session.user },
      },
    });
  });

2 replies

TtRPC

•Created by cucaracha on 9/10/2024 in #❓-help

edge runtime config router specific

does the edge config have to be in app/api/trpc/[trpc]/route.ts? is it possible to have it only for a specific route?

2 replies

TTCTheo's Typesafe Cult

•Created by cucaracha on 4/27/2024 in #questions

whats the proper way to disable auto zoom focus on inputs and textareas on mobile?

whats the proper way to disable auto zoom focus on inputs and textareas on mobile? i know you can set max scale but ive heard thats bad practice. is there any other way to do this thats not considered "bad practice". i dont want to increase my font size too 16px +. anyone know how to hack this?

2 replies

RRailway

•Created by cucaracha on 2/23/2024 in #✋｜help

websocket server cannot connect to redis

ive a websocket server and a redis server hosted on railway. after the migration, my ws server can no longer connect to my redis server. ive tried both the redis url and redis private url but i get the same error:

node:internal/process/promises:288

triggerUncaughtException(err, true /* fromPromise */);

^

ConnectionTimeoutError: Connection timeout

at Socket.<anonymous> (/app/node_modules/@redis/client/dist/lib/client/socket.js:177:124)

at Object.onceWrapper (node:events:631:28)

at Socket.emit (node:events:517:28)

at Socket._onTimeout (node:net:598:8)

at listOnTimeout (node:internal/timers:569:17)

at process.processTimers (node:internal/timers:512:7)

Emitted 'error' event on Commander instance at:

at RedisSocket.<anonymous> (/app/node_modules/@redis/client/dist/lib/client/index.js:412:14)

at RedisSocket.emit (node:events:517:28)

at RedisSocket._RedisSocket_connect (/app/node_modules/@redis/client/dist/lib/client/socket.js:166:18)

at processTicksAndRejections (node:internal/process/task_queues:95:5)

at runNextTicks (node:internal/process/task_queues:64:3)

at listOnTimeout (node:internal/timers:538:9)

at process.processTimers (node:internal/timers:512:7)

at async Commander.connect (/app/node_modules/@redis/client/dist/lib/client/index.js:185:9)

Node.js v18.19.1

node:internal/process/promises:288

triggerUncaughtException(err, true /* fromPromise */);

^

ConnectionTimeoutError: Connection timeout

at Socket.<anonymous> (/app/node_modules/@redis/client/dist/lib/client/socket.js:177:124)

at Object.onceWrapper (node:events:631:28)

at Socket.emit (node:events:517:28)

at Socket._onTimeout (node:net:598:8)

at listOnTimeout (node:internal/timers:569:17)

at process.processTimers (node:internal/timers:512:7)

Emitted 'error' event on Commander instance at:

at RedisSocket.<anonymous> (/app/node_modules/@redis/client/dist/lib/client/index.js:412:14)

at RedisSocket.emit (node:events:517:28)

at RedisSocket._RedisSocket_connect (/app/node_modules/@redis/client/dist/lib/client/socket.js:166:18)

at processTicksAndRejections (node:internal/process/task_queues:95:5)

at runNextTicks (node:internal/process/task_queues:64:3)

at listOnTimeout (node:internal/timers:538:9)

at process.processTimers (node:internal/timers:512:7)

at async Commander.connect (/app/node_modules/@redis/client/dist/lib/client/index.js:185:9)

Node.js v18.19.1

49 replies

TTCTheo's Typesafe Cult

•Created by cucaracha on 6/2/2023 in #questions

is it worth it to have meaningful errors returned from server side form validation?

like is it worth it at that point to return an error for every field that is invalid from the backend or should you just throw a bad request assuming you already have full validation on client side like if someone does somehow bypass client validation lets say by disabling javascript is it even worth it to have meaningful server errors for every field i can see the argument for progressive enhancement but like if you want to have good ux on forms it feels like you almost always need javascript

112 replies

TTCTheo's Typesafe Cult

•Created by cucaracha on 4/4/2023 in #questions

react-native-web with existing web and mobile app

lets say you have a SPA web app with reactjs and a mobile app with react-native already with different state management and navigation across the two projects. you want to push for unified code between the two with react-native-web. how would you incrementally adopt react-native-web with these two projects. would you need a third project to develop net new features / interfaces in react-native-web where the interfaces are state and routing agnostic? this would be sort of a library that you use in your existing projects. or are you adding too much complexity at this point where its not worth it?

6 replies

TTCTheo's Typesafe Cult

•Created by cucaracha on 1/22/2023 in #questions

playing sound effects for a game on the web

should i try to implement this myself using native apis from scratch or is there a good npm package i can use?

2 replies

TTCTheo's Typesafe Cult

•Created by cucaracha on 12/21/2022 in #questions

content starting at a certain height

whats the best way to get content to start at a fixed position for example 25% height from the top on a 100% height page? just something like padding-top 25%? or is it better to use something like rem? and is there any good shorthands for this in tailwind?

5 replies

TTCTheo's Typesafe Cult

•Created by cucaracha on 12/13/2022 in #questions

functional components vs functions that return jsx

Are functions that return jsx in your component an anti pattern? Is it usually better to abstract these into another component outside of your current one?

4 replies

TTCTheo's Typesafe Cult

•Created by cucaracha on 10/14/2022 in #questions

rich text react

How would a component that lets a user customize rich text work? Would it just be markdown? What about wysiwyg? Is it just turning everything to markdown in real time?

15 replies

TTCTheo's Typesafe Cult

•Created by cucaracha on 10/10/2022 in #questions

Easiest way to toggle dark mode or light mode in react or next app?

I want to change my css variables to dark mode or light mode colors. Should i put my global css variables in __next and use a selector to change the css variable values? Are there any other ways that or better or easier?

10 replies

TTCTheo's Typesafe Cult

•Created by cucaracha on 10/7/2022 in #questions

Why can i click through a disabled button with ontouchstart event?

If im using onclick, my disabled button doesnt fire the onclick but if i use ontouchstart and i touch a disabled button, it still fires my ontouchstart event. Why is this and how can i prevent it?

5 replies

TTCTheo's Typesafe Cult

•Created by cucaracha on 10/5/2022 in #questions

setInterval timer with state setter

Im using a setInterval as a countdown timer and there is state being set within to display the timer. Would i need to stick this setInterval within a useEffect with a empty dependency to make sure it only runs once? Or is there a better way to do this?

3 replies

TTCTheo's Typesafe Cult

•Created by cucaracha on 9/30/2022 in #questions

Proper use of useEffect with KeyboardEvent eventListener

If there is state in my onKeyDown function which is set in document.addEventListener("keydown", onKeyDown), how would i keep my state within onKeyDown from getting stale? Should it be added as a dependency in my useEffect? For example:

useEffect(() => {
    document.addEventListener("keydown", onKeyDown);

    return () => document.removeEventListener("keydown", onKeyDown);
  }, [myState]);

useEffect(() => {
    document.addEventListener("keydown", onKeyDown);

    return () => document.removeEventListener("keydown", onKeyDown);
  }, [myState]);

9 replies

Gaming

Programming