keep scroll when use useQuery

[foreverchoi0706]

When fetching data using useQuery, the browser scroll automatically goes up to the top. Is there a way to keep this scroll?

it my code

import React, { useState, useEffect, useCallback, memo } from "react";
import { Outlet } from "react-router-dom";
import { useQuery } from "react-query";

const ModalContents = memo(() => {
  console.log("ModalContents");

  const { data, remove } = useQuery(
    ["test"],
    () =>
      fetch("https://api.github.com/repos/tannerlinsley/react-query").then(
        (res) => res.json()
      ),
    {
      enabled: true,
      refetchOnWindowFocus: false,
      cacheTime: Infinity,
      staleTime: Infinity,
      onError: () => {
        console.log("onError");
      },
      onSuccess: () => {
        console.log("onSuccess");
      },
      onSettled: () => {
        console.log("onSettled");
      },
    }
  );

  useEffect(() => {
    return () => {
      remove();
    };
  }, []);

  return <div>{data && JSON.stringify(data.id)}</div>;
});

const Detail = () => {
  const [isOpen, setIsOpen] = useState<boolean>();

  const handleClick = useCallback(() => {
    setIsOpen(!isOpen);
  }, [isOpen]);

  return (
    <>
      <h1 className="TOP">TOP</h1>
      <Outlet />
      <div
        style={{
          height: "2500px",
          backgroundColor: "skyblue",
        }}
      ></div>
      {isOpen && <ModalContents />}
      <button onClick={handleClick}>OPEN</button>
    </>
  );
};

export default Detail;

[TkDodo]

scroll restoration should work, have a look here: https://react-query.tanstack.com/guides/scroll-restoration

it also seems to not work so well with codesandbox, as described in this issue:

• Scroll Restoration is not working even on the doc's examples #1629

FYI, react-query is not doing anything specific for scroll restoration. It's just that the browser should handle it because the data can be rendered synchronously, as we can retrieve it from the cache: https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

[layrayson]

@foreverchoi0706 I encountered a similar issue where the culprit was the line of code params.setQueryParams(obj), even when 'obj' was an empty object. The bug was because React interpreted this operation as an attempt to modify the React Router, subsequently triggering an unwanted scroll behaviour. I found a solution by simply removing the mentioned line of code.