reactjs - 如何增强apollo客户端的响应能力并仅响应一次

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
    }),
})

内存选择器会记住调用的最后结果，并且只要输入不更改，就会在后续调用中继续返回该结果。