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:
Page that I'm calling the server API from:
router:
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;