在与 MongoDB API后端接口连接的 NextJS 应用程序中-通过 GraphQL 管理,我正在尝试实现 Apollo fetchMore
功能,以便更新负责从数据收集中加载更多项目的组件。
在页面渲染中,组件本身显示了一个10个元素的“图库”作为其本机功能,并通过GraphQL开始查询进行填充。然后,我添加了一个“加载更多”按钮来触发fetchMore
函数。 UX期望,如果用户单击适当的按钮,除前10个元素外,还将加载更多10个元素-基本上是经典的异步无限加载示例。
通过检查应用程序,我注意到两个查询都已成功返回-初始化一项和同样由fetchMore
管理的“加载更多10个项目”-但是后者在执行后会触发组件的更新它是使用入门查询而不是fetchMore
重新初始化的。
进行澄清:单击“加载更多”,而不是查看接下来加载的10个画廊元素-因此最终总共显示20个-组件刷新并显示启动器10个元素,如其启动初始化-完全忽略fetchMore
操作,即使该操作正在被调用,执行并以填充的200响应返回。
因为这是我第一次使用它,所以我不知道我的实现中是否缺少某些内容,或者我需要修复某些内容。无论如何,它就在这里:
由于各种原因,我在父组件中运行查询,然后将数据作为道具传递给子组件:
父母
// Initialization, etc.
[...]
const {loading: loadingIndex, error: errorIndex, data: dataIndex, fetchMore: fetchMoreIndex} = useQuery(ARTICLE_QUERY.articles.indexArticles, {
// Last 30 days
variables: {
live: live,
limit: 10
}
});
// Exception check
if (errorIndex) {
return <ErrorDb error={errorIndex} />
}
// DB fetching check
if (loadingIndex) {
return (
<section className="index-articles">
<h6>Index - Articles</h6>
<aside className="articles__loading">
<h6>Loading</h6>
</aside>
</section>
);
}
const articles = dataIndex.queryArticleContents;
return (
<IndexArticles labels={props.labels} articles={articles} fetchMore={fetchMoreIndex} />
);
孩子
// Initialization, etc.
[...]
let limit = 10; // My query hypothetically limiter
const IndexArticles = (props) => {
useEffect(() => {
// This is a getter method responsible to manage the ```fetchMore``` response
getArticles(props.articles, props.fetchMore);
});
return (
<>
// Component sections
[...]
// Load button
{props.fetchMore &&
<button className="articles__load" title={props.labels.index.title} tabIndex={40}>{props.labels.index.cta}</button>
}
</>
);
function getArticles(articles, fetchMore) {
// Yes, I'm using jQuery with React. Just ignore it
$('.articles__load').on('click tap', function(e) {
e.preventDefault();
$(this).addClass('hidden');
$('.articles__loading').removeClass('hidden');
fetchMore({
variables: {
// Cursor is being pointed to the last available element of the current collection
lastLoaded: articles.length,
limit: limit += 10
},
updateQuery: (prev, {fetchMoreResult, ...rest}) => {
$('.articles__loading').addClass('hidden');
$(this).removeClass('hidden');
if (!fetchMoreResult) {
return prev;
}
return {
...fetchMoreResult,
queryArticleContents: [
...prev.queryArticleContents,
...fetchMoreResult.queryArticleContents
]
}
}
});
});
}
任何人都有经验或曾经经历过此案吗?
预先感谢您的帮助
答案 0 :(得分:0)
根据官方社区的建议,查询选项中的notifyOnNetworkStatusChange: true
丢失了我的配置,该选项负责更新组件并追加新数据。
通过这种方式更改代码:
父母
const {
loading: loadingIndex,
error: errorIndex,
data: dataIndex,
// Add networkStatus property too in order to use notifyOnNetworkStatusChange properly
networkStatus: networkStatusIndex
fetchMore: fetchMoreIndex} = useQuery(ARTICLE_QUERY.articles.indexArticles, {
// Last 30 days
variables: {
live: live,
limit: 10
},
// Important for component refreshing with new data
notifyOnNetworkStatusChange: true
});
问题已经解决。