Saving Scroll Position with React Query on Route Change

Demonstrate how to capture and save the current scroll position of a page using React Query's cache when the user navigates to a different route.

import { useQueryClient } from 'react-query';
import { useHistory } from 'react-router-dom';

Imports necessary hooks from react-query and react-router-dom.

const useSaveScrollPosition = (key) => {
  const queryClient = useQueryClient();
  const history = useHistory();

  useEffect(() => {
    const saveScrollPosition = () => {
      const scrollPosition = window.scrollY;
      // Saving the scroll position to the React Query's cache
      queryClient.setQueryData(key, scrollPosition);
    };

    // Saving the scroll position before route changes
    history.listen(saveScrollPosition);

    return () => {
      // Cleanup listener
      history.listen().unlisten(saveScrollPosition);
    };
  }, [key, queryClient, history]);
};

Defines a custom hook to save the scroll position using React Query's cache when the route changes.

const useRestoreScrollPosition = (key) => {
  const queryClient = useQueryClient();

  useEffect(() => {
    const scrollPosition = queryClient.getQueryData(key);
    if (scrollPosition) {
      // Restoring the scroll position from the React Query's cache
      window.scrollTo(0, scrollPosition);
    }
  }, [key, queryClient]);
};

Defines a custom hook to restore the scroll position using the saved position from React Query's cache when a component mounts.

useSaveScrollPosition('unique-key-for-route');
useRestoreScrollPosition('unique-key-for-route');

Usage of the custom hooks within a component to save and restore scroll position on that particular route. Note: Replace 'unique-key-for-route' with a key specific to your route.