TTC
Theo's Typesafe Cult•14mo ago
Lucas

Upgrading to App Dir with create-t3

I've installed the latest t3 bundle and am attempting to upgrade an existing project to it. I figured it'd be easier to start with a working version and plugin my already create trpc api. I am testing out the server api: 
import {
  createTRPCProxyClient,
  loggerLink,
  unstable_httpBatchStreamLink,
} from "@trpc/client";
import { headers } from "next/headers";

import { type AppRouter } from "@ceritas/api";
import { getUrl, transformer } from "./shared";

export const api = createTRPCProxyClient<AppRouter>({
  transformer,
  links: [
    loggerLink({
      enabled: (op) =>
        process.env.NODE_ENV === "development" ||
        (op.direction === "down" && op.result instanceof Error),
    }),
    unstable_httpBatchStreamLink({
      url: getUrl(),
      headers() {
        const heads = new Map(headers());
        heads.set("x-trpc-source", "rsc");
        return Object.fromEntries(heads);
      },
    }),
  ],
});
import {
  createTRPCProxyClient,
  loggerLink,
  unstable_httpBatchStreamLink,
} from "@trpc/client";
import { headers } from "next/headers";

import { type AppRouter } from "@ceritas/api";
import { getUrl, transformer } from "./shared";

export const api = createTRPCProxyClient<AppRouter>({
  transformer,
  links: [
    loggerLink({
      enabled: (op) =>
        process.env.NODE_ENV === "development" ||
        (op.direction === "down" && op.result instanceof Error),
    }),
    unstable_httpBatchStreamLink({
      url: getUrl(),
      headers() {
        const heads = new Map(headers());
        heads.set("x-trpc-source", "rsc");
        return Object.fromEntries(heads);
      },
    }),
  ],
});
Page that I'm calling the server API from: 
import Link from "next/link";

import { CreatePost } from "~app/app/_components/create-post";
import { api } from "../trpc/server";

export default async function Home() {

  const data = await api.company.getAllForAdmin.query({
    orderBy: "id",
    orderDirection: "asc",
  })
import Link from "next/link";

import { CreatePost } from "~app/app/_components/create-post";
import { api } from "../trpc/server";

export default async function Home() {

  const data = await api.company.getAllForAdmin.query({
    orderBy: "id",
    orderDirection: "asc",
  })
router: 
import { createTRPCRouter } from "./trpc";
// redacted
import { companyRouter } from "./routers/company";
// redacted

/**
 * This is the primary router for your server.
 *
 * All routers added in /api/routers should be manually added here.
 */
export const appRouter = createTRPCRouter({
    // redacted
    company: companyRouter,
    // redacted
});

// export type definition of API
export type AppRouter = typeof appRouter;
import { createTRPCRouter } from "./trpc";
// redacted
import { companyRouter } from "./routers/company";
// redacted

/**
 * This is the primary router for your server.
 *
 * All routers added in /api/routers should be manually added here.
 */
export const appRouter = createTRPCRouter({
    // redacted
    company: companyRouter,
    // redacted
});

// export type definition of API
export type AppRouter = typeof appRouter;
2 Replies
Lucas
LucasOP•14mo ago
router procedure: 
  getAllForAdmin: publicProcedure
    .input(
      z.object({
        orderBy: z.enum(["id", "name", "city", "country"]),
        orderDirection: z.enum(["asc", "desc"]),
        searchQuery: z.string().optional(),
        productUuid: z.string().optional(),
      })
    )
    .query(async ({ ctx, input }) => {
      console.log("get all for admin was hit successfully")
      const { orderBy, orderDirection, searchQuery, productUuid } = input;
      const sanitizedsearchQuery = searchQuery?.replace(/[^\w\s]/gi, " ");

      const where: Prisma.CompanyWhereInput = {
        name: {
          contains: sanitizedsearchQuery,
        },
      };

      // redacted

      const companies = await prisma.company.findMany({
         // redacted
      });

      if (!companies) {
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "No companies found.",
        });
      }

      // add element idString to each company, which is id.toString(). map it to new object
      const companiesWithIdString = companies.map((company) => {
        return {
          ...company,
          idString: company.id.toString(),
        };
      });

      return companiesWithIdString;
    }),
  getAllForAdmin: publicProcedure
    .input(
      z.object({
        orderBy: z.enum(["id", "name", "city", "country"]),
        orderDirection: z.enum(["asc", "desc"]),
        searchQuery: z.string().optional(),
        productUuid: z.string().optional(),
      })
    )
    .query(async ({ ctx, input }) => {
      console.log("get all for admin was hit successfully")
      const { orderBy, orderDirection, searchQuery, productUuid } = input;
      const sanitizedsearchQuery = searchQuery?.replace(/[^\w\s]/gi, " ");

      const where: Prisma.CompanyWhereInput = {
        name: {
          contains: sanitizedsearchQuery,
        },
      };

      // redacted

      const companies = await prisma.company.findMany({
         // redacted
      });

      if (!companies) {
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "No companies found.",
        });
      }

      // add element idString to each company, which is id.toString(). map it to new object
      const companiesWithIdString = companies.map((company) => {
        return {
          ...company,
          idString: company.id.toString(),
        };
      });

      return companiesWithIdString;
    }),
I'm running into the error: 
 << query  #1 company.getAllForAdmin  {
  input: { orderBy: 'name', orderDirection: 'asc' },
  result: TRPCClientError: No "query"-procedure on path "company.getAllForAdmin"
      at TRPCClientError.from (webpack-internal:///(rsc)/../../node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs:30:20)
      at eval (webpack-internal:///(rsc)/../../node_modules/@trpc/client/dist/links/httpLink.mjs:42:105)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    meta: { response: [_Response [Response]], responseJSON: [Object] },
    shape: {
      message: 'No "query"-procedure on path "company.getAllForAdmin"',
      code: -32004,
      data: [Object]
    },
    data: {
      code: 'NOT_FOUND',
      httpStatus: 404,
      stack: 'TRPCError: No "query"-procedure on path "company.getAllForAdmin"\n' +
        '    at callProcedure (webpack-internal:///(rsc)/../../node_modules/@trpc/server/dist/config-4c0f8e88.mjs:183:15)\n' +
        '    at inputToProcedureCall (webpack-internal:///(rsc)/../../node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:54:83)\n' +
        '    at eval (webpack-internal:///(rsc)/../../node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:177:51)\n' +
        '    at Array.map (<anonymous>)\n' +
        '    at resolveHTTPResponse (webpack-internal:///(rsc)/../../node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:177:32)',
      path: 'company.getAllForAdmin',
      zodError: null
    },
    [cause]: undefined
  },
  elapsedMs: 415
}
 << query  #1 company.getAllForAdmin  {
  input: { orderBy: 'name', orderDirection: 'asc' },
  result: TRPCClientError: No "query"-procedure on path "company.getAllForAdmin"
      at TRPCClientError.from (webpack-internal:///(rsc)/../../node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs:30:20)
      at eval (webpack-internal:///(rsc)/../../node_modules/@trpc/client/dist/links/httpLink.mjs:42:105)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    meta: { response: [_Response [Response]], responseJSON: [Object] },
    shape: {
      message: 'No "query"-procedure on path "company.getAllForAdmin"',
      code: -32004,
      data: [Object]
    },
    data: {
      code: 'NOT_FOUND',
      httpStatus: 404,
      stack: 'TRPCError: No "query"-procedure on path "company.getAllForAdmin"\n' +
        '    at callProcedure (webpack-internal:///(rsc)/../../node_modules/@trpc/server/dist/config-4c0f8e88.mjs:183:15)\n' +
        '    at inputToProcedureCall (webpack-internal:///(rsc)/../../node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:54:83)\n' +
        '    at eval (webpack-internal:///(rsc)/../../node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:177:51)\n' +
        '    at Array.map (<anonymous>)\n' +
        '    at resolveHTTPResponse (webpack-internal:///(rsc)/../../node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:177:32)',
      path: 'company.getAllForAdmin',
      zodError: null
    },
    [cause]: undefined
  },
  elapsedMs: 415
}
Everything seems to be imported correctly and I am not sure what the issue is. Does anyone have any ideas?
Max
Max•14mo ago
@Lucas Yeah not sure what the t3 boiler plate looks like...But for calling my api on the server (aka page.tsx) I created this helper 
import { appRouter } from "@acme/api/src/root";
import { prisma } from "@acme/db";
import { createServerSideHelpers } from "@trpc/react-query/server";
import superjson from "superjson";

export const APIServer = createServerSideHelpers({
  router: appRouter,
  ctx: { prisma, clerkUserId: null },
  transformer: superjson,
});
import { appRouter } from "@acme/api/src/root";
import { prisma } from "@acme/db";
import { createServerSideHelpers } from "@trpc/react-query/server";
import superjson from "superjson";

export const APIServer = createServerSideHelpers({
  router: appRouter,
  ctx: { prisma, clerkUserId: null },
  transformer: superjson,
});
prob don't need the context in my code. and then for client side I use 
import { createTRPCReact } from "@trpc/react-query";

import { type AppRouter } from "@acme/api/src/root";

export const APIClient = createTRPCReact<AppRouter>({});
import { createTRPCReact } from "@trpc/react-query";

import { type AppRouter } from "@acme/api/src/root";

export const APIClient = createTRPCReact<AppRouter>({});
. Not sure what the createTRPCProxyClient haven't used it yet, maybe better if ya can get it working. Might not even be the issue, but maybe this can help narrow it down?
Want results from more Discord servers?
Add your server