Theo's Typesafe Cult•3w ago

T3 Stack Newbie, using NextJS 15 and tRPC, no utils/trpc.ts

Hey hey. Trying to kickstart a T3 stack project to test it out, generated the boilerplate and such. There's no utils folder or trpc.ts file with the type-safe hooks in. How do I access my router stuff? Seeing mixed answers for different versions...

  "dependencies": {
    "@prisma/client": "^5.22.0",
    "@t3-oss/env-nextjs": "^0.10.1",
    "@tanstack/react-query": "^5.50.0",
    "@trpc/client": "^11.0.0-rc.446",
    "@trpc/react-query": "^11.0.0-rc.446",
    "@trpc/server": "^11.0.0-rc.446",
    "geist": "^1.3.0",
    "next": "^15.0.1",
    "next-auth": "^4.24.10",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "server-only": "^0.0.1",
    "superjson": "^2.2.1",
    "zod": "^3.23.3"
  },

  "dependencies": {
    "@prisma/client": "^5.22.0",
    "@t3-oss/env-nextjs": "^0.10.1",
    "@tanstack/react-query": "^5.50.0",
    "@trpc/client": "^11.0.0-rc.446",
    "@trpc/react-query": "^11.0.0-rc.446",
    "@trpc/server": "^11.0.0-rc.446",
    "geist": "^1.3.0",
    "next": "^15.0.1",
    "next-auth": "^4.24.10",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "server-only": "^0.0.1",
    "superjson": "^2.2.1",
    "zod": "^3.23.3"
  },

My package.json

2 Replies

.Zeus.OP•3w ago

Here's a class I am trying to get it going

"use client"

import { api } from "@/trpc/react";
import { type Civilization } from "@prisma/client";

export const CivPicker = () => {
    const civilizationQuery = api.civilization.getAll.useQuery();

    return (
        <div>
            {civilizationQuery.data?.map((civilization: Civilization, index: number) => (
              <p key={index}>{civilization.name}</p>
            ))}
        </div>
    );
};

"use client"

import { api } from "@/trpc/react";
import { type Civilization } from "@prisma/client";

export const CivPicker = () => {
    const civilizationQuery = api.civilization.getAll.useQuery();

    return (
        <div>
            {civilizationQuery.data?.map((civilization: Civilization, index: number) => (
              <p key={index}>{civilization.name}</p>
            ))}
        </div>
    );
};

Router

export const appRouter = createTRPCRouter({
  civilization: civilizationRouter,
  unit: unitRouter,
  age: ageRouter,
});

export const appRouter = createTRPCRouter({
  civilization: civilizationRouter,
  unit: unitRouter,
  age: ageRouter,
});

export const civilizationRouter = createTRPCRouter({
  // Get all Civilizations
    getAll: publicProcedure.query(async () => {
        return prisma.civilization.findMany();
    }),
});

export const civilizationRouter = createTRPCRouter({
  // Get all Civilizations
    getAll: publicProcedure.query(async () => {
        return prisma.civilization.findMany();
    }),
});

And my error: [[ << query #1 ]civilization.getAll {} Cannot read properties of undefined (reading 'findMany') Found the issue. I had the wrong env variable set for my db. Sorry! ❤️

DevPanda•3w ago

why you don´t make it so?

export const civilizationRouter = createTRPCRouter({
  // Get all Civilizations
    getAll: publicProcedure.query(async ({ctx}) => {
        return ctx.db.civilization.findMany();
    }),
});

export const civilizationRouter = createTRPCRouter({
  // Get all Civilizations
    getAll: publicProcedure.query(async ({ctx}) => {
        return ctx.db.civilization.findMany();
    }),
});

Gaming

Programming

T3 Stack Newbie, using NextJS 15 and tRPC, no utils/trpc.ts