a first look at redwoodJS: intermission - crud

In this part we will not write any code or enter any terminal commands. Instead we'll look at all the code generated by the scaffold command that allowed us to perform our CRUD operations on the blog posts.

PostPage

PostPage is a component that takes in PostCell with a post's id as a prop. PostCell is wrapped in the PostsLayout component.

Here's the view of PostPage with a PostCell wrapped in the PostsLayout:

PostsLayout

If you click Posts you will be linked to routes.posts() and if you click New Post you will be linked to routes.NewPost()

Here's the view of just the PostsLayout:

PostCell

Cells provide a simpler and more declarative approach to data fetching. When you create a cell you export several specially named constants and then Redwood takes it from there.

Cells should be used when your component needs some data from the database or other service that is delayed in responding. Redwood juggles what is displayed and when.

The minimum you need for a cell are the QUERY and Success exports.

• If you don't export an Empty component, empty results will be sent to your Success component.
• If you don't provide a Failure component you'll get error output sent to the console.

Post

• useFlash is an abridgment of React.useContext(FlashContext).
• useMutation is a hook provided by Apollo which will allow us to execute the mutation when we're ready. It is the primary API for executing mutations in an Apollo application.

DELETE_POST_MUTATION

GraphQL string representing the mutation that is passed into useMutation

onCompleted

Displays a message letting you know the post has been deleted

onDeleteClick

Asks you to confirm that you are sure you want to delete the post, and gives the id of the post about to be deleted

rw-segment

In the return statement of the Post component there is a <div> with the className rw-segment which takes the post object and pulls out the post's id, title, body, and createdAt date.

Here's the view in our application:

rw-button-group

This code corresponds to the edit and delete buttons.

Here's the view in our application:

Now if we look at the entire component we can see how rw-segment and rw-button-group are nested inside empty tags.

Here's the view for the entire component.

NewPostPage

NewPostPage is a component that takes in NewPost wrapped in the PostsLayout component. The same PostsLayout from PostPage is being reused here but with a different component nested inside.

Here's the view:

NewPost

NewPost is a component that takes in data from the PostForm component and uses CREATE_POST_MUTATION to save the post to the database.

Here's the view:

PostForm

Redwood provides several helpers to make your life easier when working with forms. It is a wrapper around react-hook-form.

onSubmit

A prop that accepts a function name or anonymous function to be called if validation is successful. Behind the scenes the handler given to onSubmit is given to react-hook-form's handleSubmit function.

<Form>

Surrounds all form elements and provides contexts for errors and form submission.

<FormError>

Displays an error message, typically at the top of your form, containing error messages from the server

<Label>

Used in place of the HTML <label> tag and can respond to errors with different styling

<TextField>

Renders an HTML field, but is registered with react-hook-form to provide some validation and error handling.

<FieldError>

Displays form validation errors and server errors.

Here's the view:

<Label>, <TextField>, and <FieldError> are also used for the Body.

Here's the view:

<Submit>

Used in place of <button type="submit"> and will trigger a validation check and "submission" of the form. It executes the function given to the onSubmit attribute on <Form>.

Here's the view:

And here's the view of the entire <Form> component:

EditPostPage

Much like PostPage, EditPostPage is a component that takes in EditPostCell with a post's id as a prop. EditPostCell is wrapped in the PostsLayout component.

Here's the view:

EditPostCell

We have the UPDATE_POST_MUTATION and QUERY object types we discussed at the beginning of this article. At the bottom we are again returning the <PostForm> component except this time we also have a post prop to specify which post is being edited.

Here's the view:

PostsPage

In Redwood we use singular "post" when working with a single post object and the data associated with it. When we are working with many posts we use the plural "posts." Here we are displaying all of our posts, so it's called PostsPage.

Here's the view:

PostsCell

Here's the view if you have no posts:

Posts

truncate limits the length of the posts being shown, and timeTag encapsulates the logic for created a timestamp for each post.

onCompleted and onDeleteClick are the same functions that we saw in the NewPost component.

rw-table-wrapper-responsive

We have a div that wraps one big table with the className rw-table.

Here's the view:

This is a lot of code so we'll break this down to the table head and table body, and the table body is broken down into table posts and table actions.

1. Table head (47-55)
2. Table body (56-91)
3. Table posts (57-62)
4. Table actions (63-88)

<thead>

The table head lets us know the different fields.

Here's the view:

<tbody>

In the first half of the table body we map over the data passed through the post prop, use the post's id for the key and then pull out the id, title, body, and createdAt time.

Here's the view:

In the second half of the table body we have links to go to a post's page, edit a post, or delete a post.

Here's the view: