在与 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
          ]
        }
      }
    });
  });
}

任何人都有经验或曾经经历过此案吗？

预先感谢您的帮助