FetchMore : 请求每次执行两次

Question

我正在尝试在评论部分实现分页。

我在网站上的视觉行为正常。当我点击获取更多按钮时，添加了 10 条新评论。

我的问题是请求每次都执行两次。我不知道为什么。第一次使用游标值执行，第二次没有游标值。好像每次fetchMore之后都会执行useQuery hook。

如有任何帮助，我们将不胜感激。谢谢！

分量：

export default ({ event }) => {
  const { data: moreCommentsData, fetchMore } = useQuery(getMoreCommentsQuery, {
    variables: {
      id: event.id,
    },
    fetchPolicy: "cache-and-network",
  });
  const getMoreComments = () => {
    const cursor =
      moreCommentsData.event.comments[
        moreCommentsData.event.comments.length - 1
      ];
    fetchMore({
      variables: {
        id: event.id,
        cursor: cursor.id,
      },
     updateQuery: (prev, { fetchMoreResult, ...rest }) => {
        return {
          ...fetchMoreResult,
          event: {
            ...fetchMoreResult.event,
            comments: [
              ...prev.event.comments,
              ...fetchMoreResult.event.comments,
            ],
            commentCount: fetchMoreResult.event.commentCount,
         },
        };
      },
    });
  };
  return (
    <Container>
      {moreCommentsData &&
      moreCommentsData.event &&
      moreCommentsData.event.comments
        ? moreCommentsData.event.comments.map((c) => c.text + " ")
        : ""}

      <Button content="Load More" basic onClick={() => getMoreComments()} />
    </Container>
  ); 
};

查询：

const getMoreCommentsQuery = gql`
  query($id: ID, $cursor: ID) {
    event(id: $id) {
      id
      comments(cursor: $cursor) {
        id
        text
        author {
          id
          displayName
          photoURL
        }
      }
    }
  }
`;

Answer 1

如果您担心它只会发出一个请求，但每次 useQuery 挂钩中的项目发生变化时，反应组件都会刷新但不会重新呈现。

举个例子，它会在加载更改时刷新组件，让它看起来像是在发送多个请求。

Answer 2

添加

nextFetchPolicy: "cache-first"

useQuery 挂钩可防止在组件重新呈现时进行服务器调用。

这解决了我的问题。

Answer 3

您看到的第二个请求是否只是因为 refetchOnWindowFocus，因为这种情况经常发生...

FetchMore : 请求每次执行两次

FetchMore : Request executed twice every time

apollo

reactjs

graphql

apollo-client