时间戳

首页 > 解决方案 > 如何通过仅反应一次来增强 apollo 客户端的响应

reactjs - 如何通过仅反应一次来增强 apollo 客户端的响应

问题描述

我做了一个 GraphQL 查询，在那里我得到了很多数据，然后我计算了最小值和最大值。由于计算非常耗时，我只想在收到值时才进行。不幸的props是，即使没有新的调用，每次重新渲染组件时都会调用该方法，并且数据来自存储。如何将计算限制在我真正获得新数据的点

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

标签： reactjsapolloreact-apolloapollo-client

解决方案

这个问题类似于redux中的问题，mapStateToProps()每次 store 更新重复代价高昂的计算时都会再次调用。

您可以通过使用记忆选择器来解决这个问题：

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

记忆选择器会记住调用的最后结果，并在后续调用中不断返回，只要输入没有改变。

推荐阅读