DEV Community

loading...
Cover image for a first look at redwoodJS: intermission - crud

a first look at redwoodJS: intermission - crud

ajcwebdev profile image anthonyCampolo ・7 min read

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.

15-web-src-pages-PostPage

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

16-PostPage-rendered

PostsLayout

17-layouts-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:

18-PostsLayout-rendered

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.

19-web-src-components-PostCell

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.

20-web-src-components-Post

DELETE_POST_MUTATION

GraphQL string representing the mutation that is passed into useMutation

21-web-src-components-Post-DELETE_POST_MUTATION

onCompleted

22-web-src-components-Post-onCompleted

Displays a message letting you know the post has been deleted

22-1-web-src-components-Post-onCompleted-rendered

onDeleteClick

23-web-src-components-Post-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

23-1-web-src-components-Post-onDeleteClick-rendered

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.

24-web-src-components-Post-rw-segment

Here's the view in our application:

25-Post-rw-segment-rendered

rw-button-group

This code corresponds to the edit and delete buttons.

26-web-src-components-Post-rw-button-group

Here's the view in our application:

27-Post-rw-button-group-rendered

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

28-web-src-components-Post-return

Here's the view for the entire component.

29-Post-return-rendered

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.

30-web-src-pages-NewPostPage

Here's the view:

31-NewPostPage-rendered

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.

32-web-src-components-NewPost

Here's the view:

33-new-post-form-rendered

PostForm

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

34-src-components-PostForm

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.

35-src-components-PostForm-onSubmit

<Form>

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

36-src-components-PostForm

<FormError>

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

37-src-components-PostForm-FormError

<Label>

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

38-src-components-PostForm-Title-Label

<TextField>

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

39-src-components-PostForm-Title-TextField

<FieldError>

Displays form validation errors and server errors.

40-src-components-PostForm-Title-FieldError

Here's the view:

41-Title-rendered

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

42-Body

Here's the view:

43-Body-rendered

<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>.

44-Save

Here's the view:

45-Save-rendered

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

46-PostForm-rendered

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.

47-web-src-pages-EditPostPage

Here's the view:

48-EditPostPage-rendered

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.

49-web-src-components-EditPostCell

Here's the view:

50-EditPostCell-rendered

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.

51-web-src-pages-PostsPage

Here's the view:

52-PostsPage-rendered

PostsCell

53-web-src-components-PostsCell

Here's the view if you have no posts:

54-posts-page

Posts

55-web-src-components-Posts

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

56-web-src-components-Posts-PostsList

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.

57-web-src-components-Posts-return

Here's the view:

58-Posts-rw-table-wrapper-responsive-rendered

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)

59-Posts-rw-table-wrapper-responsive

<thead>

The table head lets us know the different fields.

60-Posts-thead

Here's the view:

61-Posts-thead-rendered

<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.

62-Posts-td

Here's the view:

63-Posts-td-rendered

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.

64-Posts-rw-table-actions

Here's the view:

65-Posts-rw-table-actions-rendered

Discussion

pic
Editor guide