Don't fetch an item that is already in cache (& conditional fetching)

[rodbs]

My use case is that I have a dropdown menu that fetches items from an API. It's a dependent fetching
const { data: projects } = useSWR(() => '/api/projects?id=' + projectId)

I'm experiencing these  issues:
 - I don't want to refetch something that is already in the cache (if the user fetches projectId 1, then 2, and then back to 1)
 - But because the key changes, for each fetch it creates a new entry in the cache.
 - Right now the fetch at the useSWR is not conditional; every time is fetching something regardless of being cache or not.

How can I implement it?
 - How can I say useSWR to fetch something depending on whether it is already in cache or not? (conditional fetched based on cache)
 - Can it be done with only one cache?
 
I've seen these two posts from @sergiodxa and I've got some ideas but I'm not sure how to implement it:
#525 (comment)
#360

Thanks!

[shuding]

I believe the new proposal #992 is related to this, which we are working on.

[rodbs]

I've come up with this solution. It works, but I'd appreciate it any inputs to improve it.

Basically I create the key in useSWR without any id so it's fixed and the the API will filter this empty request.
Then programmatically I create the real fetch request and populate the cache.

function useLesson(lessonId) {
  const { user } = useAuth();

  const { data, error, mutate } = useSWR(
    ['/api/lessons?id', user?.token],
    fetcher,
    {
      revalidateOnFocus: false,
      revalidateOnReconnect: false,
      revalidateOnMount: false,
      revalidateOnConnect: false,
      shouldRetryOnError: false
    }
  );

  const myCache = cache.get([`/api/lessons?id`, user?.token]);
  const isLessonInCache = Object.keys(myCache?.lessonObj || {})?.includes(
    lessonId
  );

  if (!isLessonInCache) {
    mutate(async (dt) => {
      const { lessonObj: lsnObj = {} } = await fetcher(
        `${process.env.NEXT_PUBLIC_DOMAIN_URL}/api/lessons?id=${lessonId}`,
        user?.token
      );

      const newCache = {
        lessonObj: { ...dt?.lessonObj, ...lsnObj }
      };

      return newCache;
    }, false);
  }

  const { lessonObj } = data || [];

  return {
    lessonObj,
    isLoadingLesson: !error && data === undefined,
    isErrorLesson: error,
    mutateLesson: mutate
  };
}

export default useLesson;