How to handle pagination?
antoniojps opened this issue · 3 comments
antoniojps commented
This might be a very dumb question but here it goes.
How does pagination work with this hook, for example in apollo the useQuery returns a fetchMore function which we get the previous data and pass in the new params to fetch and handle pagination easily.
How do we re-fetch data with different variables?
How do we handle pagination?
int64ago commented
Short answer: use trigger
option.
Here's an example which may help you:
const limit = 20;
const [current, setCurrent] = useState(1);
const { response, loading, error } = useAxios({
url: '...',
method: 'GET',
options: {
params: {
limit,
offset: (current - 1) * limit,
}
},
trigger: current,
});
const handlePrev = useCallback(() => {
setCurrent(current - 1);
}, [current]);
const handleNext = useCallback(() => {
setCurrent(current + 1);
}, [current]);
return (
<div>
<button onClick={handlePrev}>Prev</button>
<button onClick={handleNext}>Next</button>
</div>
);
int64ago commented
How do we re-fetch data with different variables?
Besides the trigger
option for automatically refetch, you can alse use reFetch
method :-)
antoniojps commented
@int64ago Thanks, still getting used to the trigger paradigm regarding useEffect, but it makes sense.