Hi all,
I am on Tutorial | Saving Data and I have followed exactly the steps and codes but in the section Displaying Server Errors I could not get the error displayed exactly like the tutorial.
I’m having console log like this:
Uncaught (in promise) Error: email must be formatted like an email address
at new ApolloError (index.js:29:1)
at QueryManager.js:91:1
at both (asyncMap.js:16:1)
at asyncMap.js:9:1
at new Promise (<anonymous>)
at Object.then (asyncMap.js:9:1)
at Object.next (asyncMap.js:17:1)
at notifySubscription (module.js:132:1)
at onNotify (module.js:176:1)
at SubscriptionObserver.next (module.js:225:1)
and the page looks like this:
so basically no FieldError is displayed - the email text field remains as if there is no error. I tried to copy and paste exactly the codes from the tutorial but I get the same results.
Using Chrome, node.js and redwood all latest version.
Hope someone could help with the issue, thanks!!
The codes are as below for reference:
import { MetaTags } from '@redwoodjs/web'
import {
FieldError,
Form,
FormError,
Label,
TextField,
TextAreaField,
Submit,
} from '@redwoodjs/forms'
import { useMutation } from '@redwoodjs/web'
import { toast, Toaster } from '@redwoodjs/web/toast'
const CREATE_CONTACT = gql`
mutation CreateContactMutation($input: CreateContactInput!) {
createContact(input: $input) {
id
}
}
`
const ContactPage = () => {
const [create, { loading, error }] = useMutation(CREATE_CONTACT, {
onCompleted: () => {
toast.success('Thank you for your submission!')
},
})
const onSubmit = (data) => {
create({ variables: { input: data } })
}
return (
<>
<MetaTags title="Contact" description="Contact page" />
<Toaster toastOptions={{ duration: 100000 }} />
<Form onSubmit={onSubmit} config={{ mode: 'onBlur' }} error={error}>
<FormError
error={error}
wrapperClassName="form-error"
/>
<Label name="name" errorClassName="error">
Name
</Label>
<TextField
name="name"
validation={{ required: true }}
errorClassName="error"
/>
<FieldError name="name" className="error" />
<Label name="email" errorClassName="error">
Email
</Label>
<TextField
name="email"
validation={{
required: true,
}}
errorClassName="error"
/>
<FieldError name="email" className="error" />
<Label name="message" errorClassName="error">
Message
</Label>
<TextAreaField
name="message"
validation={{ required: true }}
errorClassName="error"
/>
<FieldError name="message" className="error" />
<Submit disabled={loading}>Save</Submit>
</Form>
</>
)
}
export default ContactPage