Tutorial: server validation

I’m on https://redwoodjs.com/tutorial/saving-data and I don’t get the error rendered nicely at the email field like the example: https://user-images.githubusercontent.com/300/80259553-c46e2780-863a-11ea-9441-54a9112b9ce5.png

I get this:
image

(Shortly followed by the page disappearing and being replaced by the full screen error handler).

Pretty sure I followed the steps - what am I doing wrong?

In fact, I used the code from " Here’s the final ContactForm.js page" and still had the issue.

Also worth noting that code doesn’t include the client-side email validation…

Hey @insomniacity,

Could you share that error message with us? We recently upgraded react-hook-form and it could be related.

From the console:

Uncaught (in promise) Error: GraphQL error: Can't create new contact
    ApolloError bundle.esm.js:63
    next bundle.esm.js:1004
    notifySubscription Observable.js:135
    onNotify Observable.js:179
    next Observable.js:235
    next bundle.esm.js:866
    next bundle.esm.js:866
    notifySubscription Observable.js:135
    onNotify Observable.js:179
    next Observable.js:235
    next bundle.esm.js:29
    notifySubscription Observable.js:135
    onNotify Observable.js:179
    next Observable.js:235
    createHttpLink bundle.esm.js:76
    promise callback*createHttpLink/</< bundle.esm.js:75
    Subscription Observable.js:197
    subscribe Observable.js:279
    onError bundle.esm.js:11
    Subscription Observable.js:197
    subscribe Observable.js:279
    multiplex bundle.esm.js:864
    Subscription Observable.js:197
    subscribe Observable.js:279
    mutate bundle.esm.js:1001
    mutate bundle.esm.js:998
    step tslib.es6.js:100
    verb tslib.es6.js:81
    __awaiter tslib.es6.js:74
    __awaiter tslib.es6.js:70
    mutate bundle.esm.js:950
    mutate bundle.esm.js:2016
    node_modules app.chunk.js:713
    runMutation react-hooks.esm.js:419
    onSubmit ContactPage.js:33
    onSubmit index.js:184
    handleSubmit index.esm.js:1124
    React 17
    unstable_runWithPriority scheduler.development.js:653
    React 15
    unstable_runWithPriority scheduler.development.js:653
    React 6
    _callee$ page-loader.js:99
    Babel 10

The HTTP response is the expected UserInputError

Do you know which version of Redwood you’re using? The command yarn rw info will show you if needed.

v0.17 is now at v0.17.2 due to a Prisma related bug (Prisma Client is the db object). And there’s now an additional Prisma patch release we’ve not yet included in a Redwood release. So there’s a chance this is related. However, I would have expected it to show up earlier in the Tutorial if so :thinking:

  System:
    OS: Windows 10 10.0.19041
  Binaries:
    Node: 12.18.3 - ~\AppData\Local\Temp\yarn--1599395439779-0.33680748927915904\node.CMD
    Yarn: 1.22.5 - ~\AppData\Local\Temp\yarn--1599395439779-0.33680748927915904\yarn.CMD
  Browsers:
    Chrome: 85.0.4183.83
    Edge: Spartan (44.19041.423.0), Chromium (85.0.564.44)
  npmPackages:
    @redwoodjs/core: ^0.17.2 => 0.17.2

Thank you for sharing that.

Sorry I don’t have more time to dig in now. Here’s my example repo of the finished Tutorial Blog Project. You could check your code against this repo if interested:

We’ll try to look deeper next week.