Theo's Typesafe Cult•2y ago

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•2y 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•2y ago

https://youtu.be/G2ZzmgShHgQ?t=293

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•2y ago

Thanks!

Gaming

Programming

Consuming a tRPC Query in getServerSideProps