Disabling Query

Disabled query is a bit different from lazy query. Disabled query's async function will never be triggered even if we accidentally call the fetch function (like what we've learned in lazy query). We can easily protect a query from being called by utilizing enabled option.

const useProfileQuery = createQuery(getProfile);
 
const usePremiumContentsQuery = createQuery(getPremiumContents, {
  enabled: () => {
    const { isSuccess, data } = useProfileQuery.get();
    if (isSuccess && data.isPremiumMember) return true;
    return false;
  },
});
 
function Component() {
  const { data } = useProfileQuery();
  const { fetch } = usePremiumContentsQuery();
 
  useEffect(() => {
    if (data) {
      fetch(); // Will not call getPremiumContents if user is not a premium member
    }
  }, [data])
 
  return (
    <div>
      <button onClick={fetch}>
        Fetch premium contents if query is enabled
      </button>
    </div>
  )
}

Lazy Query Prefetching