metalpipemomo Comments - Answer Overflow

(I understand that I can likely solve the issue by following the helpful chain of error messages but that would land me in a config that looks quite different. I want to understand why I can't use the same config here!)

8 replies

TTCTheo's Typesafe Cult

•Created by metalpipemomo on 7/31/2023 in #questions

CommonJS/Module Errors Feel Random?

I am using ES imports in both projects. Is there something I am fundamentally missing/misunderstanding? Here is index.ts of the app that does not work:

import chalk from "chalk";
import figlet from "figlet";
import { Command } from "commander";

const program = new Command();

program
    .name("cli-test")
    .version(
        "1.0.0",
        "-v, --version",
        chalk.blue("Display the version number.")
    )
    .description("Testing a cli application.")
    .parse(process.argv);

const options = program.opts();

console.log(chalk.blue(figlet.textSync("Howdy!")));

import chalk from "chalk";
import figlet from "figlet";
import { Command } from "commander";

const program = new Command();

program
    .name("cli-test")
    .version(
        "1.0.0",
        "-v, --version",
        chalk.blue("Display the version number.")
    )
    .description("Testing a cli application.")
    .parse(process.argv);

const options = program.opts();

console.log(chalk.blue(figlet.textSync("Howdy!")));

8 replies

TTCTheo's Typesafe Cult

•Created by metalpipemomo on 7/31/2023 in #questions

CommonJS/Module Errors Feel Random?

8 replies

TTCTheo's Typesafe Cult

•Created by metalpipemomo on 3/23/2023 in #questions

Consuming a tRPC Query in getServerSideProps

Thanks!

6 replies

TTCTheo's Typesafe Cult

•Created by metalpipemomo on 3/23/2023 in #questions

Consuming a tRPC Query in getServerSideProps

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).

6 replies

TTCTheo's Typesafe Cult

•Created by metalpipemomo on 3/23/2023 in #questions

Consuming a tRPC Query in getServerSideProps

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.

6 replies

TTCTheo's Typesafe Cult

•Created by metalpipemomo on 3/23/2023 in #questions

Consuming a tRPC Query in getServerSideProps

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,
});

6 replies

TTCTheo's Typesafe Cult

•Created by metalpipemomo on 10/16/2022 in #questions

getStaticProps runs multiple times!

props is just { [key: string]: any; }

22 replies

TTCTheo's Typesafe Cult

•Created by metalpipemomo on 10/16/2022 in #questions

getStaticProps runs multiple times!

For now, is there a reason InferGetServerSidePropsType doesn't pick up the type of my prop?

export default function Post(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
    const post = props.post as Post;
    return (
        <div>
            <p>{post.title}</p>
            <p>{post.body}</p>
            {post.images.map((img, index) => {
                return (
                    <Image
                        src={img.url}
                        width={img.width}
                        height={img.height}
                        key={index}
                    />
                );
            })}
        </div>
    );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
    const { pid } = context.params;
    const post = await prisma.post.findFirst({
        where: { id: parseInt(pid as string) },
        include: {
            images: true
        }
    }) as Post;
    return {
        props: { post }
    };
};

export default function Post(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
    const post = props.post as Post;
    return (
        <div>
            <p>{post.title}</p>
            <p>{post.body}</p>
            {post.images.map((img, index) => {
                return (
                    <Image
                        src={img.url}
                        width={img.width}
                        height={img.height}
                        key={index}
                    />
                );
            })}
        </div>
    );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
    const { pid } = context.params;
    const post = await prisma.post.findFirst({
        where: { id: parseInt(pid as string) },
        include: {
            images: true
        }
    }) as Post;
    return {
        props: { post }
    };
};