arashi-dev Posts

arashi-dev

•Created by arashi-dev on 3/29/2025 in #❓-help

swagger to trpc-like interface generator?

I have a backend which exposes a fully detailed swagger json file. And I want to have an auto generated api client with an interface like trpc. I managed to do it using swagger-typescript-api and custom templates, but wondered if anyone did it already or if there is any open source project that does almost the same thing, so I can get better ideas for implementation. Thanks

4 replies

TtRPC

•Created by arashi-dev on 3/23/2023 in #❓-help

Rate limit in TRPC and NextJS?

Hello, I am using TRPC with nextjs without express adapter. I am wondered what is the best and free solution to rate limit some of the procedures? I found the lru-cache approach for nextjs but thought if there is a better way...

6 replies

TtRPC

•Created by arashi-dev on 1/10/2023 in #❓-help

dynamic query and mutation

Hello. I have an edit form component like this:

    const router = useRouter()
    const { t } = useTranslation(["admin/common"])
    const productId = useMemo(() => router.isReady ? (Array.isArray(router.query.id) ? router.query.id[0] : router.query.id) : undefined, [router.isReady, router.query.id])

    const { data, status } = trpc.admin.products.findOne.useQuery({
        id: +productId!,
    }, {
        enabled: !!productId
    })

    const utils = trpc.useContext()
    const mutate = trpc.admin.products.update.useMutation({
        onSuccess() {
            showNotification({
                message: t("admin/common:messages.success.edit"),
                color: "green"
            })
            utils.admin.products.getAll.invalidate()
        },
        onError() {
            showNotification({
                message: t("admin/common:messages.error.unexpected"),
                color: "red"
            })
        }
    })

    const form = useForm({
        initialValues: data!,
        validateInputOnChange: true,
        validate: zodResolver(productSchema.update),
    })

    ...

    const router = useRouter()
    const { t } = useTranslation(["admin/common"])
    const productId = useMemo(() => router.isReady ? (Array.isArray(router.query.id) ? router.query.id[0] : router.query.id) : undefined, [router.isReady, router.query.id])

    const { data, status } = trpc.admin.products.findOne.useQuery({
        id: +productId!,
    }, {
        enabled: !!productId
    })

    const utils = trpc.useContext()
    const mutate = trpc.admin.products.update.useMutation({
        onSuccess() {
            showNotification({
                message: t("admin/common:messages.success.edit"),
                color: "green"
            })
            utils.admin.products.getAll.invalidate()
        },
        onError() {
            showNotification({
                message: t("admin/common:messages.error.unexpected"),
                color: "red"
            })
        }
    })

    const form = useForm({
        initialValues: data!,
        validateInputOnChange: true,
        validate: zodResolver(productSchema.update),
    })

    ...

this code is going to be repeated for different models (Product, User, Color, Category, etc.). so, I am looking for a way to make it DRY and reusable. the only difference between them is the model name in trpc trpc.admin.THE_MODEL_NAME and the validation schema. the rest are just same and repeated how can I make it reusable? I thought maybe I can create a Component for it and pass fetchData, updateData props to handle the query and mutations. but they are harder to manage as I can't track the status and abort on unmount

3 replies