Trekiros Posts - Answer Overflow

Trekiros

•Created by Trekiros on 4/30/2024 in #questions

Looking for a way of doing TypeScript validation of static files

Hi fellow typesafe cultists. I have a project with a lot of POJO-style data which I need to: 1) keep in version control (the data gets updated fairly regularly, they're game data files so with each playtest they change, but I want the ability to revert) 2) keep strictly typed (and if possible have autocomplete/error highlighting while editing them) Right now, this data is stored in typescript files, which fulfills both requirements... But, doing it this way bloats the client bundle even when the user only needs 1% of it. I don't think using a database would be a good idea here, as this would only fulfill the second requirement. The ideal would have been for me to find a VSCode extension or command line tool, which would allow me to do type checking in JSON files, but I haven't been able to find a tool like this. The only alternative I can think of right now would be to somehow generate an XSD file as a build step, from my typescript/zod schemas, and then store my data in XML files. Before I start doing something silly, and waste potentially a couple days of work over this, I wanted to ask - is there a better way to do this that I'm just not aware of?

4 replies

TTCTheo's Typesafe Cult

•Created by Trekiros on 1/29/2024 in #questions

Setting the open graph title on a dynamic route within the nextjs pages router

Hi! I'm trying to implement the open graph protocol for my website, but I'm having an issue with dynamic routes because the first render doesn't have access to query params yet. Note: I am using the pages router, and next-seo for the meta tags. Here is an example:

/rules/[id].tsx

import { useRouter } from "next/router";
import { Rule, RuleType } from "@/components/rules";

const Rules: {[ruleId: string]: RuleType} = ...

const RulePage = ({}) => {
    const router = useRouter()
    const id = String(router.query.id)
    const rule = Rules[id]

    return (
        <>
            <NextSeo 
                title={rule?.name || "Article not found"}
                openGraph={{ title: rule?.name || "Article not found" }} />
            <Rule rule={rule} />
        </>
    )
}

export default RulePage

/rules/[id].tsx

import { useRouter } from "next/router";
import { Rule, RuleType } from "@/components/rules";

const Rules: {[ruleId: string]: RuleType} = ...

const RulePage = ({}) => {
    const router = useRouter()
    const id = String(router.query.id)
    const rule = Rules[id]

    return (
        <>
            <NextSeo 
                title={rule?.name || "Article not found"}
                openGraph={{ title: rule?.name || "Article not found" }} />
            <Rule rule={rule} />
        </>
    )
}

export default RulePage

During the first render, the router isn't initialized, so router.query.id is undefined, and as a result, rule is undefined. So when I link a page like /rule/1234 on Discord/Twitter/Facebook etc, even if a rule with an id of 1234 exists, the preview says Article not found... How can I make sure the first render is correct?

5 replies

Gaming

Programming