Tutorial - not displaying FieldError / server error

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

Hi @lixiang and welcome!

Thanks for bringing up this issue – it’s timely as we actually just fixed the lack of form field errors last week in this PR.

This fix will be released soon and the tutorial will be updated as well to reflect the change.

In short - when service validations were introduced, they didn’t send the info to make a field level error message.

You can see more into in the Pr and issue threads.

Thanks again!

1 Like

Thank you dthyresson for your timely reply!

I have to say I am a little disappointed as I have encountered 2 issues doing the tutorial and I haven’t even completed the part I by half :joy: The other prisma issue costs me more than half day. Luckily both times I am able to find solutions here - This really is a friendly community!

Hope I could be of some help for other junior learners by letting them know they are not alone :slightly_smiling_face: And I will be more than happy to provide any possible help.

Thanks - that means a lot to all of us. Redwood is nothing without the people who use it, build with it and help improve it.

Understood. The tutorial is in the process of a rewrite update as we near 1.0 and we are trying to smooth out the rough edges. Thanks for your patience - and expect more tutorial content soon!

Hi @lixiang sorry about the errors! We just released 0.50.0 which includes the PR that @dthyresson mentioned above. We expected to release it last week when the tutorial was updated to include Service Validations but there was a delay. You can upgrade your current app with yarn rw upgrade or if you’re not too far along you could just start over!

1 Like