Question

我进行了GraphQL查询，在其中我获取了很多数据，然后计算了最小值和最大值。由于计算非常耗时，因此我只想在收到值时才进行计算。不幸的是，props方法在每次重新呈现组件时都被调用，即使没有新的调用，并且数据都来自存储。如何将计算限制在真正获得新数据的点上

graphql(DataQuery, {
    options: ({ id }) => ({
        variables: {
            id,
        },
    }),
    props: ({ data: { result} }) => ({
        data: result,
        min: getMin(result),
        max: getMax(result),
    }),
})

Answer 1

此问题与the problem in redux类似，其中每次商店更新重复重复的昂贵计算时，都会再次调用mapStateToProps()。

您可以使用memorized selectors解决此问题：

import { createSelector } from 'reselect'

const getMinMax = createSelector(
  result => result,
  result => ({
      min: getMin(result),
      max: getMax(result),
  })
)

graphql(DataQuery, {
    options: ({ id }) => ({
        variables: {
            id,
        },
    }),
    props: ({ data: {result} }) => ({
        data: result,
        ...getMinMax(result), // will only re-calculate if result changed
    }),
})

记住的选择器会记住一次呼叫的最后结果，并在后续输入中保持不变，只要输入内容不变。

如何仅响应一次来增强apollo客户端的响应

1 个答案: