Eternal Mori Posts - Answer Overflow

Eternal Mori

Explore posts from servers

TtRPC TTCTheo's Typesafe Cult DTDrizzle Team

Posts Comments

TTCTheo's Typesafe Cult

•Created by Eternal Mori on 1/29/2024 in #questions

Is there a cleaner way to use server actions with Zod and keep the pages as independent as possible?

https://github.com/pieter-berkel/nextjs-structure/tree/master/app/posts/%5Bid%5D/edit

2 replies

TTCTheo's Typesafe Cult

•Created by Eternal Mori on 10/31/2023 in #questions

Is it okay to call a server action directly from a useQuery or a useMutation hook? (with example)

I know that in app router you can directly call the server function, but if I have a interactive client component, is it okay to call the server action from a useQuery or useMutation hook? Because this is not one of the ways they speak about in the documentation: https://nextjs.org/docs/app/api-reference/functions/server-actions#invocation

// actions.ts

"use server";

export const getPosts = async () => {
  // fetch from db
  const posts = [{ id: 1, name: "Hello World" }];
  return posts;
};

// actions.ts

"use server";

export const getPosts = async () => {
  // fetch from db
  const posts = [{ id: 1, name: "Hello World" }];
  return posts;
};

// page.tsx

"use client";

import { useQuery } from "@tanstack/react-query";
import { getPosts } from "./actions";

export default function Home() {
  const { data, error, isLoading } = useQuery({
    queryKey: ["posts"],
    queryFn: getPosts,
  });

  return error ? (
    <div>Oops, an error</div>
  ) : isLoading ? (
    <div>Loading...</div>
  ) : (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.name}</li>
      ))}
    </ul>
  );
}

// page.tsx

"use client";

import { useQuery } from "@tanstack/react-query";
import { getPosts } from "./actions";

export default function Home() {
  const { data, error, isLoading } = useQuery({
    queryKey: ["posts"],
    queryFn: getPosts,
  });

  return error ? (
    <div>Oops, an error</div>
  ) : isLoading ? (
    <div>Loading...</div>
  ) : (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.name}</li>
      ))}
    </ul>
  );
}

3 replies

TTCTheo's Typesafe Cult

•Created by Eternal Mori on 10/30/2023 in #questions

Is it okay to call a server action directly from a useQuery or a useMutation hook? (with example)

// actions.ts

"use server";

export const getPosts = async () => {
  // fetch from db
  const posts = [{ id: 1, name: "Hello World" }];
  return posts;
};

// actions.ts

"use server";

export const getPosts = async () => {
  // fetch from db
  const posts = [{ id: 1, name: "Hello World" }];
  return posts;
};

// page.tsx

"use client";

import { useQuery } from "@tanstack/react-query";
import { getPosts } from "./actions";

export default function Home() {
  const { data, error, isLoading } = useQuery({
    queryKey: ["posts"],
    queryFn: getPosts,
  });

  return error ? (
    <div>Oops, an error</div>
  ) : isLoading ? (
    <div>Loading...</div>
  ) : (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.name}</li>
      ))}
    </ul>
  );
}

// page.tsx

"use client";

import { useQuery } from "@tanstack/react-query";
import { getPosts } from "./actions";

export default function Home() {
  const { data, error, isLoading } = useQuery({
    queryKey: ["posts"],
    queryFn: getPosts,
  });

  return error ? (
    <div>Oops, an error</div>
  ) : isLoading ? (
    <div>Loading...</div>
  ) : (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.name}</li>
      ))}
    </ul>
  );
}

2 replies

TTCTheo's Typesafe Cult

•Created by Eternal Mori on 10/5/2023 in #questions

What is the (best) flow for using UploadThing inside my react hook form?

2 replies

TTCTheo's Typesafe Cult

•Created by Eternal Mori on 9/29/2023 in #questions

How do I make this responsive layout?

6 replies

TTCTheo's Typesafe Cult

•Created by Eternal Mori on 9/10/2023 in #questions

What is a solution for inserted html with styling that overrides it's enclosure?

I have a NextJS app where I receive emails in HTML. Most of the time, they have a custom style, these styles override my whole app. How can I keep those styles enclosed in the div where I load in the html via DangerouslyInsertHTML?

2 replies

TTCTheo's Typesafe Cult

•Created by Eternal Mori on 7/16/2023 in #questions

Handling Long-Running Server Functions in Next.js: Seeking Alternatives to Vercel Time Limits

Hey everyone! I'm working on a Next.js project where I need to sync and handle all new emails from an email server to a database. This process can take a couple of minutes, but I've noticed that Vercel has time limits of 10 seconds on the free hobby plan and 1 minute on the pro plan. Unfortunately, these limits are too short for my use case. Can you share any insights or alternatives you've used to handle long-running server functions in Next.js? Thanks in advance for your help!

8 replies

Gaming

Programming