I am trying to implement pagination in a comment section.
I have normal visual behavior on the website. When I click the get more button, 10 new comments are added.
My problem is the request is executed twice every time. I have no idea why. The first time, it is executed with a cursor value, the second time without it. It seems that the useQuery hook is executed after each fetchMore.
Any help would be appreciated. Thanks!
component :
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> ); }; query :
const getMoreCommentsQuery = gql` query($id: ID, $cursor: ID) { event(id: $id) { id comments(cursor: $cursor) { id text author { id displayName photoURL } } } } `; https://stackoverflow.com/questions/66441463/fetchmore-request-executed-twice-every-time March 02, 2021 at 10:38PM
没有评论:
发表评论