How to handle pagination?

[antoniojps]

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]

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]

How do we re-fetch data with different variables?

Besides the trigger option for automatically refetch, you can alse use reFetch method :-)

[antoniojps]

@int64ago Thanks, still getting used to the trigger paradigm regarding useEffect, but it makes sense.