Why useQuery doesn't trigger onSuccess with cached data?

[jdupont22]

Hi,

Thks for your work!

I'm wondering why useQuery doesn't trigger the onSuccess callback when the data are retrieved from the cache (with staleTime: 20s)?

I use onSuccess callback to update a reducer containing all the UI complexity based on multiple useQuery...

My code:

  // ---------------------------------
  // assets / sub asset
  // ---------------------------------
  const initialAssetsState: AssetsState = { ...defaultPageable, subsAssets: {}};
  const [assetsState, assetsDispatch] = useImmerReducer(assetsReducer, initialAssetsState);

  const { isFetching: isFetchingAsset } = useAssets(accountId, queryParams, {
    enabled: queryParams.viewMode === 'LIST',
    onSuccess: async ({list, totalItems}) => {
      assetsDispatch({
        type: 'list',
        payload: {
          list,
          totalItems
        }
      });
      clearError();
    },
    onError: error => onApiError(error),
  });

  useSubAssets(accountId, assetsState.lastToggleAssetId, { state: 'ACTIVE' }, {
    enabled: !!assetsState.lastToggleAssetId,
    onSuccess: (subsAssets) => {
      assetsDispatch({
        type: 'subs',
        payload: {
          subsAssets
        }
      });
      clearError();
    },
    onError: error => onApiError(error),
  });

export const assetsKey = 'assets';
export function useAssets(accountId: number, args: IGetAllAssets = {}, config: UseQueryOptions<PaginatedAssets> = {}) {
  const queryClient = useQueryClient();
  const {data: paginatedAssets, ...rest} = useQuery<PaginatedAssets>(
    [assetsKey, args],
    async () => {
      ....
      const response = await getAssets(accountId, overrideArgs);
      return extractPaginatedResponse(response);
    },
    {
      ...config,
      staleTime: config.staleTime ?? 20 * 1000,
      onSuccess: async (paginated: PaginatedAssets) => {
        await config.onSuccess?.(paginated)
        for (const asset of paginated?.list) {
          setAssetQueryData(queryClient, asset);
        }
      },
    }
  );

  const data = paginatedAssets ?? emptyPaginatedList;
  return {data, ...rest};
}

[karol-janik]

Yeah, it's good.

StaleTime: The duration until a query transitions from fresh to stale. As long as the query is fresh, data will always be read from the cache only - no network request will happen! If the query is stale (which per default is: instantly), you will still get data from the cache, but a background refetch can happen under certain conditions.

So, React-Query does not invoke the queryFn -> onSuccess callback isn't fire. If you want to fire onSuccess (and make request), you can use refetchInterval or change the CacheTime.

Caching examples

[karol-janik]

What about notifyOnChangeProps property?

For this use-case, React Query has the notifyOnChangeProps option. It can be set on a per-observer level to tell React Query: Please only inform this observer about changes if one of these props change. By setting this option to ['data']

[karol-janik]

Take a look at: https://tkdodo.eu/blog/react-query-render-optimizations :)

[jdupont22]

Thx for the suggestion, i just read the blog post!

I use a hook named "useAssets(...)" that is reuse over all the application with different tracked fields. So the "tracked" mode or select some fields in an array can't do the trick.

Do you think my use case is strange?
Maybe the way i use 'onSuccess' callback to process complex UI?

Do you think a new callback will be relevant, fired when cached data is retrieved without any request to the server (staleTime > 0)?

[karol-janik]

but i don't want to processComplexUIState to every render, only when assets list change

Is this true? assets list change every time when u back to this page?

[karol-janik]

Maybe you should split this complex logic and fetching data? :)

[jdupont22]

It's actually split, the complex logic is process through
const [assetsState, assetsDispatch] = useImmerReducer(assetsReducer, initialAssetsState);

The 'onSuccess' callback just call a specific action on the reducer for this useQuery, an for all others useQuery...

The complex logic must be process when data is load (cache, no cache) for assets (query 1), for sub assets (query 2), for xyz (query 3..N)

[karol-janik]

What about if(data) or if(isFetching)? :)

[jdupont22]

Maybe, i will try that when i will go back to this project, thx for your time!

[TkDodo]

I use onSuccess callback to update a reducer containing all the UI complexity based on multiple useQuery...

It looks like you are "syncing" state from react-query with some other state management, which is generally a suboptimal pattern. I've recently written about this: https://tkdodo.eu/blog/react-query-as-a-state-manager

What you'd usually want to do is just work with the data returned from useQuery and derive everything else that you need from it. Don't store derived state. So basically, what you already stated:

I could use "data" directly from

const {data} = useQuery(...)
processComplexUIState(data)
but i don't want to processComplexUIState to every render, only when assets list change

If you want to avoid calling a function on every render - that's what useMemo is for:

const {data} = useQuery(...)
const complexUiData = React.useMemo(() => processComplexUIState(data), [data])

this will only call the function if data changes, and because react-query uses structural sharing under the hood, this will only be re-calculated if you really get different data from the query.

[jdupont22]

I use a reducer to compute my derive state. The problem with useMemo(() => ..., [dataQuery1, ..., dataQueryN]) is i need to known wich one of the useMemo dependency change to compute my derive state, it's the action "list" and "subs" in the fallowing reducer code. Plus the "toggle" and "refreshSubs" actions update the derive state, so finally, it's more than just derived state!

The "lastToggleAssetId" is more like an UI state, not coming from any useQuery data but it's update on "list", "toggle" and use by "subs" and "refreshSubs" actions.

I can create a separate useState for the UI state, add it to the useMemo(() -> , ...queriesStates, uiState), but with the useMemo, i still need to known with dependency is changing to compute correctly the "derived state"

export type AssetsState = Pageable<IAsset> & {
  lastToggleAssetId?: number;
  subsAssets: { [key: number]: IAsset[]; };
}

type SubAssetType = IAsset & { children?: SubAssetTypes; };
type SubAssetTypes = { [key: string]: SubAssetType };

export const assetsReducer =  (draft: AssetsState, action) => {
  switch (action.type) {
    case 'list': {
      draft.lastToggleAssetId = null;
      draft.list = action.payload.list;
      draft.totalItems = action.payload.totalItems;
      draft.subsAssets = {};
      return;
    }
    case 'subs': {
      const assetId = draft.lastToggleAssetId;
      const subsAssets = action.payload.subsAssets;
      // create the tree from flatten subs assets order by level (all firsts levels, next seconds levels, ...)
      const subAssetsOrder: SubAssetTypes = _.reduce(subsAssets, (acc, sub) => {
        console.info("assetId", assetId);
        console.info("sub", sub);
        if (sub.parentId === assetId) {
          acc[sub.id] = { ...sub, children: {}};
          console.info("1 acc", sub.id, acc[sub.id]);
        } else {
          let ancestor = acc;
          sub.ancestors?.forEach(a => {
            if (a.id === assetId) {
              // do nothing
            } else if (ancestor[a.id]) {
              ancestor = ancestor[a.id].children;
              console.info("2.1 find ancestor", a.id);
            } else {
              ancestor[a.id] = { ...sub, children: {} };
              console.info("2.2 acc", a.id, ancestor[a.id]);
            }
          })
        }
        return acc;
      }, {} as SubAssetTypes);

      console.info("subAssetsOrder", subAssetsOrder);

      // flatten the tree
      const flattenTree = (subsAssets: SubAssetTypes): Array<IAsset> => {
        return _.reduce(Array.from(Object.values(subsAssets)), (accu: Array<IAsset>, subAsset) => {
          accu.push(subAsset);
          return accu.concat(flattenTree(subAsset.children));
        }, [] as Array<IAsset>)
      };

      const flattenSubsAssets = flattenTree(subAssetsOrder);
      draft.subsAssets[assetId] = flattenSubsAssets;
      return;
    }
    case 'toggle': {
      const {id} = action.payload;
      if (draft.subsAssets[id] == null) {
        draft.lastToggleAssetId = id;
      } else {
        draft.lastToggleAssetId = null;
        delete draft.subsAssets[id];
      }
      return;
    }
    case 'refreshSubs': {
      const id = action.payload.id;
      draft.lastToggleAssetId = id;
      return;
    }
    default:
      throw Error();
  }
};