Question

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

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

预先感谢您的帮助

Answer 1

根据官方社区的建议，查询选项中的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 
  });

问题已经解决。

Apollo客户端-fetchMore组件更新问题

1 个答案: