onSuccess not trigeered when useQuery has staleTime

[jainishan2323]

I have a Form component whose initial data I am setting like so:

 const EditProfileForm: React.FC = ({ section }) => {

    const [state, dispatch] = useReducer(
        updateProfileReducer,
        PROFILE_INITIAL_STATE,
    );

    const setInitalState = (getApiData: GetUserDetailsQueryResp) => {
        dispatch(
            updateProfileAction({
                data: getApiData.getUserDetails,
                reset: getApiData.getUserDetails,
            }),
        );
    };

   const { data, isLoading } = useGetUserDetailsQuery(setInitalState);
    
   const onChange = (formData) => {
    // update the state by dispatching the data
  }

   return // My component;
}

The useGetUserDetailsQuery has a staleTime set for 1 hour. The stale time is used since, its a User data. The user query is used at multiple places in App and I don't want to use to fetch it from the server again and again.

The problem is the onSuccess callback doesn't trigger when query has staleTime, thus not setting my initialState.

Any way to avoid this problem (without using useEffect) ?

the query function for reference:

export const useGetUserDetailsQuery = (
    onSuccess?: (stateData: GetUserDetailsQueryResp) => void,
): UseQueryResult<GetUserDetailsQueryResp, ErrorResponse> => {
    return useGraphqlQuery('get-user-details', GET_USER_DETAILS, {
        staleTime: 600000,
        onSuccess: onSuccess,
    });
};

[TkDodo]

The problem is the onSuccess callback doesn't trigger when query has staleTime, thus not setting my initialState.
Any way to avoid this problem (without using useEffect) ?

my suggestion would be to keep server and client state separate, thus not syncing the initial state to the local state. But its usually a bigger refactoring if you do it that way already.

useEffect is indeed the preferred solution for the problem. onSuccess is tied to a network request, just like onError. data returned from useQuery is referentially stable, so all you need is:

useEffect(() => {
  if (data) {
    dispatch(...)
  }
}, [data]

we've discussed this to some extent:

• Event when receiving stale data? #3000
• onDataChanged callback #2911
• changes to onSuccess callback #2964