Cancel the Reload on Refetch

[Peepersoak]

Hi,

Not sure if this is intentional but every time I use the refetch method my component or the page itself reloads for some reason. can't find any information on how to disable this. Only found two options for refetch which are the throw error and cancel refetch. I'm also pretty sure that it really reloads since all of my component states go back to their initial state.

Heres my flow:
I have a component that basically adds new data to the database and when I receive the 200 status I call the refetch method to get the latest data from my database.

The refetch method is inside a context and I use useContext to get it on my component

Saving Part

const saveData = (e) => {
    e.preventDefault();
    <... save to data base>;
    if (status == 200) onSuccess();
    return;
}

When saving is successful call the refetch method

const onSuccess = () => {
    <... do other component update>
    refetch();
}

The context file

const UserStore = (props) => {
  const { data, isError, isLoading, isFetching, refetch } = useQuery(
    ["userData"],
    fetchData,
  );
  const userData = {
    data,
    isError,
    isLoading,
    isFetching,
    refetch,
  };
  return (
    <UserContext.Provider value={userData}>
      {props.children}
    </UserContext.Provider>
  );
};

My goal is that to refetch the data without reloading the page. Right now my fix is to not use the useQuery at all and just use a regular fetch API

[TkDodo]

Not sure if this is intentional but every time I use the refetch method my component or the page itself reloads for some reason.

most certainly not on purpose, and I've never seen a behaviour like this produced by react-query. Must be something else :)

I would be surprised if you could reproduce this issue in isolation, but I'll take a look if you can :)

[Peepersoak]

Yep, you were right, finally figured it out.

My problem was that I actually stored the context data on the parent element and did the props drilling, thinking that with this I only need the parent element to control all data and just pass it to its child but when I call refetch on the child element it causes the context data to change its value, therefore, making the parent element rerender which then reset all of its child states (AFAIK).

Refactor the code and remove the props drilling and now it works and correctly refetch the data.

Thank you