Consuming a tRPC Query in getServerSideProps

Hey! Building a link shortener for practice using the full create-t3-app stack. Running into an issue consuming a tRPC query in a dynamic page during getServerSideProps. Attached is the error. As far as I can tell, my createTRPCNext config is configured correctly. Here it is:
3 Replies
metalpipemomo
metalpipemomo2y ago
export const api = createTRPCNext<AppRouter>({
config({ ctx }) {
if (typeof window !== 'undefined') {
return {
transformer: superjson,
links: [
httpBatchLink({
url: '/api/trpc',
}),
],
};
}

return {
transformer: superjson,
links: [
loggerLink({
enabled: (opts) =>
process.env.NODE_ENV === 'development' ||
(opts.direction === 'down' &&
opts.result instanceof Error),
}),
httpBatchLink({
url: `${getBaseUrl()}/api/trpc`,
headers() {
if (ctx?.req) {
const {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
connection: _connection,
...headers
} = ctx.req.headers;
return {
...headers,
'x-ssr': '1',
};
}
return {};
},
}),
],
};
},
ssr: true,
});
export const api = createTRPCNext<AppRouter>({
config({ ctx }) {
if (typeof window !== 'undefined') {
return {
transformer: superjson,
links: [
httpBatchLink({
url: '/api/trpc',
}),
],
};
}

return {
transformer: superjson,
links: [
loggerLink({
enabled: (opts) =>
process.env.NODE_ENV === 'development' ||
(opts.direction === 'down' &&
opts.result instanceof Error),
}),
httpBatchLink({
url: `${getBaseUrl()}/api/trpc`,
headers() {
if (ctx?.req) {
const {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
connection: _connection,
...headers
} = ctx.req.headers;
return {
...headers,
'x-ssr': '1',
};
}
return {};
},
}),
],
};
},
ssr: true,
});
I've circumvented this issue by simply importing prisma from '~/server/db' and creating the query in getServerSideProps, but that feels like im avoiding the problem. Perhaps I am missing something from the tRPC docs or maybe this isn't the right away to implement a redirect for a link shortener (A dynamic page that takes in a shortened link, finds the corresponding original link in the database, and redirects the page to said link).
cje
cje2y ago
Christopher Ehrlich
YouTube
Advanced tRPC - Callers, functions, and gSSP
Repo for this video: https://github.com/c-ehrlich/you-dont-need-callers If you want to use schema in the frontend, they cannot be imported from the same file as things that run specifically in the backend. One solution would be to put them into a procedureName.schema.ts or similar file. tRPC: https://trpc.io/docs Create T3 App: https://crea...
metalpipemomo
metalpipemomo2y ago
Thanks!
Want results from more Discord servers?
Add your server