18 replies

How do i properly set up nextjs external pages/api/* routes using trpc?

I have a working application, now for testing I want to create a few pages/api/* routes to see the raw data i get before pushing into a component.

I created pages/api/lessons with this content:

import { trpc } from "@acme/app/utils/trpc";
import { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const { method } = req;
  const { data } = trpc.lesson.all.useQuery();
  console.log("data", data);

  switch (method) {
    case "GET":
      try {
        res.status(200).json({ success: true, data: data });
      } catch (error) {
        res.status(400).json({ success: false, error: error });
      }
  }
}

import { trpc } from "@acme/app/utils/trpc";
import { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const { method } = req;
  const { data } = trpc.lesson.all.useQuery();
  console.log("data", data);

  switch (method) {
    case "GET":
      try {
        res.status(200).json({ success: true, data: data });
      } catch (error) {
        res.status(400).json({ success: false, error: error });
      }
  }
}

and I am getting an error:

TypeError: Cannot read properties of null (reading 'useContext')

TypeError: Cannot read properties of null (reading 'useContext')

I have trpc working on the index page (basic t3 app) but when i try to place it inside an nextjs route it never renders. If i remove trpc logic from the api route and just put some dummy data, it works fine. Where is my issue?

TTC

Theo's Typesafe Cult•3y ago•

18 replies

LaunchThat.App

How do i properly set up nextjs external pages/api/* routes using trpc?

I have a working application, now for testing I want to create a few pages/api/* routes to see the raw data i get before pushing into a component.

I created pages/api/lessons with this content:

import { trpc } from "@acme/app/utils/trpc";
import { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const { method } = req;
  const { data } = trpc.lesson.all.useQuery();
  console.log("data", data);

  switch (method) {
    case "GET":
      try {
        res.status(200).json({ success: true, data: data });
      } catch (error) {
        res.status(400).json({ success: false, error: error });
      }
  }
}

import { trpc } from "@acme/app/utils/trpc";
import { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const { method } = req;
  const { data } = trpc.lesson.all.useQuery();
  console.log("data", data);

  switch (method) {
    case "GET":
      try {
        res.status(200).json({ success: true, data: data });
      } catch (error) {
        res.status(400).json({ success: false, error: error });
      }
  }
}

and I am getting an error:

TypeError: Cannot read properties of null (reading 'useContext')

TypeError: Cannot read properties of null (reading 'useContext')

How do i properly set up nextjs external pages/api/* routes using trpc?

Similar Threads

How do i properly set up nextjs external pages/api/* routes using trpc?

Similar Threads

Similar Threads

Similar Threads