Redwood: Flash Messaging causes error with scaffold CRUD

Created on 18 Jun 2020  路  2Comments  路  Source: redwoodjs/redwood

Flash Messaging error introduced via this PR https://github.com/redwoodjs/redwood/pull/654

@cannikin @Terris I ran into the errors below running through local tests in preparation for cutting a new release. If you think this is a quick fix, please submit a path. Otherwise, I might revert the PR for now so we can get v0.11.0 out. Suggestions otherwise?

Steps to Replicate

  • Upgrade to 0.10.1-canary.26
  • Generate Scaffold for a model of your choosing
  • Create a New via UI

GraphQL mutation and queries run fine:

api | POST /graphql 200 7.382 ms - 25
api | 2020-06-18T05:32:01.232Z prisma-client Prisma Client call:
api | 2020-06-18T05:32:01.233Z prisma-client prisma.article.create({
api |   data: {
api |     title: 'hello',
api |     body: 'world'
api |   }
api | })
api | 2020-06-18T05:32:01.233Z prisma-client Generated request:
api | 2020-06-18T05:32:01.233Z prisma-client mutation {
api |   createOneArticle(data: {
api |     title: "hello"
api |     body: "world"
api |   }) {
api |     id
api |     title
api |     body
api |     createdAt
api |   }
api | }
api | 
api | POST /graphql 200 25.077 ms - 59
api | 2020-06-18T05:32:01.320Z prisma-client Prisma Client call:
api | 2020-06-18T05:32:01.320Z prisma-client prisma.article.findMany(undefined)
api | 2020-06-18T05:32:01.321Z prisma-client Generated request:
api | 2020-06-18T05:32:01.321Z prisma-client query {
api |   findManyArticle {
api |     id
api |     title
api |     body
api |     createdAt
api |   }
api | }
api | 
api | POST /graphql 200 4.152 ms - 125

Model

model Article {
  id        Int      @id @default(autoincrement())
  title     String
  body      String
  createdAt DateTime @default(now())
}
``
### `NewArticle.js` from Scaffold Generator
```js
import { useMutation, useFlash } from '@redwoodjs/web'
import { navigate, routes } from '@redwoodjs/router'
import ArticleForm from 'src/components/ArticleForm'

const CREATE_ARTICLE_MUTATION = gql`
  mutation CreateArticleMutation($input: CreateArticleInput!) {
    createArticle(input: $input) {
      id
    }
  }
`

const NewArticle = () => {
  const [createArticle, { loading, error }] = useMutation(
    CREATE_ARTICLE_MUTATION,
    {
      onCompleted: () => {
        navigate(routes.articles())
        addMessage('Article created.', { classes: 'rw-flash-success' })
      },
    }
  )

  const onSave = (input) => {
    createArticle({ variables: { input } })
  }

  return (
    <div className="rw-segment">
      <header className="rw-segment-header">
        <h2 className="rw-heading rw-heading-secondary">New Article</h2>
      </header>
      <div className="rw-segment-main">
        <ArticleForm onSave={onSave} loading={loading} error={error} />
      </div>
    </div>
  )
}

export default NewArticle

Browser ErrorBoundary Output

Unhandled Rejection (ReferenceError): addMessage is not defined

onCompleted
src/components/NewArticle/NewArticle.js:19

> 16 |   {
> 17 |     onCompleted: () => {
> 18 |       navigate(routes.articles())
>>19 |       addMessage('Article created.', { classes: 'rw-flash-success' })
> 20 | ^   },
> 21 |   }
> 22 | )

callOncomplete
node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:468

MutationData.push.../node_modules/@apollo/react-hooks/lib/react-hooks.esm.js.MutationData.onMutationCompleted
node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:478

(anonymous function)
node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:415
bu2-confirmed

All 2 comments

@thedavidprice - so sorry about this. I'll submit a PR in a few minutes with a fix.

@Terris all good and huge thanks for the quick turnaround!

The yay/boo on this is that as of yesterday we have an early version of EtoE tests that helped catch this bug before releasing! We're _all_ getting better at this slowly but surely 馃槅

Was this page helpful?
0 / 5 - 0 ratings