无限滚动获取

时间:2018-09-24 15:58:37

标签: javascript graphql apollo

const MoreCommentsQuery = gql`
  query MoreComments($cursor: String) {
    moreComments(cursor: $cursor) {
      cursor
      comments {
        author
        text
      }
    }
  }
`;

const CommentsWithData = () => (
  <Query query={CommentsQuery}>
    {({ data: { comments, cursor }, loading, fetchMore }) => (
      <Comments
        entries={comments || []}
        onLoadMore={() =>
          fetchMore({
            // note this is a different query than the one used in the
            // Query component
            query: MoreCommentsQuery,
            variables: { cursor: cursor },
            updateQuery: (previousResult, { fetchMoreResult }) => {
              const previousEntry = previousResult.entry;
              const newComments = fetchMoreResult.moreComments.comments;
              const newCursor = fetchMoreResult.moreComments.cursor;

              return {
                // By returning `cursor` here, we update the `fetchMore` function
                // to the new cursor.
                cursor: newCursor,
                entry: {
                  // Put the new comments in the front of the list
                  comments: [...newComments, ...previousEntry.comments]
                }
              };
            }
          })
        }
      />
    )}
  </Query>
);

这是从文档中获取的,因此我无法显示注释查询的代码,但是在执行CommentsQuery时,此游标从何而来,是从字面上返回返回的参数,还是游标字段必须存在更多评论查询?

0 个答案:

没有答案