如何使用支持分頁的獲取 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 頁面是否存在是很困難的。