redwood.js各层级之间的关系

入口路由代码

<Route path="/article/{id:Int}" page={ArticlePage} name="article" />

Int 将路由路径参数转为整形

路由到page组件

page代码

import { MetaTags } from '@redwoodjs/web'
import ArticleCell from 'src/components/ArticleCell'

interface Props {
  id: number
}

const ArticlePage = ({ id }: Props) => {
  return (
    <>
      <MetaTags title="Article" description="Article page" />
      <ArticleCell id={id} />
    </>
  )
}

export default ArticlePage

路由参数以props方式传入到page组件, page组件返回cell组件ArticleCell,cell完成curd的操作

Cell代码

import type { FindArticleQuery } from 'types/graphql'
import type { CellFailureProps, CellSuccessProps } from '@redwoodjs/web'

export const QUERY = gql`
  query ArticleQuery($id: Int!) {
    article: post(id: $id) {
      id
      title
      body
      createdAt
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>Empty</div>

export const Failure = ({ error }: CellFailureProps) => (
  <div style={{ color: 'red' }}>Error: {error.message}</div>
)

export const Success = ({ article }: CellSuccessProps<FindArticleQuery>) => {
  return Article({ article })
}

Cell接受父组件Page传递的参数执行相关curd操作,在Success返回展示组件, 由它来连接到具体的展示层

Cell层同时还包含数据展示的通用组件

Components 代码

import { Link, routes } from '@redwoodjs/router'

import type { Post } from 'types/graphql'

interface Props {
  article: Post
}

const Article = ({ article }: Props) => {
  return (
    <article>
      <header>
        <h2>
          <Link to={routes.article({ id: article.id })}>{article.title}</Link>
        </h2>
      </header>
      <div>{article.body}</div>
      <div>Posted at: {article.createdAt}</div>
    </article>
  )
}

export default Article

redwood各模块间的对应关系

Page 对应 Controller

yarn rw g cell Test
✔ Generating component files...
    ✔ Successfully wrote file `./web/src/components/Article/Article.test.tsx`
    ✔ Successfully wrote file `./web/src/components/Article/Article.stories.tsx`
    ✔ Successfully wrote file `./web/src/components/Article/Article.tsx`

Cell 对应 Services

yarn rw g component Test   
 
✔ Generating component files...
    ✔ Successfully wrote file `./web/src/components/Test/Test.test.tsx`
    ✔ Successfully wrote file `./web/src/components/Test/Test.stories.tsx`
    ✔ Successfully wrote file `./web/src/components/Test/Test.tsx`

Component 对应 Views

 yarn rw g page Test
 
  ✔ Generating page files...
    ✔ Successfully wrote file `./web/src/pages/TestPage/TestPage.stories.tsx`
    ✔ Successfully wrote file `./web/src/pages/TestPage/TestPage.test.tsx`
    ✔ Successfully wrote file `./web/src/pages/TestPage/TestPage.tsx`
  ✔ Updating routes file...