我正在执行GraphQL查询以将数据加载到我的Material UI表中。我希望它在滚动时加载更多数据。
数据已正确填充到表中,分页内容无法正常工作。
return (
<Query
query={MESSAGE_QUERY}
variables={{
where: getQueryVariables({
date,
}),
limit: 50,
offset: 0,
sortingOrder,
}}
fetchPolicy="cache-and-network"
>
{({ data, fetchMore }: QueryResult) => {
fetchMore({
variables: {
offset: data.message
? data.message.length
: 0,
},
updateQuery: (
prevResult: { DataRowProps: any },
{ fetchMoreResult }: any,
) => {
if (!fetchMoreResult) return prevResult;
return Object.assign({}, prevResult, {
...fetchMoreResult.DataRowProps,
});
},
});
return data.message
? data.message.map(
(rowData: DataRowProps, index: number) => {
return containmentDOMRect ? (
<VisibilitySensor
containment={containmentDOMRect.current || undefined}
onChange={isVisible =>
isVisible && index % LOAD_SIZE === 0 && index >= LOAD_SIZE
? loadMoreData(index)
: undefined
}
>
<DataRowComponent
{...rowData}
index={index}
selectedRow={selectedRow}
callBack={callBack}
/>
</VisibilitySensor>
) : null;
},
)
: null;
}}
</Query>
);
};
在运行代码时我没有看到任何错误,但是它并没有滚动加载更多数据。我已删除了一些不重要的代码,因为堆栈溢出限制,请告知是否需要提供。非常感谢您的帮助。
答案 0 :(得分:0)
使用fecthMore和更新查询功能的正确方法是在VisibilitySensor标记内:
{({ data, fetchMore }: QueryResult) => {
return data.vitm_truck_message
? data.vitm_truck_message.map(
(rowData: DataRowProps, index: number) => {
const visibilitySensorKey = rowData.message_type.name
.concat(rowData.message_sub_type.name)
.concat(rowData.created_time);
return containmentDOMRect ? (
<VisibilitySensor
key={visibilitySensorKey}
containment={containmentDOMRect.current || undefined}
scrollCheck
onChange={isVisible =>
isVisible && index % LOAD_SIZE === 0 && index >= LOAD_SIZE
? fetchMore({
variables: {
offset: data.vitm_truck_message
? data.vitm_truck_message.length
: 0,
},
updateQuery: (
prev: any,
{ fetchMoreResult }: any,
) => {
if (
fetchMoreResult.vitm_truck_message.length !== 0
) {
offsetValue = data.vitm_truck_message.length;
prev.vitm_truck_message.forEach(
(element: object) => {
if (
data.vitm_truck_message.indexOf(element) <
0
) {
data.vitm_truck_message.push(element);
}
},
);
fetchMoreResult.vitm_truck_message.forEach(
(element: object) => {
if (
data.vitm_truck_message.indexOf(element) <
0
) {
data.vitm_truck_message.push(element);
}
},
);
}
return prev;
},
})
: undefined
}
>
<DataRowComponent
{...rowData}
index={index}
selectedRow={selectedRow}
callBack={callBack}
/>
</VisibilitySensor>
) : null;
},
)
: null;
}}