score:4
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()
}, [])
Source: stackoverflow.com
Related Query
- Using fetchMore to fetch ALL data on component mount
- React component not re-rendering on URL parameter change when using useEffect hook to fetch data
- Using getDerivedStateFromProps to fetch API data is causing the component to render many times
- Trying to fetch axios data with redux, and load it in a component using useEffect
- React Component using codemirror not sending all data on form submission
- Cannot fetch data from an API using componentDidMount: Can't call setState (or forceUpdate) on an unmounted component
- Get data for react-excel-workbook component using fetch
- Component did mount set state before fetch data
- How to fetch data from all documents in a subcollection in firebase firestore using React?
- How to reload page once state or data is changed within a react class using component did mount
- how to fetch all the data pushed using history.push in react
- How to fetch data when a React component prop changes?
- Testing a component that uses useEffect using Enzyme shallow and not mount
- How to fetch data only once in a Next.js app and make it accesible to all the app, both in server and client
- React.js - using property initializers for all component methods
- Next.js Fetch and Maintain global data for all components
- Using useEffect() Hook and Async/Await to Fetch Data from Firebase/Firestore
- React - load all data from json into component
- Should i fetch data in react component or redux action?
- Reactjs: How to fetch data to loaded before the component is mounted?
- Right way to fetch data with react using socket.io
- Using fetch to render json data in react app
- Load the component when all data has ready
- How to send POST data to flask using Reactjs fetch
- Fetch data in parallel using Redux Saga
- React Native Sqlite fetch all data in Listview
- Should the parent or child component fetch data in React?
- React Hook useEffect : fetch data using axios with async await .api calling continuous the same api
- What's the recommended place to fetch user data using Redux when app starts?
- Avoid old data when using useEffect to fetch data
More Query from same tag
- Checkboxes not checking in React drop down menu?
- How to get all documents and its count with mongoose
- React (Lists and Keys) mapping appends old items to new items on re render
- How to display html code from a json data in my react js page?
- React.memo reset state to previous
- How do I create an overlay in React?
- How toggle fillColor from a selected polygon?
- Getting the value of a selected option in Antd AutoComplete with custom renderer
- React setTimeout and clearTimeout
- How to toggle in a map function in React?
- How to customize Syncfusion React Scheduler component?
- State React JS Array Issue
- Component doesn't render properly
- React JS - Passing functions for child components
- Vimeo API with ReactJS and Plyr
- issues with fetching Json in react
- React tic tac toe - Show when a draw has happened
- ReactJS rendering a component in a specific DIV element
- ReactJS Convert json to [name: value:] pair
- How to memoize a value based on a property of an object in React?
- Show alert based on each condition
- react router get props in parent
- How to pass a function from outside of main component using react-redux's Provider
- How to define props interface with passed state/setState values?
- FineUploader not working after first upload
- React-chartjs-2: How to display timeline of released dates over 5 past years in Bar Chart?
- React to pull SQL data from server
- TypeError: null is not an object (evaluating 'daysData.map') - Trying to map over array of objects
- React.js passing one components variables to another component and vice-versa
- react-select: how to keep dropdown open when styling in inspector?