Forsto Posts - Answer Overflow

Forsto

Explore posts from servers

DIAdiscord.js - Imagine an app TtRPC TTCTheo's Typesafe Cult

•Created by Forsto on 6/12/2023 in #questions

Best way to query data in NextJS App Dir.

Hi, since the new nextjs server actions are meant for mutating data, what would be a "proper" way of querying data in the app dir.

7 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 5/31/2023 in #questions

tRPC invalid_type error with Clerk

3 replies

TTCTheo's Typesafe Cult

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

Use State and metadata API in the same component (next 13 app dir)

I have a component that's marked with "use client", because I also want to use useState but I also want to set some metadata on it, so I added this:

export const metadata: Metadata = {
  title: "Name",
  description: "Securing your success!",
  }

export const metadata: Metadata = {
  title: "Name",
  description: "Securing your success!",
  }

but i get this error when deploying on vercel: You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://beta.nextjs.org/docs/api-reference/metadata is there a way I could use both in the same component?

1 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 2/2/2023 in #questions

Call tRPC from the Next.js API folder

I'm working on calling an event that deletes old files when calld from a github actions cron job. this is the code:

import type { NextApiRequest, NextApiResponse } from "next";
import { api } from "../../utils/api";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method === "POST") {
    console.log("Cron job started");
    const { authorization } = req.headers;

    if (!authorization) return res.status(401).json({ success: false });

    try {
      const result = await api.cron.deleteOldTracks(authorization);
      res.status(200).json({ success: true, result });
    } catch (err) {
      if (err instanceof Error) {
        res.status(500).json({ success: false, message: err.message });
      }
    }
  } else {
    res.setHeader("Allow", "POST");
    res.status(405).end("Method Not Allowed");
  }
}

import type { NextApiRequest, NextApiResponse } from "next";
import { api } from "../../utils/api";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method === "POST") {
    console.log("Cron job started");
    const { authorization } = req.headers;

    if (!authorization) return res.status(401).json({ success: false });

    try {
      const result = await api.cron.deleteOldTracks(authorization);
      res.status(200).json({ success: true, result });
    } catch (err) {
      if (err instanceof Error) {
        res.status(500).json({ success: false, message: err.message });
      }
    }
  } else {
    res.setHeader("Allow", "POST");
    res.status(405).end("Method Not Allowed");
  }
}

it keeps giving me this problem at deleteOldTracks: This expression is not callable. any suggestions on a fix?

6 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 1/23/2023 in #questions

Issue with server.msj

6 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 12/26/2022 in #questions

How to make a curve in CSS

8 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 12/1/2022 in #questions

Re fetch an enabled tRPC query.

Hi, im running into an issue where I want to refetch a query that lists all users when a new user is added, but it only refetches when the query is disabled. this is some code I have for it.

//Queries
const createInvestor = trpc.admin.investors.createOne.useMutation();
const getInvestors = trpc.admin.investors.findMany.useQuery();

//button
<button
  onClick={async () => {
    await createInvestor.mutate({
      firstName,
      lastName,
      email,
    });

    router.reload();
  }}>
  Add User
</button>

//Queries
const createInvestor = trpc.admin.investors.createOne.useMutation();
const getInvestors = trpc.admin.investors.findMany.useQuery();

//button
<button
  onClick={async () => {
    await createInvestor.mutate({
      firstName,
      lastName,
      email,
    });

    router.reload();
  }}>
  Add User
</button>

I tried to do the button like this but for whatever reason it only works if i have the query disabled

<button
  onClick={async () => {
    await createInvestor.mutate({
      firstName,
      lastName,
      email,
    });

    getInvestors.refetch()
  }}>
  Add User
</button>

<button
  onClick={async () => {
    await createInvestor.mutate({
      firstName,
      lastName,
      email,
    });

    getInvestors.refetch()
  }}>
  Add User
</button>

Any help/suggestions on how to fix this would be greatly appreciated

10 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 11/27/2022 in #questions

Does Prisma adapter work with credentials in NextAuth?

I'm trying to get credentials login to work with Prisma adapter, but I'm running into issues, and I saw some posts on stack overflow, that it isn't possible. Did it get updated already or do I still need to use JWT sessions?

19 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 10/14/2022 in #questions

Custom fonts not working in new version of tailwindcss

I want to use custom fonts in my app but the custom fonts wont work. tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        heliosbold: ["HeliosBold", "sans-serif"],
        helios: ["Helios", "sans-serif"],
      },
    },
  },
  plugins: [],
};

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        heliosbold: ["HeliosBold", "sans-serif"],
        helios: ["Helios", "sans-serif"],
      },
    },
  },
  plugins: [],
};

global.css

@font-face {
    font-family: HeliosBold;
    src: url('/fonts/heliosBold.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }
  
  
  @font-face {
    font-family: Helios;
    src: url('/fonts/helios.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: HeliosBold;
    src: url('/fonts/heliosBold.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }
  
  
  @font-face {
    font-family: Helios;
    src: url('/fonts/helios.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }

@tailwind base;
@tailwind components;
@tailwind utilities;

I used this exact code and it worked fine in tailwind 3.0.24, but it doesn't work in 3.1.6 anyone knows what has changed/what I'm doing wrong?

2 replies

TTCTheo's Typesafe Cult

•Created by Forsto on 9/22/2022 in #questions

How do I use less bandwith?

I'm working on a project that requires a short looping video in the hero of a project. Does anyone have any suggestions on how I could lower the usage on vercel by maybe uploading it somewhere cheaper or storing it somewhere else?

8 replies

Gaming

Programming