Lucas Posts - Answer Overflow

Lucas

•Created by Lucas on 10/19/2023 in #questions

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;

5 replies

Gaming

Programming