React Apollo 查询返回后调度 Redux 操作

Posted 2023-03-08

【中文标题】React Apollo 查询返回后调度 Redux 操作

【英文标题】：Dispatch Redux action after React Apollo query returns

【发布时间】：2017-12-27 10:30:55

【问题描述】：

我正在使用 React Apollo 来查询我的数据存储中的所有记录，以便我可以在搜索过滤器中创建选择。

我使用的重要数据库模型是Report。

Report 具有 doorType、doorWidth、glass 和 manufacturer 字段。

当前，当查询响应时，我将 allReports 传递给多个通过数组并仅获取唯一项以创建可选列表的哑组件，就像这样..

const uniqueItems = []

items.map(i => 
  const current = i[itemType]

  if (typeof current === 'object') 
    if (uniqueItems.filter(o => o.id !== current.id)) 
      return uniqueItems.push(current)
    
   else if (!uniqueItems.includes(current)) 
    return uniqueItems.push(current)
  

  return
)

显然这段代码并不漂亮，而且有点矫枉过正。

当查询在我的SidebarFilter 组件中返回时，我想调度一个操作。这是查询...

const withData = graphql(REPORT_FILTER_QUERY, 
  options: ( isPublished ) => (
    variables:  isPublished 
  )
)

const mapStateToProps = (
  reportFilter:  isPublished 
  // filterOptions:  doorWidths 
) => (
  isAssessment
  // doorWidths
)

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    
      resetFilter,
      saveFilter,
      setDoorWidths,
      handleDoorWidthSelect
    ,
    dispatch
  )

export default compose(connect(mapStateToProps, mapDispatchToProps), withData)(
  Filter
)

Redux 操作 setDoorWidths 基本上在 SidebarFilter 组件中执行上述代码，但它保存在存储中，因此如果用户返回页面，我不需要重新运行查询。

数据会更新并且侧边栏需要更改的情况非常罕见。

希望有一个使用props 参数到graphql 函数的解决方案。我觉得可以从ownProps 获取数据，然后可以在此处调度一个操作，但数据可能会出错或正在加载，这会破坏渲染。

编辑：

查询：

query ($isPublished: Boolean!)
  allReports(filter:
    isPublished: $isPublished
  ) 
  id
  oldId
  dbrw
  core
  manufacturer 
    id
    name
  
  doorWidth
  doorType
  glass
  testBy
  testDate
  testId
  isAssessment
  file 
    url
  
  

【参考方案1】：

虽然这个答案解决了问题的具体问题，但更一般的问题——根据查询结果在哪里调度 Redux 操作——仍然不清楚。到目前为止，这里似乎还没有最佳实践。

【参考方案2】：

在我看来，由于 Apollo 已经为您将查询结果缓存在您的商店（或单独的商店，如果您没有集成它们），因此调度一个也只存储查询结果的操作将是多余的您商店中的数据。

如果我正确理解了您的问题，您的意图是只过滤一次传入的数据，然后将结果作为道具发送给组件的无状态子级。您在 graphql HOC 的配置中使用 props 属性是正确的。为什么不这样做：

const mapDataToProps = ( data =  ) => 
  const items = data
  const uniqueItems = []

  // insert your logic for filtering the data here

  return  uniqueItems  // or whatever you want the prop to be called


const withData = graphql(REPORT_FILTER_QUERY, 
  options: ( isPublished ) => (
    variables:  isPublished 
  ),
  props: mapDataToProps,
)

以上内容可能需要根据data 的实际结构进行修改。 datahas some handy props on it 可以让您检查查询是否正在加载（data.loading）或有错误（data.error）。上面的示例已经防止向您的孩子发送未定义的道具，但如果您愿意，您可以轻松地将这些属性合并到您的逻辑中。

【讨论】：

谢谢你 - 我已经用原始查询更新了我的帖子，但我无法尝试你的解决方案，直到我稍后进入我的机器。

我更新了示例，只使用数据的默认值。如果您仍然无法获得预期的行为，请告诉我。