Proposing an abstraction for conditional queries

[costelinivictor]

The issue

We can already perform conditional queries by manipulating the enabled property, but I was wondering if we could create an abstraction for that.

In a scenario where a button triggers a fetch, for example, we'd do something like this:

export const useMyQuery = (shouldFetch: boolean) => {
  const query = useQuery({
    queryKey: ["key"],
    queryFn: async () => {
      const data = {};
      return data;
    },
    enabled: shouldFetch,
  });

  return query;
};

export const MyComponent = () => {
  const [shouldFetch, setShouldFetch] = useState(false);
  const { data, isFetched } = useMyQuery(shouldFetch);

  useEffect(() => {
    if (isFetched) {
      setShouldFetch(false);
    }
  }, [isFetched]);

  return (
    <div>
      <div>{data || "Empty"}</div>
      <button onClick={() => setShouldFetch(true)}>load data</button>
    </div>
  );
};

We introduce an useEffect and an useState, creating a lot of boilerplate code to achieve the desired behavior.

The proposed solution

My suggestion is for us to modify useQuery so it:

• exports a function called fetch that can be called by the component, removing the need for useEffect and useState hooks
• gets a new property called fetchOnMount, with its default value as true

export const useMyQuery = () => {
  const query = useQuery({
    queryKey: ["key"],
    queryFn: async () => {
      const data = {};
      return data;
    },
    fetchOnMount: false
  });

  return query;
};

export const MyComponent = () => {
  const { data, fetch } = useMyQuery();

  return (
    <div>
      <div>{data || "Empty"}</div>
      <button onClick={fetch}>load data</button>
    </div>
  );
};

Why not just use a Mutation?

useQuery already has all the cache handling and we're all used to use useQuery for fetching data.

Remarks

As expected for a GitHub Discussion, this is just an idea and, even if this goes forward, it's not even close to a final version.

I'd love your input for the following questions:

• Is this abstraction worth it?
• Is this the best way to do this?
• Should this be a separate hook, something like useConditionalQuery?

[TkDodo]

in my experience, when someone wants a "fetch on click", they want lazy queries, where the value that is passed to enabled is actually part of the queryKey. Thus, there is no need to set a value back in an effect.