score:4

Accepted answer

if the api does not limit the page size, you could just provide an arbitrarily large number as the page size to get the remaining results. assuming the page size can only be so big, though, you can do something like this:

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
  }
}

by setting notifyonnetworkstatuschange to true, loading will be updated whenever fetchmore is doing any fetching. then we just loop until hasnextpage is called. fetchmore returns a promise that resolves to the query result, so we can use the query response outside the updatequery function.

note that this is a rough example -- you might actually want to keep track of loading state yourself, for example. if your api has rate limiting, your logic should account for that as well. however hopefully this gives you a good starting point.

edit:

if you need to get all the articles initially, i wouldn't use usequery and fetchmore at all. the easiest workaround would be to manage the data and loading state yourself and utilize client.query instead.

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()
}, [])

Related Query

More Query from same tag