Forsto Posts - Answer Overflow

Forsto

Explore posts from servers

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

•Created by Forsto on 9/1/2023 in #❓-help

Type 'NextRequest' is missing properties from type 'NextApiRequest'

Enviorment: Node 18, pnpm Hi, I'm facing an error, where in my app i get this error at createTRPCContext({ req }):

Type 'NextRequest' is missing the following properties from type 'NextApiRequest': query, env, aborted, httpVersion, and 66 more.ts(2740)
types.d.ts(67, 5): The expected type comes from property 'req' which is declared here on type 'CreateNextContextOptions'

Type 'NextRequest' is missing the following properties from type 'NextApiRequest': query, env, aborted, httpVersion, and 66 more.ts(2740)
types.d.ts(67, 5): The expected type comes from property 'req' which is declared here on type 'CreateNextContextOptions'

This is how my entire app/api/trpc/[trpc]/route.ts file looks like:

import type { NextRequest } from "next/server";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

import { appRouter, createTRPCContext } from "@acme/api";

export const runtime = "edge";

/**
 * Configure basic CORS headers
 * You should extend this to match your needs
 */
function setCorsHeaders(res: Response) {
  res.headers.set("Access-Control-Allow-Origin", "*");
  res.headers.set("Access-Control-Request-Method", "*");
  res.headers.set("Access-Control-Allow-Methods", "OPTIONS, GET, POST");
  res.headers.set("Access-Control-Allow-Headers", "*");
}

export function OPTIONS() {
  const response = new Response(null, {
    status: 204,
  });
  setCorsHeaders(response);
  return response;
}

const handler = async (req: NextRequest) => {
  const response = await fetchRequestHandler({
    endpoint: "/api/trpc",
    router: appRouter,
    req,
    createContext: () => createTRPCContext({ req }),
    onError({ error, path }) {
      console.error(`>>> tRPC Error on '${path}'`, error);
    },
  });

  setCorsHeaders(response);
  return response;
};

export { handler as GET, handler as POST };

import type { NextRequest } from "next/server";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

import { appRouter, createTRPCContext } from "@acme/api";

export const runtime = "edge";

/**
 * Configure basic CORS headers
 * You should extend this to match your needs
 */
function setCorsHeaders(res: Response) {
  res.headers.set("Access-Control-Allow-Origin", "*");
  res.headers.set("Access-Control-Request-Method", "*");
  res.headers.set("Access-Control-Allow-Methods", "OPTIONS, GET, POST");
  res.headers.set("Access-Control-Allow-Headers", "*");
}

export function OPTIONS() {
  const response = new Response(null, {
    status: 204,
  });
  setCorsHeaders(response);
  return response;
}

const handler = async (req: NextRequest) => {
  const response = await fetchRequestHandler({
    endpoint: "/api/trpc",
    router: appRouter,
    req,
    createContext: () => createTRPCContext({ req }),
    onError({ error, path }) {
      console.error(`>>> tRPC Error on '${path}'`, error);
    },
  });

  setCorsHeaders(response);
  return response;
};

export { handler as GET, handler as POST };

my trpc.ts file is setup by the way clerk docs sugessted:

import type {
  SignedInAuthObject,
  SignedOutAuthObject,
} from "@clerk/nextjs/api";
import { getAuth } from "@clerk/nextjs/server";

import { initTRPC, TRPCError } from "@trpc/server";
import type { CreateNextContextOptions } from "@trpc/server/adapters/next";
import superjson from "superjson";

import { prisma } from "@acme/db";

interface AuthContext {
  auth: SignedInAuthObject | SignedOutAuthObject;
}

const createInnerTRPCContext = ({ auth }: AuthContext) => {
  return {
    auth,
    prisma,
  };
};

export const createTRPCContext = async (opts: CreateNextContextOptions) => {
  return createInnerTRPCContext({ auth: getAuth(opts.req) });
};

const t = initTRPC.context<typeof createTRPCContext>().create({
  transformer: superjson,
  errorFormatter({ shape }) {
    return shape;
  },
});

const isAuthed = t.middleware(({ next, ctx }) => {
  if (!ctx.auth.userId) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }

  return next({
    ctx: {
      auth: ctx.auth,
    },
  });
});

export const createTRPCRouter = t.router;

export const publicProcedure = t.procedure;
export const protectedProcedure = t.procedure.use(isAuthed);

import type {
  SignedInAuthObject,
  SignedOutAuthObject,
} from "@clerk/nextjs/api";
import { getAuth } from "@clerk/nextjs/server";

import { initTRPC, TRPCError } from "@trpc/server";
import type { CreateNextContextOptions } from "@trpc/server/adapters/next";
import superjson from "superjson";

import { prisma } from "@acme/db";

interface AuthContext {
  auth: SignedInAuthObject | SignedOutAuthObject;
}

const createInnerTRPCContext = ({ auth }: AuthContext) => {
  return {
    auth,
    prisma,
  };
};

export const createTRPCContext = async (opts: CreateNextContextOptions) => {
  return createInnerTRPCContext({ auth: getAuth(opts.req) });
};

const t = initTRPC.context<typeof createTRPCContext>().create({
  transformer: superjson,
  errorFormatter({ shape }) {
    return shape;
  },
});

const isAuthed = t.middleware(({ next, ctx }) => {
  if (!ctx.auth.userId) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }

  return next({
    ctx: {
      auth: ctx.auth,
    },
  });
});

export const createTRPCRouter = t.router;

export const publicProcedure = t.procedure;
export const protectedProcedure = t.procedure.use(isAuthed);

Any help would be much appreciated.

2 replies

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