Apollo Client - fetchMore 组件更新问题

Question

在我的 NextJS 应用程序中与 MongoDB API back-end 接口 - 通过管理GraphQL，我正在尝试实现 Apollo fetchMore 功能，以便更新负责从数据收集。

在页面呈现时，组件本身显示 "gallery" 10 个元素作为其本机功能，通过 GraphQL 起始查询填充。然后，我添加了一个 "load more" 按钮来触发 fetchMore 函数。 UX 期望如果用户单击正确的按钮，除了之前的 10 个元素之外，还将加载更多 10 个元素 - 基本上是经典的 async-infinite 加载示例。

通过检查应用程序，我注意到两个查询都已成功返回 - 初始化查询和 "load more 10 items" 也由 fetchMore 管理 - 但后者在执行后触发组件的更新是 re-initialized 使用起始查询而不是 fetchMore 查询。

澄清一下：在 "load more" 上单击，而不是查看加载的下 10 个图库元素 - 因此最终显示总共 20 个 - 组件刷新并显示起始的 10 个元素，就像它的开始初始化一样- 完全忽略 fetchMore 操作，即使这个操作正在被调用、执行并以填充的 200 响应接收回来。

因为这是我第一次使用它，所以我不知道我的实现是否遗漏了什么，或者我需要修复什么。不管怎样，就这样吧：

由于各种原因，我运行在 parent 组件中查询，然后我将数据作为道具传递给 child 一个：

Parent

// 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} />
  );

Child

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

有没有人有这方面的经验或以前经历过这种情况？

在此先感谢您的帮助

Answer 1

根据官方社区的提示，我的配置缺少查询选项中的notifyOnNetworkStatusChange: true，它负责更新组件并附加新数据。

通过这样修改代码：

Parent


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

问题已解决

Apollo Client - fetchMore 组件更新问题

Apollo Client - fetchMore component update problem

mongodb

reactjs

graphql

next.js

apollo-client