RedwoodJS 中的 Cells 组件：声明式数据获取详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01157/article/details/148375162

RedwoodJS 中的 Cells 组件：声明式数据获取详解

redwood The App Framework for Startups 项目地址: https://gitcode.com/gh_mirrors/re/redwood

什么是 Cells

Cells 是 RedwoodJS 框架中一种声明式的数据获取方式，也是该框架最具特色的抽象模式之一。它通过约定优于配置的方式简化了数据获取流程，让开发者可以专注于 UI 展示而无需编写大量样板代码。

Cells 的核心思想是：通过导出一组命名常量来声明数据加载不同阶段（加载中、空状态、错误状态、成功状态）的 UI 展示方式，Redwood 会在构建时自动将这些声明组装成一个完整的组件模板。

Cells 的核心优势

声明式编程：开发者只需关注"应该显示什么"，而不必关心"如何显示"
生命周期管理：自动处理数据加载的各种状态（加载中、成功、失败等）
性能优化：内置缓存策略和查询优化
开发体验：自动生成测试和 Storybook 故事文件

创建 Cells

使用 Redwood 的生成器命令可以快速创建 Cell：

yarn rw generate cell <名称>

生成器会根据名称的单复数形式自动判断是创建单个项目 Cell 还是列表 Cell。对于单复数同形的单词，可以使用 --list 参数明确指定生成列表 Cell：

yarn rw generate cell equipment --list

Cells 文件结构

生成的 Cell 包含以下文件：

<名称>Cell.js：Cell 主文件
<名称>Cell.test.js：包含各状态测试的 Jest 测试文件
<名称>Cell.stories.js：Storybook 故事文件
<名称>Cell.mock.js：测试和 Storybook 使用的模拟数据

Cells 生命周期详解

Cell 主要包含以下可导出常量：

1. QUERY (必需)

定义要执行的 GraphQL 查询。可以是字符串或返回 GraphQL 文档的函数。Redwood 会自动将组件接收的 props 作为查询变量。

export const QUERY = gql`
  query($limit: Int!) {
    posts(limit: $limit) {
      id
      title
    }
  }
`

2. beforeQuery (可选)

查询前的生命周期钩子，用于配置 Apollo Client 的 useQuery 选项。默认行为是将组件 props 作为查询变量。

export const beforeQuery = (props) => {
  return {
    variables: props,
    fetchPolicy: 'cache-and-network'
  }
}

3. isEmpty (可选)

判断数据是否为空的钩子函数。默认检查数据是否为 null 或空数组。

export const isEmpty = (data, { isDataEmpty }) => {
  return isDataEmpty(data) || data?.posts?.length === 0
}

4. afterQuery (可选)

查询后的数据处理钩子，用于在数据传递给 Success 组件前进行清洗或转换。

export const afterQuery = (data) => {
  // 对数据进行处理
  return processedData
}

5. Loading (可选)

加载中状态组件。当数据正在获取且没有缓存时显示。

export const Loading = () => <div>加载中...</div>

6. Empty (可选)

空数据状态组件。当返回数据为 null 或空数组时显示。

export const Empty = () => <div>暂无数据</div>

7. Failure (可选)

错误状态组件。当查询出错时显示。

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

8. Success (必需)

成功状态组件。接收查询返回的数据进行渲染。

export const Success = ({ posts }) => {
  return posts.map(post => (
    <article key={post.id}>
      <h2>{post.title}</h2>
      <p>{post.body}</p>
    </article>
  ))
}

Cells 使用场景

Cells 适用于任何需要获取数据的场景，特别是：

需要处理多种加载状态的组件
需要缓存策略的数据查询
需要统一错误处理的场景
需要快速原型开发的场景

Cells 高级用法

在 Cell 中执行 Mutation

虽然 Cells 主要用于数据查询，但也可以在 Cell 中执行数据变更操作。这不是反模式，而是 Redwood 的推荐做法。

export const Success = ({ posts, updatePost }) => {
  const [update] = useMutation(UPDATE_POST_MUTATION)
  
  const handleUpdate = (id, newData) => {
    update({ variables: { id, input: newData } })
  }

  return (
    // 渲染逻辑
  )
}