How to invalidate previous query request data ?

[rohitbelsare]

const [fetchSubmissionOpportunitiesFn, forecastSubmissionOpportunities] =
    useLazyGetForecastSubmissionOpportunitiesQuery();

  useEffect(() => {
    if (!isEmpty(row)) {
      dispatch(
        forecastingApi.util.updateQueryData(
          'getForecastSubmissionOpportunities',
          forecastSubmissionOpportunities.originalArgs,
          draftPosts => {
            draftPosts.results = [];
            draftPosts.stage = stage;
            return draftPosts;
          }
        )
      );
      fetchSubmissionOpportunitiesFn({
        forecastSettingsUuid,
        dashboardViewUuid,
        fromDate: filters?.closeDate?.from,
        toDate: filters?.closeDate?.to,
        stage,
        ...params
      });
    }
  }, [stage]);

`````

This is the most simple thing I am trying to do
I am calling the API every time stage changes.
Before that I want to wipe out the previous data from cache

It does wipe out the data as it shows in Redux devtools

but it is not reflected on React component

What am I doing wrong?

PS: I have went through the Docs/Internet for hours before posting this.

[Dovakeidy]

I think that you are missing some required dependencies in your useEffect ( filters, forecastSubmissionOpportunities, row ... ).Btw you can simplify all of this by using optimistic update directly in your endpoint definition.

I'm not sure of what you truly want, but I also think that you could use the useQuery hook instead of the lazy one and then remove the useEffect.

PS: ( !isEmpty(row) could be the skip option of the useQuery)