React Query: async fetch from cache or api

Component.tsx

import { useQueryClient } from '@tanstack/react-query';

/* 
 * Demonstration of how to fetch data from API in a promise,
 * but utilizing already cached data from React Query
 * or (if not present) populate the cache after fetch.
 *
 * Motivation: reduce unnecessary data fetching.
 */

const Component = () => {
  const queryClient = useQueryClient();
  const [data, setData] = useState(null);
  const onClick = async () => {
    const cachedOrFreshData = await getPost(queryClient, 1);
    setData(cachedOrFreshData);
  }
  return (
    <button onClick={onClick}>Get post 1</button>
  )
}

const getPost = async (qClient, id) => {
  const queryKey = ['post', { id }];
  const cachedData = qClient.getQueryData(queryKey);
  if (cachedData) { return cachedData }
  const response = await fetch('https://localhost:3000/api/posts/' + id);
  const json = await response.json();
  qClient.setQueryData(queryKey, json);
  return json;
}