Eternal Mori Posts - Answer Overflow

•Created by Eternal Mori on 3/16/2024 in #help

drizzle-kit push error: Multiple primary key defined

3 replies

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

•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?

2 replies

•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

•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

•Created by Eternal Mori on 10/17/2023 in #help

How to mimic the prisma cursor option for use with useInfiniteQuery

How to mimic the cursor option in drizzle with MySQL? This is the Prisma documentation: https://www.prisma.io/docs/concepts/components/prisma-client/pagination#cursor-based-pagination

4 replies

•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

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

How do I make this responsive layout?

6 replies

•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

•Created by Eternal Mori on 8/30/2023 in #❓-help

Wrong JSON response when deployed

3 replies

•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

•Created by Eternal Mori on 7/12/2023 in #help

How can I filter on a joined table field (nested value) with the relational query syntax?

☝🏻

1 replies

•Created by Eternal Mori on 7/12/2023 in #help

How to implement a where clause on a joined table with the new relation builder?

This was my original query, the big problem is that it returns as many rows as there are messages instead of one entry with multiple messages. As you can see, I have a where clause where the entry is filtered with it's id, and a organization id that is part of another joined table named channel.

 const tickets = await db
    .select({
      id: s.tickets.id,
      status: s.tickets.status,
      channel: {
        id: s.channels.id,
        type: s.channels.type,
        name: s.channels.name,
      },
      contact: {
        id: s.contacts.id,
        name: s.contacts.name,
        email: s.contacts.email,
      },
      messages: {
        id: s.messages.id,
        subject: s.messages.subject,
        text: s.messages.text,
        html: s.messages.html,
        createdAt: s.messages.createdAt,
      },
    })
    .from(s.tickets)
    .innerJoin(s.contacts, eq(s.tickets.contactId, s.contacts.id))
    .innerJoin(s.channels, eq(s.tickets.channelId, s.channels.id))
    .leftJoin(s.messages, eq(s.tickets.id, s.messages.ticketId))
    .where(
      and(
        eq(s.tickets.id, params.id),
        eq(s.channels.organizationId, organizationId)
      )
    );

  const ticket = tickets[0];

 const tickets = await db
    .select({
      id: s.tickets.id,
      status: s.tickets.status,
      channel: {
        id: s.channels.id,
        type: s.channels.type,
        name: s.channels.name,
      },
      contact: {
        id: s.contacts.id,
        name: s.contacts.name,
        email: s.contacts.email,
      },
      messages: {
        id: s.messages.id,
        subject: s.messages.subject,
        text: s.messages.text,
        html: s.messages.html,
        createdAt: s.messages.createdAt,
      },
    })
    .from(s.tickets)
    .innerJoin(s.contacts, eq(s.tickets.contactId, s.contacts.id))
    .innerJoin(s.channels, eq(s.tickets.channelId, s.channels.id))
    .leftJoin(s.messages, eq(s.tickets.id, s.messages.ticketId))
    .where(
      and(
        eq(s.tickets.id, params.id),
        eq(s.channels.organizationId, organizationId)
      )
    );

  const ticket = tickets[0];

4 replies

•Created by Eternal Mori on 7/3/2023 in #help

Broken typescript in select

3 replies

•Created by Eternal Mori on 6/29/2023 in #help

Typescript error with custom column type

2 replies

•Created by Eternal Mori on 4/21/2023 in #❓-help

How can I make a direct fetch on a router endpoint from TRPC in NextJS on client?

In the documentation you can use the vanilla TRPC client like this:

const bilbo = await client.getUser.query('id_bilbo');

const bilbo = await client.getUser.query('id_bilbo');

But with NextJS app is wrapped with the WithTRPC wrapper. where you can only use hooks. How can I make a direct call?

3 replies

•Created by Eternal Mori on 4/21/2023 in #❓-help

Can you get the queryClient without using a hook?

7 replies

•Created by Eternal Mori on 3/8/2023 in #❓-help

How to get response type depending on the input params?

Simple example of a normal JS function with generics:

const example = <T extends unknown>(params: T): T => {
  return params
}

// TYPE: const params: readonly ["Hello", "World"]
const params = ['Hello', 'World']

// TYPE: const result: readonly ["Hello", "World"]
const result = example(params)

// TYPE: const str1: string, const str2: string
const [str1, str2] = result

const example = <T extends unknown>(params: T): T => {
  return params
}

// TYPE: const params: readonly ["Hello", "World"]
const params = ['Hello', 'World']

// TYPE: const result: readonly ["Hello", "World"]
const result = example(params)

// TYPE: const str1: string, const str2: string
const [str1, str2] = result

This is what I want to achieve with TRPC. If I send some params I want my respone type be able to change depending on the params. How can I achieve that?

// TYPE: const params: readonly ["Hello", "World"]
const params = ['Hello', 'World']

const { data } = trpc.router.model.example(params)

// I want the following type returned based on the params 
// TYPE: const result: readonly ["Hello", "World"]
const result = data;

// I want the same result as in the simple example
// TYPE: const str1: string, const str2: string
const [str1, str2] = result

// TYPE: const params: readonly ["Hello", "World"]
const params = ['Hello', 'World']

const { data } = trpc.router.model.example(params)

// I want the following type returned based on the params 
// TYPE: const result: readonly ["Hello", "World"]
const result = data;

// I want the same result as in the simple example
// TYPE: const str1: string, const str2: string
const [str1, str2] = result

6 replies