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

2 Replies

mark salsbery•3y ago

The only difference between those models is the name? They can all use the same zod schema? You could probably make an object type that represents all your models using a const string or something to differentiate the types, but I can’t imagine that making the code easier in any way on either the client or the server. There’s very little to no boilerplate code for tRPC or tanstack/query so I don’t see the benefit of trying to combine all the models

arashi-devOP•3y ago

well, their schema is different but extending a common schema. I handled it using the useMutation and useQuary hooks imported directly from react-query and used the trpc getQueryKey method and useContext() methods.

type Models = "products" | "colors" | "categories"

type Models = "products" | "colors" | "categories"

type FormProps<TModel extends Models> = {
    model: TModel
}

const Form = <TModel extends Models>({model}: FormProps<TModel>) => {
    ...

    const { data, status } = useQuery<RouterOutputs['admin'][TModel]['findOne']>(
        trpc.admin[model].findOne.getQueryKey({ id: +id! }, "query"),
        async (ctx) => {
            return await utils.client.admin[model as Models].findOne.query({
                id: +id!
            }, {
                signal: ctx.signal
            }) as RouterOutputs['admin'][TModel]['findOne']
        }
    )

    ...
}

type FormProps<TModel extends Models> = {
    model: TModel
}

const Form = <TModel extends Models>({model}: FormProps<TModel>) => {
    ...

    const { data, status } = useQuery<RouterOutputs['admin'][TModel]['findOne']>(
        trpc.admin[model].findOne.getQueryKey({ id: +id! }, "query"),
        async (ctx) => {
            return await utils.client.admin[model as Models].findOne.query({
                id: +id!
            }, {
                signal: ctx.signal
            }) as RouterOutputs['admin'][TModel]['findOne']
        }
    )

    ...
}

not sure if it is a good practice, but does the job

dynamic query and mutation

Did you find this page helpful?