Nestor
Nestor
Explore posts from servers
TtRPCTTCTheo's Typesafe Cult
PostsComments
TTCTheo's Typesafe Cult
Created by Nestor on 8/13/2023 in #questions
useSuspenseQuery halt until server action is called
Hey, server-action dummy here. I have a query in useSuspenseQuery that I want called only when a form is filled and submited. Ideally this should all be server-components ? https://github.com/Nsttt/nameseeker/blob/2746ec2528c3897661ffcb21937c94d3168934da/src/components/serviceList.tsx#L65 here's the code, very WIP but any help is appreciated
5 replies
TTCTheo's Typesafe Cult
Created by Nestor on 6/18/2023 in #questions
How to process.exit(1) from NextJS app
Currently I´m trying to `process.exit(1) from inside a nextjs app runnig in standalone mode inside a container. But I cannot get the process (and container) to be terminated. Instead I get a 
Error: socket hang up
    at connResetException (node:internal/errors:705:14)
    at Socket.socketOnEnd (node:_http_client:518:23)
    at Socket.emit (node:events:525:35)
    at endReadableNT (node:internal/streams/readable:1358:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  code: 'ECONNRESET'
}
Error: socket hang up
    at connResetException (node:internal/errors:705:14)
    at Socket.socketOnEnd (node:_http_client:518:23)
    at Socket.emit (node:events:525:35)
    at endReadableNT (node:internal/streams/readable:1358:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  code: 'ECONNRESET'
}
11 replies
TTCTheo's Typesafe Cult
Created by Nestor on 12/6/2022 in #questions
Is it a bad idea to choose to use mongodb with Prisma on the t3 stack?
Basically, there's an already setup mongodb in a project, I could push to use a relational db but for now it will only be used for users so Id probably live with mongo for now. I've read some stuff here that Prisma doesn't work well with mongo, does anyone know its issues ?
8 replies
TTCTheo's Typesafe Cult
Created by Nestor on 11/30/2022 in #questions
NextJS api authentication with 3rd party API
Hello ! We currently have a NextJS app that uses its API routes to call an external API and retrieve data that way. So essentially such files might look like this. 
import env from "@env/server.mjs";
import axios from "axios";
import { NextApiRequest, NextApiResponse } from "next";

export default async function building(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const { id } = req.query;
  const { assetUrl } = env;
  const baseUrl = `${assetUrl}/building`;
  const url = id !== undefined ? `${baseUrl}/${id}` : baseUrl;
  const token = req.headers["access-token"] as string;

  try {
    const response = await axios.get(url, {
      headers: {
        "Access-Token": token,
        "Content-Type": "application/json",
        "Cache-Control": "no-cache",
      },
    });
    res.status(200).json(response.data);
  } catch (err) {
    if (axios.isAxiosError(err)) {
      res.status(err.response!.status).json(err.response!.data);
    }
  }
}
import env from "@env/server.mjs";
import axios from "axios";
import { NextApiRequest, NextApiResponse } from "next";

export default async function building(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const { id } = req.query;
  const { assetUrl } = env;
  const baseUrl = `${assetUrl}/building`;
  const url = id !== undefined ? `${baseUrl}/${id}` : baseUrl;
  const token = req.headers["access-token"] as string;

  try {
    const response = await axios.get(url, {
      headers: {
        "Access-Token": token,
        "Content-Type": "application/json",
        "Cache-Control": "no-cache",
      },
    });
    res.status(200).json(response.data);
  } catch (err) {
    if (axios.isAxiosError(err)) {
      res.status(err.response!.status).json(err.response!.data);
    }
  }
}
Probably not the best code, but what I'm wondering is about the token we have for authentication, is there a way to persist that token or use (maybe) a middleware next provides so we don't pass it through cookies ?
1 replies
TTCTheo's Typesafe Cult
Created by Nestor on 11/18/2022 in #questions
Component Library.
I've been thinking of making our own component library for our company. At the moment we style stuff with Material UI and we're moving over to tailwind. If I were to make such library should I take the path or architecture that Daisy UI uses ? Or is there an example that anyone feel fits better for an scalable library solution?
29 replies
TTCTheo's Typesafe Cult
Created by Nestor on 11/7/2022 in #questions
tRPC + external API
Hello. This might sound dumb but currently we need to expand the usability of our backend for a specific project. We will need to create a Typescript backend and I was thinking of using Next + tRPC. Question is, I will also need to interact with said backend on some cases but through tRPC endpoints in my app. Does doing this makes sense? And in that case, how can I make a tRPC procedure depend on a regular http call? Like for example formating some data and send it awaiting response from that POST call to our backend.
11 replies
TTCTheo's Typesafe Cult
Created by Nestor on 10/11/2022 in #questions
Env import in `next.config.mjs` for Docker Image
Hey, in the docs of create-t3-app it states that I should remove the import { env } from "./src/env/server.mjs"; when deploying with Docker. How exactly am I able to do this only for production? Because I'd like to keep it for development to check env vars.
15 replies
TTCTheo's Typesafe Cult
Created by Nestor on 10/10/2022 in #questions
Better way of typing `useRef` when passing to another hook.
Hello. I'm using react-aria to create some buttons and I would like to be able to type the ref object I pass to the useButton hook without casting it. Is there a way to do this ? 
import React from "react";
import { useButton } from "react-aria";

interface FieldButtonProps {
  isPressed: boolean;
  children: React.ReactNode;
}

export default function FieldButton(props: FieldButtonProps) {
  const ref = React.useRef<HTMLInputElement>(null);

  const { buttonProps, isPressed } = useButton(
    props,
    ref as React.RefObject<Element>, // Would like to not cast this if possible.
  );

  return (
    <button
      {...buttonProps}
    >
      {props.children}
    </button>
  );
}
import React from "react";
import { useButton } from "react-aria";

interface FieldButtonProps {
  isPressed: boolean;
  children: React.ReactNode;
}

export default function FieldButton(props: FieldButtonProps) {
  const ref = React.useRef<HTMLInputElement>(null);

  const { buttonProps, isPressed } = useButton(
    props,
    ref as React.RefObject<Element>, // Would like to not cast this if possible.
  );

  return (
    <button
      {...buttonProps}
    >
      {props.children}
    </button>
  );
}
5 replies
TTCTheo's Typesafe Cult
Created by Nestor on 9/29/2022 in #questions
Documentation section inside an already made React app ?
Just looking to create an accesible documentation section without the need of creating a different app for that purpose, not really limited to, but wondering if I could run some sort of Docosaurus inside or if anyone know any other alternative.
1 replies