Shared errors format is incompatible with useForm's types
#26
Comments
enkot
changed the title
errors format are incompatible with useForm's typeserrors format is incompatible with useForm's types
|
If it's helpful at all, I was able to modify the exception handler class to better support In my import app from '@adonisjs/core/services/app'
import { HttpContext, ExceptionHandler } from '@adonisjs/core/http'
import type { StatusPageRange, StatusPageRenderer } from '@adonisjs/core/types/http'
import { errors as vineErrors } from '@vinejs/vine'
import { ValidationMessages } from '@vinejs/vine/types'
export default class HttpExceptionHandler extends ExceptionHandler {
/**
* In debug mode, the exception handler will display verbose errors
* with pretty printed stack traces.
*/
protected debug = !app.inProduction
/**
* Status pages are used to display a custom HTML pages for certain error
* codes. You might want to enable them in production only, but feel
* free to enable them in development as well.
*/
protected renderStatusPages = app.inProduction
/**
* Status pages is a collection of error code range and a callback
* to return the HTML contents to send as a response.
*/
protected statusPages: Record<StatusPageRange, StatusPageRenderer> = {
'404': (error, { inertia }) => inertia.render('errors/not_found', { error }),
'500..599': (error, { inertia }) => inertia.render('errors/server_error', { error }),
}
/**
* The method is used for handling errors and returning
* response to the client
*/
async handle(error: unknown, ctx: HttpContext) {
if (error instanceof vineErrors.E_VALIDATION_ERROR) {
const errorsList = (error.messages as Array<ValidationMessages>).reduce(
(accumulator, value: ValidationMessages) => {
accumulator[value.field] = value.message
return accumulator
},
{} as Record<string, string>
)
ctx.session.flash("errors", errorsList)
}
return super.handle(error, ctx)
}
/**
* The method is used to report error to the logging service or
* the a third party error monitoring service.
*
* @note You should not attempt to send a response from this method.
*/
async report(error: unknown, ctx: HttpContext) {
return super.report(error, ctx)
}
}Then in your vue component <script setup lang="ts">
import { Head, usePage, useForm } from '@inertiajs/vue3'
import DashboardLayout from '~/layouts/dashboard_layout.vue'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { SubmitButton } from '@/components/ui/submit_button'
import InputError from '@/components/InputError.vue'
const form = useForm({
name: '',
uploadedFile: null as File | null,
})
const submitForm = () => {
form.post(`/fileUploadEndpoint`, {
forceFormData: true,
onSuccess: () => {
form.reset()
},
onError: (err) => {
form.setError(err as any)
}
})
}
</script>
<template>
<Head title="New Project" />
<DashboardLayout pageTitle="New Project">
<template #actions></template>
<form @submit.prevent="submitForm" enctype="multipart/form-data" class="grid w-full items-center gap-2">
<div>
<Label for="name">File Name</Label>
<Input v-model="form.name" id="name" type="text" placeholder="MyFile.txt" />
<InputError :error="form.errors.name ? form.errors.name[0] : null" />
</div>
<div>
<Label for="uploadedFile">Upload File</Label>
<Input id="uploadedFile" type="file" @change="e => form.uploadedFile = e.target.files[0]" />
<InputError :error="form.errors.uploadedFile ? form.errors.uploadedFile[0] : null" />
</div>
<SubmitButton :processing="form.processing">Create New File</SubmitButton>
</form>
</DashboardLayout>
</template>
</script> |
|
I found another solution for this. in import { defineConfig } from '@adonisjs/inertia'
import type { InferSharedProps } from '@adonisjs/inertia/types'
const inertiaConfig = defineConfig({
/**
* Path to the Edge view that will be used as the root view for Inertia responses
*/
rootView: 'inertia_layout',
/**
* Data that should be shared with all rendered pages
*/
sharedData: {
errors: (ctx) => {
const errors: undefined | Record<string, string[]> = ctx.session?.flashMessages.get('errors')
if (errors === undefined) {
return errors
}
const errorList: Record<string, string> = {}
for (const [key, value] of Object.entries(errors)) {
errorList[key] = value[0]
}
return errorList
},
},
/**
* Options for the server-side rendering
*/
ssr: {
enabled: false,
entrypoint: 'inertia/app/ssr.ts',
},
})
export default inertiaConfig
declare module '@adonisjs/inertia/types' {
export interface SharedProps extends InferSharedProps<typeof inertiaConfig> {}
}and that's it. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Package version
1.1.0
Describe the bug
By default, Adonis returns validation errors for each field as an array of strings, but the
useFormtype for Inertia errors isRecord<string, string>(https://github.com/inertiajs/inertia/blob/master/packages/vue3/src/useForm.ts#L10).I think, in order to be compatible with
useFormand because Adonis uses bail mode by default, it makes sense to provide users with a different error reporter to return one error message for each field.Reproduction repo
No response
The text was updated successfully, but these errors were encountered: