ReactQuery does not always mark data as changed when refetching

Issue

I am currently trying to use react-query to fetch data for use in a react-table. This is what i currently have, i omitted the table stuff for simplicity:

const { data, refetch } = useQuery(['users'], api.user.getAll);

useEffect(() => {
    console.log('data changed')
}, [data]);   

// this triggers 'data changed'
const createUser = useMutation((user: IUser) => api.user.create(user), {
    onSuccess: () => {
        refetch();
        console.log('refetched')
    },
});

// this does not
const updateUser = useMutation((user: IUser) => api.user.update(user), {
    onSuccess: () => {
        refetch();
        console.log('refetched')
    },
});
    
const onCreateClick = () => {
    const newUser: IUser = {
        id: 0,
        userName: 'test',
        email: 'test@mail.de'
    }
    createUser.mutate(newUser);
};

const onEditClick = (user: IUser) => {
    user.userName = 'New Name'
    updateUser.mutate(user);
};

console.log(data)

// ... render to table

When adding (or removing) a user everything works as expected. However when i update the data of an existing user the useEffect hook that tracks if data changed does not trigger (and for the same reason the react-table does not show the updated values).

The data does get fetched as expected in both cases and the console.log at the end does log the array with the updated values. It almost seems like the data field returned by useQuery does not get marked as changed for arrays if its length doesn't change.

I don't understand this, since this is new data that got fetched from an api and thus should always get treated as changed.

I am using axios under the hood to do the fetching if that is relevant.

What am i doing wrong, any ideas?

Solution

I found the issue:

user.userName = 'New Name'

This was a reference to a user inside of data. Never edit the values in data returned by useQuery in place. By doing this the newly fetched data did match the existing one and thus useQuery did not mark it as changed.

Answered By - Eric