Eylon Posts - Answer Overflow

Eylon

•Created by Eylon on 5/19/2024 in #questions

Cookies in Next 14

I'm fairly new to SSR and server components. I am having trouble understanding cookies behavior with ssr and client in mind. My goal: Set cookie on NextJS backend, be able to see it in browser and in client components. My code:

import { cookies } from "next/headers";
import { NextResponse } from "next/server";

export const dynamic = "force-dynamic"; // defaults to auto

export async function GET(request: Request, response: Response) {
    const myCookies = cookies().getAll();
    console.log(myCookies);

    return NextResponse.json({ message: "API GET" });
}

export async function POST(request: Request) {
    const cookieOptions = {
        expires: new Date("2025-01-01"),
    };
    cookies().set("test", "test", cookieOptions);
    const myCookies = cookies().getAll();
    console.log(myCookies);

    return NextResponse.json({ message: "API POST" });
}

import { cookies } from "next/headers";
import { NextResponse } from "next/server";

export const dynamic = "force-dynamic"; // defaults to auto

export async function GET(request: Request, response: Response) {
    const myCookies = cookies().getAll();
    console.log(myCookies);

    return NextResponse.json({ message: "API GET" });
}

export async function POST(request: Request) {
    const cookieOptions = {
        expires: new Date("2025-01-01"),
    };
    cookies().set("test", "test", cookieOptions);
    const myCookies = cookies().getAll();
    console.log(myCookies);

    return NextResponse.json({ message: "API POST" });
}

This is my route.ts file.

import { cookies } from "next/headers";
import React from "react";

const AccountPage = async () => {
    const test = await fetch("http://localhost:3003/api", {
        method: "POST",
        credentials: "include",
    });

    const res = await fetch("http://localhost:3003/api");
    const data = await res.json();

    const myCookies = cookies().getAll();
    console.log(myCookies);

    return (
        <div>
            AccountPage
            <div>{JSON.stringify(data)}</div>
        </div>
    );
};

export default AccountPage;

import { cookies } from "next/headers";
import React from "react";

const AccountPage = async () => {
    const test = await fetch("http://localhost:3003/api", {
        method: "POST",
        credentials: "include",
    });

    const res = await fetch("http://localhost:3003/api");
    const data = await res.json();

    const myCookies = cookies().getAll();
    console.log(myCookies);

    return (
        <div>
            AccountPage
            <div>{JSON.stringify(data)}</div>
        </div>
    );
};

export default AccountPage;

This is my server component. I know I said my goal was to read my cookie in browser but as first step I wanted to read it in my server component. When I print myCookies on my POST route, I can see the cookie, but on the get request or on the component I get an empty array.

1 replies

TTCTheo's Typesafe Cult

•Created by Eylon on 3/27/2023 in #questions

deploying to vercel - typeerrors

13 replies

TTCTheo's Typesafe Cult

•Created by Eylon on 3/26/2023 in #questions

prisma relations generated types

So I've ran to a problem where the generated types from prisma don't include my relationships, I've googled a bit more and saw this was an issue for many people but not many people have any answers at all, wondered if anyone here know how to deal with this? I've tried creating my own type with the prims getPayload and including my relationships but when fetching data it is automatically refering to the generated prisma types and I cant go around hardcoding that everywhere it seems like a bad idea... Trying to deploy and it keeps failing because of that 😦

13 replies

TTCTheo's Typesafe Cult

•Created by Eylon on 3/21/2023 in #questions

mutate return value

5 replies

TTCTheo's Typesafe Cult

•Created by Eylon on 3/16/2023 in #questions

Prisma reorders database

I've found out prisma reorders my database upon updating, any chance anyone know how I can stop it from reordering? I can't find anything on the prisma docs or in google..

5 replies

TTCTheo's Typesafe Cult

•Created by Eylon on 3/14/2023 in #questions

Can I pass refetch as a prop?

Title basically.. The thing is that I am fetching all of my items in component#1, I use them there and I also pass them as a prop to component#2, there I can create a new item. thing is that I would like to use the refetch function in component#2 that comes along the useQuery (which is in component#1). Is it even something I should do or is it a bad design choice on my end? How do I approach this issue?

36 replies

TTCTheo's Typesafe Cult

•Created by Eylon on 3/12/2023 in #questions

integrating a global state manager

11 replies

TTCTheo's Typesafe Cult

•Created by Eylon on 3/10/2023 in #questions

prisma transaction api

hi, so I figured I need to use the transaction api but I cant seem to get the syntax right. heres what im trying to do: I have a board model and column model, a board can have many columns. When creating a board, I'd want the user to also be able to create columns, so the problem is getting the created board's id to create the columns (need a ref to the board) and so I read about the transaction api but I keep running into problems and I am probably getting the syntax wrong. Would love some help!

42 replies

TTCTheo's Typesafe Cult

•Created by Eylon on 3/3/2023 in #questions

Why is my prisma model typed as any?

24 replies

TTCTheo's Typesafe Cult

•Created by Eylon on 2/22/2023 in #questions

oAuth callback uri

5 replies

Gaming

Programming