Current Data vs Data - need a way to conditionally opt out of SWR approach

[maksnester]

Consider a request like this

/api/:parentEntity/:childEntity

So I have a query like

const params = useParams()
const { data } = useEntityQuery({ parentEntityId: params.id, childEntityId: params.childId });

So I'd like to show the stale data when childId changes, but I never want to show the stale data that is related to a different parent entity.

currentData isn't exactly the right solution here as it'll never show the cached data between childId changes.

For now, the only way I know to achieve the best of both is to create a custom hook like

export const useChildEntity = () => {
  const params = useParams<{
    parentEntityId: string;
    childEntityId: string;
  }>();
  const parentEntityId = Number(params.parentEntityId);

  const { data: childEntity } = useEntityQuery(
    {
      parentEntityId: params.parentEntityId,
      childEntityId: params.childEntityId,
    },
    {
      skip: !parentEntityId,
    }
  );

  // when query is dispatched with a new argument, the query hook returns previous data,
  // and it also not marked as isLoading if there is any previous data
  // this is done to embrace showing cached data
  // but for this specific case we do not want to use the "previous" data as it is irrelevant.

  // currentData + isFetching flag could replace this workaround,
  // but some other queries may invalidate entity cache and trigger loading state (isFetching) which might be not needed.
  if (childEntity && childEntity.id !== Number(parentEntityId)) {
    return undefined;
  }

  return childEntity;
};

But I'd prefer some library-level solution to this, somewhat like:

  const { data, isLoading } =
    useEntityQuery({ parentEntityId: params.id, childEntityId: params.childId }, {
      skip: !currentEntityId,
      // makes stale data to be returned only when parentEntity is the same
      // but it should take existing cache into account, like if there was a cache for the new parent + child combo
      // then it is fine to give the cache back
      returnStaleDataWhileRevalidate: (args, prevArgs) => args.parentEntityId !== prevArgs.parentEntityId
    });