NinjaBunny Posts - Answer Overflow

NinjaBunny

Explore posts from servers

RRailway TTCTheo's Typesafe Cult DTDrizzle Team

•Created by NinjaBunny on 9/5/2024 in #questions

Not having updated cookies from middleware.ts until a page fully renders

Hi all, I'm having an issue with my middleware function, which handles refreshing auth tokens stored in cookies. here is the issue, if there access token has and have an refresh token it will request a new set of tokens A) expired B) doesn't exist when I set those cookies in the const res = NextResponse.next() and then set those cookies

const res = NextResponse.next();

res.cookies.set("access_token", { /* config */ })
res.cookies.set("refresh_token", { /* config */ })

return res;

const res = NextResponse.next();

res.cookies.set("access_token", { /* config */ })
res.cookies.set("refresh_token", { /* config */ })

return res;

when that page tries to render, if I immediately try to grab that access token in a server component I will always get undefined and after the page fully renders I now get that updated token in the cookie tab in the browser. My question is, is it possible to get the updated cookies from the headers before the page loads/fully renders or am I going to have to find a new solution to this problem? I thought about creating a wrapper server action that makes the refresh token request, but I feel like this is a job for the middleware. Any help is much appreciated. Thank you in advance!!

2 replies

TTCTheo's Typesafe Cult

•Created by NinjaBunny on 2/20/2024 in #questions

What does importing await import("./src/env.js") do in next.config.js?

Hi all, I'm trying to understand what this does inside of the next.config.js file. I am just trying to have this make sense to me, because when I run my app it tells me I can't run an async function outside of the async block. I am assuming that I don't need to be running the app through create-t3-app to use the env validation library.

// Code for referrence
/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
await import("./src/env.js");

/** @type {import("next").NextConfig} */
const config = {};

export default config;

// Code for referrence
/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
await import("./src/env.js");

/** @type {import("next").NextConfig} */
const config = {};

export default config;

2 replies

TTCTheo's Typesafe Cult

•Created by NinjaBunny on 2/19/2024 in #questions

runtime environment variables with app router

2 replies

TTCTheo's Typesafe Cult

•Created by NinjaBunny on 12/4/2023 in #questions

HTML Input Element is missing types

2 replies

TTCTheo's Typesafe Cult

•Created by NinjaBunny on 11/2/2023 in #questions

Is there a way to get a previous dynamic route in app directory?

Take this for example

app
  - site
    - [slug]
      - map 
        - page.tsx // how to get [slug] param
      - map-settings 
        - page.tsx // how to get [slug] param
   // ... and so on

app
  - site
    - [slug]
      - map 
        - page.tsx // how to get [slug] param
      - map-settings 
        - page.tsx // how to get [slug] param
   // ... and so on

How can I extract the previous dynamic url param into the nested site? is it possible?

app
  - site
    - [...slug]
      - page.tsx

app
  - site
    - [...slug]
      - page.tsx

Could I do something like this? Where I'm kinda breaking the catch all, but I only want it to catch all up to a certain point? This seems a bit hacky

import { Map } from "@/components/map";
import { redirect } from "next/navigation";
import { cookies } from "next/headers";

import NotFound from "./not-found";
import SiteSettings from "./site-settings";

type MapPageProps = {
  params: {
    slug: Array<string>;
  };
};

const MapPage = async ({ params: { slug } }: MapPageProps) => {
  const cookie = cookies();
  const token = cookie.get("token")?.value;
  
  if (!token) return redirect("/login");

  if (slug.length === 1) return <NotFound />;

  const [site, route] = slug;

  switch (route) {
    case "map":
    case "map-settings":
      return (
        <div className="flex h-full flex-1 overflow-hidden">
          <Map site={site} settings={route === "map" ? false : true} />
        </div>
      );
    case "site-settings":
      return <SiteSettings />;

    default:
      return <NotFound />;
  }
};

export default MapPage;

import { Map } from "@/components/map";
import { redirect } from "next/navigation";
import { cookies } from "next/headers";

import NotFound from "./not-found";
import SiteSettings from "./site-settings";

type MapPageProps = {
  params: {
    slug: Array<string>;
  };
};

const MapPage = async ({ params: { slug } }: MapPageProps) => {
  const cookie = cookies();
  const token = cookie.get("token")?.value;
  
  if (!token) return redirect("/login");

  if (slug.length === 1) return <NotFound />;

  const [site, route] = slug;

  switch (route) {
    case "map":
    case "map-settings":
      return (
        <div className="flex h-full flex-1 overflow-hidden">
          <Map site={site} settings={route === "map" ? false : true} />
        </div>
      );
    case "site-settings":
      return <SiteSettings />;

    default:
      return <NotFound />;
  }
};

export default MapPage;

2 replies

TTCTheo's Typesafe Cult

•Created by NinjaBunny on 10/26/2023 in #questions

WebSocket on Server Component

Lets say I want to have a websocket listening for messages from a different API on the server, could I do something like this? Or would I have add the websocket connection to a client component and put all of this in a useEffect?

import WebSocket from "ws";
import Link from "next/link";
import { revalidatePath } from "next/cache";

const sensors = async () => {
  const sensorArray: Array<any> = [];
  const ws = new WebSocket(...);

  ws.on("sensor-data", (data) => {
    sensors.push(...data);
    revalidatePath("/");
  });

  return (
    <Link href="/devices/sensors" >
      {sensorArray.length}
    </Link>
  );
}

export { sensors };

import WebSocket from "ws";
import Link from "next/link";
import { revalidatePath } from "next/cache";

const sensors = async () => {
  const sensorArray: Array<any> = [];
  const ws = new WebSocket(...);

  ws.on("sensor-data", (data) => {
    sensors.push(...data);
    revalidatePath("/");
  });

  return (
    <Link href="/devices/sensors" >
      {sensorArray.length}
    </Link>
  );
}

export { sensors };

21 replies

TTCTheo's Typesafe Cult

•Created by NinjaBunny on 4/2/2023 in #questions

SPA or MPA for react native dev

Hi all, I am fairly new to React Native mobile development, and have cloned the turbo and clerk template. I was looking into using different screens or how to implement them, and I was wondering if I should be treating my app as Single Page App or Multi Page App? I’ve looked into the docs of React Navigation/native and it seems confusing if I need to pass the navigate property to every screen/component that needs to reroute the app and seems very weird not correct. Is there another library I could use or should I be treating it as a SPA and just change what is rendered based off the users selection? Thank you for your time.

12 replies

TTCTheo's Typesafe Cult

•Created by NinjaBunny on 3/23/2023 in #questions

When should I not use tRPC

Hi, I'm fairly new to using tRPC, and was wondering what are some situations that would benefit to having a dedicated server to handle those tasks rather than tRPC to handle those scenarios. The only major thing I can think of is Websockets

50 replies

TTCTheo's Typesafe Cult

•Created by NinjaBunny on 2/16/2023 in #questions

What is the best way to type an API Response

5 replies

Gaming

Programming