使用 fetchMore 获取组件挂载的所有数据

Question

我有一种情况需要获取，例如安装组件时用户发布的所有文章。要获取用户的文章，我使用以下查询：

const GET_USER_ARTICLES = gql`
    query getUserArticles($id: ID, $numArticles: Int!, $cursor: String) {
        user(id: $id) {
            id
            articles(first: $numArticles, after: $cursor, orderBy: "-created", state: "enabled") @connection(key: "userArticles") {
                edges {
                    node {
                        name
                    }
                }
                pageInfo {
                    endCursor
                    hasNextPage
                }
            }
        }
    }
`;

如果有下一页，我想继续获取更多文章，直到我拥有所有文章。到目前为止，我还没有需要做这样的事情（通常我有一个按钮，用户可以点击“加载更多”来获取更多文章，但现在需要在没有用户与任何东西交互的情况下获取所有内容），所以我不确定最好的方法是什么。

React 中的查询示例：

const PAGE_SIZE = 10;

const { data, loading, fetchMore } = useQuery<UserArticlesData, UserArticlesVariables>(
    GET_USER_ARTICLES,
    { variables: { id: userId, numArticles: PAGE_SIZE, cursor: null } },
);

我有点迷失如何使用fetchMore 继续获取直到没有更多页面，同时还向用户显示加载状态。我也不确定这是否是解决此问题的最佳方式，因此欢迎提出任何建议！

Answer 1

如果 API 不限制页面大小，您可以提供一个任意大的数字作为页面大小来获得剩余的结果。但是，假设页面大小只能这么大，您可以执行以下操作：

const { data, loading, fetchMore } = useQuery(GET_USER_ARTICLES, {
  variables: { id: userId, numArticles: PAGE_SIZE, cursor: null },
  notifyOnNetworkStatusChange: true,
})
const fetchRest = async () => {
  const { user: { articles: { pageInfo } } } = data
  const updateQuery = (prev, { fetchMoreResult }) => {
    // Merge the fetchMoreResult and return the combined result
  }

  let hasNextPage = pageInfo.hasNextPage
  let cursor = pageInfo. endCursor

  while (hasNextPage) {
    const { data } = await fetchMore({
      variables: { id: userId, numArticles: PAGE_SIZE, cursor },
      updateQuery,
    })
    const { user: { articles: { pageInfo } } } = data
    hasNextPage = pageInfo.hasNextPage
    cursor = pageInfo. endCursor
  }
}

通过将notifyOnNetworkStatusChange 设置为true，loading 将在fetchMore 进行任何获取时更新。然后我们循环直到调用hasNextPage。 fetchMore 返回一个解析为查询结果的 Promise，因此我们可以在 updateQuery 函数之外使用查询响应。

请注意，这是一个粗略的示例——例如，您实际上可能希望自己跟踪加载状态。如果你的 API 有速率限制，你的逻辑也应该考虑到这一点。不过，希望这可以为您提供一个良好的起点。

编辑：

如果您最初需要获取所有文章，我根本不会使用useQuery 和fetchMore。最简单的解决方法是自己管理数据和加载状态，并改用client.query。

const client = useApolloClient()
const [data, setData] = useState()
const [loading, setLoading] = useState(true)
const fetchAll = async () => {
  let hasNextPage = true
  let cursor = null
  let allResults = null

  while (hasNextPage) {
    const { data } = await client.query(GET_USER_ARTICLES, {
      variables: { id: userId, numArticles: PAGE_SIZE, cursor },
    })

    // merge data with allResults

    hasNextPage = pageInfo.hasNextPage
    cursor = pageInfo. endCursor
  }
  setLoading(false)
  setData(allResults)
}

useEffect(() => {
  fetchAll()
}, [])