iboughtbed Posts - Answer Overflow

Topics

iboughtbed

TTCTheo's Typesafe Cult

•Created by iboughtbed on 4/16/2024 in #questions

Next Auth Drizzle Adapter does not include extra columns (fields)

auth.ts

providers: [
    GoogleProvider({
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
      profile(profile: GoogleProfile) {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          image: profile.picture,
          username: removeEmailDomain(profile.email) ?? profile.email,
        };
      },
    }),

providers: [
    GoogleProvider({
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
      profile(profile: GoogleProfile) {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          image: profile.picture,
          username: removeEmailDomain(profile.email) ?? profile.email,
        };
      },
    }),

I have a schema for the user table with username field. When I try to add the username field in the profile callback as initial data for user creation, the Drizzle adapter doesn't include the username field, and instead returns default fields only. Is there a way to fix this?

4 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 2/9/2024 in #questions

Recommended approach for handling remote markdown on article website

I'm working on an article website where users with writer or admin role can write markdown and publish their articles for others to view. What libraries should I use.

2 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 1/3/2024 in #questions

Any react markdown editors like in GitHub?

I want to have an editor with the functionality and features of the GitHub Issues/Discussions editor with markdown

4 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 1/2/2024 in #questions

next markdown rendering library (NOT MDX) on server

So, I'm making a Q&A and users can ask questions and add markdown to their questions. I was using next-mdx-remote to render it, but if user adds any <Component /> to their markdown, it will throw an error when rendering it: Error: Expected component Comp to be defined: you likely forgot to import, pass, or provide it. Is there a way to turn off mdx in next-mdx-remote, or are there any other libraries to render it on server. This is exhausting, ngl 😦

9 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 11/20/2023 in #questions

Old data dissapears when using useInfiniteQuery

useInfiniteQuery({
      queryKey: ["releases"],
      initialPageParam: initialNextId,
      queryFn: async ({ pageParam }) => {
        const result = await getReleases({ limit: 6, cursor: pageParam });
        console.log(result, pageParam);
        return result.data;
      },
      getNextPageParam: (lastPage) => lastPage?.nextId,
      initialData: {
        pageParams: [undefined],
        pages: [{ releases: initialReleases, nextId: initialNextId }],
      },
    });

useInfiniteQuery({
      queryKey: ["releases"],
      initialPageParam: initialNextId,
      queryFn: async ({ pageParam }) => {
        const result = await getReleases({ limit: 6, cursor: pageParam });
        console.log(result, pageParam);
        return result.data;
      },
      getNextPageParam: (lastPage) => lastPage?.nextId,
      initialData: {
        pageParams: [undefined],
        pages: [{ releases: initialReleases, nextId: initialNextId }],
      },
    });

When I visit the page, old data is displayed for a split second then dissapears. How can I fix it?

2 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 11/18/2023 in #questions

Can I use "next-safe-actions" library for queries, with no "use server"? I just need a validation

What will happen if I create an action client

export const action = createSafeActionClient();

// import it inside of "/src/server/queries.ts"
// with no "use server" directive
import { z } from "zod";

import { action } from "~/lib/safe-action";
import { db } from "~/server/db";

const getArticleSchema = z.object({
  id: z.string().cuid(),
});

export const getArticle = action(getArticleSchema, async ({ id }) => {
  const article = await db.article.findUnique({
    where: { id },
    select: {
      id: true,
    },
  });

  return { article };
});

export const action = createSafeActionClient();

// import it inside of "/src/server/queries.ts"
// with no "use server" directive
import { z } from "zod";

import { action } from "~/lib/safe-action";
import { db } from "~/server/db";

const getArticleSchema = z.object({
  id: z.string().cuid(),
});

export const getArticle = action(getArticleSchema, async ({ id }) => {
  const article = await db.article.findUnique({
    where: { id },
    select: {
      id: true,
    },
  });

  return { article };
});

2 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 11/5/2023 in #questions

upstream image response failed: 403

can't access the image on uploadthing

<AspectRatio ratio={16 / 9}>
        <Image
          alt="article cover"
          src={coverImage}
          className="object-cover"
          width={960}
          height={540}
        />
</AspectRatio>

<AspectRatio ratio={16 / 9}>
        <Image
          alt="article cover"
          src={coverImage}
          className="object-cover"
          width={960}
          height={540}
        />
</AspectRatio>

I've added the locahost:3000 to the upoladthing app settings and .env had both secret and app id configured. Uploading works, but can't get the image

2 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 11/4/2023 in #questions

Session is null inside of a server action when calling it from the uploadthing router

/api/uploadthing/core.ts

  articleCoverUploader: f({
    image: { maxFileCount: 1, maxFileSize: "2MB" },
  })
    .input(
      z.object({
        title: z.string().trim().min(1),
        tag: z.string().trim().min(1),
      }),
    )
    .middleware(async ({ input }) => {
      const session = await getServerAuthSession();

      if (session?.user.role === "USER") {
        throw new Error("Permission denied!");
      }

      return { input };
    })
    .onUploadComplete(async ({ file, metadata: { input } }) => {
      await createArticle({
        ...input,
        coverImage: file.url,
      });
    }),

  articleCoverUploader: f({
    image: { maxFileCount: 1, maxFileSize: "2MB" },
  })
    .input(
      z.object({
        title: z.string().trim().min(1),
        tag: z.string().trim().min(1),
      }),
    )
    .middleware(async ({ input }) => {
      const session = await getServerAuthSession();

      if (session?.user.role === "USER") {
        throw new Error("Permission denied!");
      }

      return { input };
    })
    .onUploadComplete(async ({ file, metadata: { input } }) => {
      await createArticle({
        ...input,
        coverImage: file.url,
      });
    }),

I'm using the next-safe-actions

export const protectedAction = createSafeActionClient({
  async middleware() {
    const session = await getServerAuthSession();

    if (!session) {
      throw new Error("Unauthorized!");
    }

    return { session };
  },
});

export const protectedAction = createSafeActionClient({
  async middleware() {
    const session = await getServerAuthSession();

    if (!session) {
      throw new Error("Unauthorized!");
    }

    return { session };
  },
});

When I call the server action inside of a page, the session is not null, but when I try to create the article inside of a uploadthing router the session is null? How I can solve it? Any recommendations?

1 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 11/3/2023 in #questions

Can't access the session inside a server action

export const protectedAction = createSafeActionClient({
  async middleware() {
    const session = await getServerAuthSession();

    console.log(session);

    if (!session?.user) {
      throw new Error("Unauthorized!");
    }

    return { session };
  },
});

export const protectedAction = createSafeActionClient({
  async middleware() {
    const session = await getServerAuthSession();

    console.log(session);

    if (!session?.user) {
      throw new Error("Unauthorized!");
    }

    return { session };
  },
});

using NextAuth and next-safe-actions

2 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 11/3/2023 in #questions

React query initial data

  const { data } = useInfiniteQuery({
    queryKey: ["releases"],
    initialPageParam: initialNextId,
    queryFn: async ({ pageParam }) => {
      const releases = await getReleases({ limit: 2, cursor: pageParam });
      return releases.data;
    },
    getNextPageParam: (lastPage) => lastPage?.nextId,
    initialData: {
      pages: {
        releases: initialReleases,
        nextId: initialNextId,
      },
      pageParams: [""],
    },
  });

  const { data } = useInfiniteQuery({
    queryKey: ["releases"],
    initialPageParam: initialNextId,
    queryFn: async ({ pageParam }) => {
      const releases = await getReleases({ limit: 2, cursor: pageParam });
      return releases.data;
    },
    getNextPageParam: (lastPage) => lastPage?.nextId,
    initialData: {
      pages: {
        releases: initialReleases,
        nextId: initialNextId,
      },
      pageParams: [""],
    },
  });

I'm getting an error that initial data type isn't correct

4 replies

TTCTheo's Typesafe Cult

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

Have someone implemented pagination with server actions and prisma?

Could you send link if so

2 replies

TTCTheo's Typesafe Cult

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

Should I use "use server" directive for database queries

"use server"

import { db } from "~/server/db";

export async function getArticle(id: string) {
  const article = await db.article.findUnique({
    where: { id, published: true },
    select: {
      title: true,
      description: true,
      content: true,
      tag: true,
      createdAt: true,
      author: {}
    },
  });
}

"use server"

import { db } from "~/server/db";

export async function getArticle(id: string) {
  const article = await db.article.findUnique({
    where: { id, published: true },
    select: {
      title: true,
      description: true,
      content: true,
      tag: true,
      createdAt: true,
      author: {}
    },
  });
}

If I remove the directive, it would still be running on server and everything is safe, right?

4 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 10/31/2023 in #questions

Best way to fetch, create and update data in Next.js 13 App router

What is the most typesafe way to fetch or mutate data? Should I use route handlers to create my own api? Should I use server actions? Would you recommend using "pingdotgg/zact" for server actions? I'm just curios but can I use server actions to get data from database?

5 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 10/29/2023 in #questions

Best React (Next.js) PDF libraries?

I'm looking for a good PDF viewer library in Next.js

6 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 7/13/2023 in #questions

Getting data from database with zact

Guys do you know if I can use zact library to get data from database? I only see a mutation funct

2 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 7/6/2023 in #questions

What does "profile" function do in OAuth Adapter?

Can someone explain it?

1 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 7/3/2023 in #questions

Problem with adding per-page layout in /pages router using typescript

// eslint-disable-next-line @typescript-eslint/ban-types
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}: AppPropsWithLayout) => {
  // const getLayout = Component.getLayout ?? ((page) => page);
  // const layout = getLayout(<Component {...pageProps} />);

  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
};

export default api.withTRPC(MyApp);

// eslint-disable-next-line @typescript-eslint/ban-types
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}: AppPropsWithLayout) => {
  // const getLayout = Component.getLayout ?? ((page) => page);
  // const layout = getLayout(<Component {...pageProps} />);

  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
};

export default api.withTRPC(MyApp);

It throws an error: session "any" type

3 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 6/24/2023 in #questions

Prisma, self relation onDelete, onUpdate behavior

I have a prisma model:

model Comment {
    ...
    children Comment[] @relation("replies")
    parent   Comment?  @relation("replies", fields: [parentId], references: [id])
    parentId String?
}

model Comment {
    ...
    children Comment[] @relation("replies")
    parent   Comment?  @relation("replies", fields: [parentId], references: [id])
    parentId String?
}

I want to add onDelete: Cascade or onUpdate: Cascade, but it returns an error: Error validating: A self-relation must have onDelete and onUpdate referential actions set to NoAction in one of the @relation attributes. (Implicit default onDelete: SetNull, and onUpdate: Cascade) Read more at https://pris.ly/d/cyclic-referential-actions

4 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 6/21/2023 in #questions

How to add a form to "new-user" page after user signed in via provider

7 replies

TTCTheo's Typesafe Cult

•Created by iboughtbed on 6/19/2023 in #questions

How to create or connect multiple records in prisma?

1 replies