如何使用支持分页的获取 api 从反应中编写 graphQL 查询？

Question

信息：

• 我正在使用基于石墨烯-Django 的支持
• 使用基于中继节点的查询

我可以执行的任务：

• 在 react 中使用 fetch API 编写基于 REST 的 CRUD 操作。
• 涉及从服务器获取列表或单个项目的简单 GraphQL 查询。
• 能够在 GraphiQL 上编写 GraphQL 查询

想做以下事情：

• 使用分页从服务器获取项目列表，该列表获取 10 个项目和 go 的选项到第一页、最后一页、上一页和下一页。
• 几个例子会有所帮助

Answer 1

通过查看各种文档、博客和我目前的要求来解决：

const Post = (props) => {
  const [isLoading, setLoading] = useState(true);
  const [posts, setPosts] = useState([])
  const [offset, setOffset] = useState(0)
  const [hasPrev, setHasPrev] = useState(false)
  const [hasNext, setHasNext] = useState(false)
  const pageSize = 10

  useEffect(() => {
    const loadData = () => {
      setLoading(true)
      const requestOptions = getGraphqlRequestOptions(pageSize, offset)
      fetch(graphql_url, requestOptions)
        .then(response => {
          setLoading(false)
          return response.json()
        })
        .then(data => {
          setHasNext(data.data.allPosts.pageInfo.hasNextPage)
          setPosts(data.data.allPosts.edges)
          setHasPrev(offset !== 0)
        })
    }
    loadData()
  }, [offset]);

  const handleNextClick = () => {
    setOffset(offset + pageSize)
  };
  const handlePrevClick = () => {
    setOffset(offset - pageSize)
  };
  useEffect(()=> {
    document.title = "MyTitle"
    setOffset(0)
  }, []);

  return (
    <>
      ... code to display table
      <div className="row mb-5">
        <Button 
          variant="outline-primary"
          className="col-1 me-auto"
          disabled={!(hasPrev || isLoading)}
          size="sm" block
          onClick={!isLoading ? handlePrevClick : null}
        >
          {isLoading ?  'Loading...' : 'Previous'}
        </Button>
        <Button 
          className="col-1 ms-auto"
          disabled={!(hasNext || isLoading)}
          onClick={!isLoading ? handleNextClick: null}
          variant="outline-primary" size="sm" block
        >
          {isLoading ?  'Loading...' : 'Next'}
        </Button>
      </div>
    </>
  }

我被卡住了，因为有很多选择并且没有具体的例子来实现它。
例如：

• 我们可以用：
  1. query{allPosts(first:10, after:"last cursor"){pageInfo{hasPrevPage hasNextPage startCursor endCursor} edge{node{...}}}
  2. query{allPosts(first:10, offset:0){}} // currently used
  3. `query {allPosts(first:10, before:'start cursor'
  4. 以上所有查询都使用last:10而不是 first:10 等。
• 除此之外，它返回一个 PageInfo object 具有hasNextPage, hasPrevPage, startCursor, endCursor 。
  • 它提供了难以理解的信息
  • 使用查询 (1) 即带有first和after选项， hasPrevPage始终为false
  • 使用 query(3) 即带有before选项， hasNextPage始终为false
  • 因此需要跟踪 Next 和 Prev 页面是否存在是很困难的。