Lazy useQuery and imperative paradigm

[incepter]

Hello all,

While having a discussion with @TkDodo on twitter, we evoked the possibility to define lazy queries that can be fired from event handlers without relying on additional state variables in the developer land. ie:

const {run} = useQuery(_, __, { lazy: true });


// later
<input onChange={e => run(e.target.value)} />

For the library, it will just not run the fetcher and delay it until the decision comes from an event handler.

The difference between lazy and enabled is:

• by enabled you put a condition that should work only when lazy is false, meaning at every dependency change, you check again if the condition in enabled is truthy and later you should keep track of enabled if it transition from false to true. And you can't change this condition unless to perform a complete render.
• by lazy you tell the library: Please don't fire automatically at all, the user will control this. It is similar to mutation, but mentally, it is a query that you can run from everywhere in your app and gives you data to display.

For example, directly searching when the user types in drop down, or a search list that starts with empty results... and so on.

The run function then will pass its arguments as args property in the argv that the query function receives.

Here is a demonstration of what the API that I advice for:

async function fetchUser(props: ProducerProps<User>): Promise<User> {
  const controller = new AbortController();
  props.onAbort(() => controller.abort());

  const [userId] = props.args;

  const usersResponse = await API.get("/users/" + userId, { signal: controller.signal });
  return usersResponse.data;
}

// Component
const { run, state } = useAsyncState({
    lazy: true,
    producer: fetchUser,
    runEffect: "debounce",
    skipPendingDelayMs: 200,
    runEffectDurationMs: 300,
    cacheConfig: {
      enabled: true,
      hash: (args) => `user-${args?.[0]}`,
      getDeadline: (s) => s.data.maxAge || 5_000
    }
  });
const { status, data, props } = state;

return (
    <div className="App">
      <input onChange={(e) => run(e.target.value)} />
      <h3>Status is: {status}</h3>
      {status === "success" && (...)}
      {status === "error" && (...)}
    </div>
  );

Please note that I may contribute to the proposed features as well.

Best regards.

[incepter]

@TkDodo @tannerlinsley any thoughts on this ?

[TkDodo]

I'm not sure how we would technically do this right now. The queryKey would need to become a function that gets arguments passed from run into it, because we'd want separate caching per arguments. Maybe it would need to be a separate hook or so.

In most of the cases I have encountered, people have the value of the input in state already. The moment you want to do anything else with the search input, you need to store it somewhere. At that point, you can declaratively read it. For search, putting it in the url is ideal. Something like this codesandbox: https://codesandbox.io/s/react-query-url-filtering-h0ikw?file=/src/App.tsx

[incepter]

Thanks for your reply Dominik, I appreciate it. I ll give it a try once i get some free time for sure to see how we can do this.