Redwood

Question 1

When adding a package to Redwood, what needs to be kept in mind?

Answer 1

“Unlike with plain React, you need to specify which workspace they go in. It needs to look like this:<div><img></img><br></br></div>”

Question 2

What is the command to generate a new page in Redwood?

Answer 2

“<img></img><div>or yarn rw g page home /</div><div><br></br></div><div>Where ‘home’ will be replaced by whatever page you want to create and ‘/’ is replaced by whatever url you want to map the route to.</div>”

Question 3

What 4 things does the following code do?<div>yarn redwood generate page home /<br></br></div>

Answer 3

1. Creates the page, like:<div>web/src/pages/HomePage/HomePage.js</div><div><br></br></div><div>2. Creates a test file web/src/pages/HomePage/HomePage.test.js with a single, passing test.</div><div><br></br></div><div>3.Creates a StoryBook at web/src/pages/HomePage/HomePage.stories.js,</div><div><br></br></div><div>4.Adds a Route in web/src/Routes.js that maps to the / path that we passed in</div>

Question 4

What’s a cool thing Redwood does for you in your routes file?

Answer 4

Automatically imports all pages under the Pages directory, so you can avoid a huge stupid import statement.

Question 5

What happens if you don’t include the directory when generating a page?

Answer 5

It assumes you want it at /myThing , where myThing is whatever the name of the page it.

Question 6

Why don’t you have to worry about creating too many pages in Redwood?

Answer 6

It will automatically code-split on each page, so the initial page loads will still blind you with their speed. The number of pages will not impact the webpack bundle size.

Question 7

When linking to a named route, what is the function named?

Answer 7

The same as the name attribute on the in the routes file.

Question 8

What does a Redwood link look like?

Answer 8

“<img></img>”

Question 9

What do you do if you need a table to have a string id (Say UUID or CUID)?

Answer 9

You just set the id to a String in the schema, and then you can use the built in uuid() or cuid() functions instead of autoincrement()

Question 10

How do you make changes to the db in Redwood?

Answer 10

1. Add the new data-type definition to api/prisma/schema.prisma<div><br></br></div><div>2. run ‘yarn rw db save create posts’</div><div><br></br></div><div>3. Apply the migration by running ‘yarn rw db up’</div><div><br></br></div><div>4. Then you can create CRUD action pages, Cells, GraphQL mutations and types, and a services file for business logic with scaffolding by running:</div><div>‘yarn rw g scaffold post’</div>

Question 11

What is the process to add a table in Redwood?

Answer 11

1. Add data definition to api/prisma/schema.prisma<div><br></br></div><div>2. Save the change - yarn rw db save create posts</div><div><br></br></div><div>3. Apply the migration with yarn rw db up</div><div><br></br></div>

Question 12

What all do Cells take care of?

Answer 12

They handle the query, Loading/Error/Empty/Success states

Question 13

When is QUERY called within a cell?

Answer 13

Automatically anytime that a component is rendered, you don’t have to worry about it.

Question 14

What life cycle helpers do Cells provide?

Answer 14

beforeQuery handles the case where you need to massage some props before passing them to the query.<div><br></br></div><div>afterQuery handles the case where you need to do some stuff with the data that returns from the query before passing it off to your Success component.</div>

Question 15

What states can data come back from a query in within Cells?

Answer 15

Success, Failure, Empty, Loading

Question 16

Which exports are required for a cell to work?

Answer 16

QUERY and Success

Question 17

What happens if you don’t export an Empty component within a cell?

Answer 17

those calls get passed to Success instead.

Question 18

What happens if you don’t export a Failure component from a cell?

Answer 18

It just throws an error in the console.

Question 19

How can you generate a cell?

Answer 19

yarn rw g cell ModelName

Question 20

What does yarn rw g cell ModelName generate?

Answer 20

A new file with boilerplate included for data states, and a test file.

Question 21

How do you alias gql data?

Answer 21

You can just change the name (not the query) in the gql, then that will change the name of the prop being passed into your Success component.

Question 22

What is the standard life-cycle of adding a new feature within Redwood?

Answer 22

<ol> <li>Generate the homepage/landing page for the feature</li> <li>Generate the layout for those pages.</li> <li>Define the database schema</li> <li>Run migrations to update database and add the new table.</li> <li>Scaffold a CRUD interface to the database table.</li> <li>Create a cell to load the data and take care of loading/empty/fail/success states.</li> <li>Add the cell to the page.</li></ol>

Question 23

How do queries work within Redwood?

Answer 23

“<img></img>”

Question 24

What do the *.sdl.js files on the api side define?

Answer 24

the GraphQL Object, the query, and the mutations - they ar the whole interface of your API.

Question 25

Why does Redwood avoid business logic in the resolver map?

Answer 25

Because it makes files big and not easily re-used - it puts this logic in the api/src/services

Question 26

Describe an example Javascript SDL.

Answer 26

“<img></img>”

Question 27

What does a typical services file look like?

Answer 27

“<img></img>”

Question 28

What is the db variable within your services file?

Answer 28

An instance of Prisma client.

Question 29

What sweet thing does Apollo do for you with your query results?

Answer 29

It waits for the response before sending them back, so you don’t need to mess with async/await or callbacks.

Question 30

Where do Services fit in, in regards to database tables?

Answer 30

They are meant to be a layer above them - so you could have a Billing service that hits both a transactions and a subscriptions table.

Question 31

How can you keep a service function un-exposed?

Answer 31

Leave it out of the Query and Mutation functions within your sdl.

Question 32

What does dividing your app into well-defined services and then providing an API for them do for you?

Answer 32

It enforces the separation of concerns and increases the code’s maintainability.

Question 33

Where does data from a service come back to on the front side?

Answer 33

Your Redwood Cell’s success component, and then you can loop through it and/or display it like any other React component.

Question 34

How do you make route params?

Answer 34

“<img></img><div>This says ““whatever value is in this position of the path when it comes in, let me reference it by the arbitrary name I’ve given it within the curly bois.</div>”

Question 35

How do you link to a route with a route param?

Answer 35

“<div><div> {post.title}</div><div><span></span></div></div>”

Question 36

What is your key that you need a cell?

Answer 36

Any time you’re doing data retrieval from the database.

Question 37

“How would you change this query to accept a param?<div><img></img><br></br></div>”

Answer 37

“<img></img>”

Question 38

What automagic does Redwood do for you around route params?

Answer 38

“Whenever there’s a route param within a route, that variable is automatically available to the page that route renders, you just pull it into your component and use it:<div><br></br></div><div><img></img><br></br></div>”

Question 39

How do you typecast a route param?

Answer 39

“It’s as easy as specifying it with a colon:<div><img></img><br></br></div>”

Question 40

What additional benefit does type casting a route param give you?

Answer 40

It prevents route matching unless what’s entered matches - so :Int will only match if what’s put into the browser is entirely digits.

Question 41

How do you import React into Redwood?

Answer 41

It’s all automatically done for you, so finally, you don’t have to import it over and over again in every file.

Question 42

What do Redwood forms start with?

Answer 42

… The tag, as it should be.

Question 43

How do you validate a Redwood Form helper?

Answer 43

you pass an object as its validation attribute with whatever you need.

Question 44

How do you display validation errors on a redwood form?

Answer 44

You first pass a validation object to the form helper field, and then place a FieldError component with the same name as the form helper field.

Question 45

How do you style a FieldError component?

Answer 45

It takes a className prop, which you can pass in easily to style it, since it’s just plain html.

Question 46

How do you style an error input (not display the error, but change the appearance of the input itself)

Answer 46

Within your css, just apply a style to an input or textarea or whatever, and then on your FormField, pass it a prop named errorClassName with the name of the class to be applied when an error occurs.

Question 47

How can you style a form label upon error?

Answer 47

You have to use Redwood’s custom component, but then you just set it to have the same name as your field, and give it an errorClassName that you’ve set in your css on the label (label.error {})

Question 48

In addition to className or errorClassName, what other fields do React Form components accept for styling?

Answer 48

style and errorStyle

Question 49

How do you validate an email form field?

Answer 49

“the validation object passed in as a prop on the form field can take a pattern:<div><img></img><br></br></div>”

Question 50

How do you validate as soon as the user leaves a field, not on submit?

Answer 50

“Oh god - it’s so simple -<div><img></img><br></br></div>”

Question 51

What are Redwood Forms built on top of?

Answer 51

React Hook Form - so you can visit their docs and do everything they mention.

Question 52

What is the first step when adding a new database table to Redwood?

Answer 52

Open up api/prisma/schema.prisma and add the model with whatever fields it needs.

Question 53

How do you allow for an optional field within Prisma?

Answer 53

Put a question mark next to the type name -<div>name String? will allow name to be either a String or NULL</div>

Question 54

After adding a new model/database table in the schema.prisma, what’s the next (second) step?

Answer 54

Create a migration file - yarn rw db save (name of migration)

Question 55

After creating the migration file (2nd step) - what is the third step when adding a new model to a Redwood app?

Answer 55

Run the migration to update the database:<div>yarn rw db up</div>

Question 56

After updating the database (step 3) what is the next step wheen adding a model to our Redwood db?

Answer 56

Create the GraphQL interface so that we can access the new table:<div>yarn rw g sdl contact</div>

Question 57

What two files does yarn rw g sdl (table) create?

Answer 57

1. graphql/contacts.sdl.js with our interfaces and queries<div>2. services/contacts/contacts.js with our service methods that can be called.</div>

Question 58

Why does Redwood generate create and update Inputs within the graphql sdl?

Answer 58

It follows the recommendation to use Input Types in mutations rather than listing out each and every field that can be set.

Question 59

By default, how do requirements work within the generated GraphQL Interfaces?

Answer 59

Any required fields are also required on the create input (because you can’t generate a record without them) - but nothing is explicitly required by default in the update input.

Question 60

What does Redwood assume when creating inputs regarding the id or createdAt fields?

Answer 60

It assumes you won’t want to update those and that they’re being set on the back end rather than explicitly, so it leaves them out of the inputs.

Question 61

What naming convention does Redwood follow between its sdl and services files/

Answer 61

Each field listed in the Query and Mutation types in the sdl file are automatically mapped to a function with the same name in the services file.