Как улучшить реакцию в клиенте apollo с помощью реакции только один раз
Я делаю запрос GraphQL, в котором я получаю много данных и затем вычисляю минимальные и максимальные значения. Поскольку расчет занимает довольно много времени, я хотел бы делать это только после получения значения. К сожалению, метод props вызывается каждый раз при повторной визуализации компонента, даже если не было нового вызова, а данные поступают из хранилища. Как я могу ограничить расчет точками, в которых я действительно получаю новые данные
graphql(DataQuery, {
options: ({ id }) => ({
variables: {
id,
},
}),
props: ({ data: { result} }) => ({
data: result,
min: getMin(result),
max: getMax(result),
}),
})
Ответы 1
Эта проблема аналогична проблема в редукции, где mapStateToProps() будет вызываться снова каждый раз, когда магазин обновляет повторяющиеся дорогостоящие вычисления.
Вы можете решить эту проблему, используя запомненные селекторы:
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
}),
})
Запомненные селекторы запоминают последний результат вызова и продолжают возвращать его при последующих вызовах, пока ввод не изменится.