How to update part of queryKey without invoking queryFn

[oakland]

I'm new to react-query, please help!
In the following example, I want to update filter without invoking queryFn, how can I achieve it?
The queryFn is invoked every time I type a letter in the input, but I only want to invoke queryFn only when button is clicked.

function Example() {
  const [filter, setFilter] = useState('');
  const query = useQuery({
    queryKey: ['todos', filter],
    queryFn: () => getTodos(filter),
  });

  return (
    <div>
      <input
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
      />
      {query.isLoading ? (
        'Loading...'
      ) : query.isError ? (
        query.error.message
      ) : (
        <>
          <ul>
            {query.data.map((todo) => (
              <li key={todo.id}>{todo.title}</li>
            ))}
          </ul>
          <button
            onClick={() => {
              query.refetch();
            }}
          >
            Refresh
          </button>
        </>
      )}
    </div>
  );
}

[kalijonn]

I would personally use the enabled flag for something like this. You can probably use useEffect to set it back to false once data is fetched.

function Example() {
  const [filter, setFilter] = useState('');
  const [enabled, setEnabled] = useState(false)
  const query = useQuery({
    queryKey: ['todos', filter],
    queryFn: () => getTodos(filter),
    enabled
  });

  return (
    <div>
      <input
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
      />
      {query.isLoading ? (
        'Loading...'
      ) : query.isError ? (
        query.error.message
      ) : (
        <>
          <ul>
            {query.data.map((todo) => (
              <li key={todo.id}>{todo.title}</li>
            ))}
          </ul>
          <button
            onClick={() => {
              setEnabled(true)
            }}
          >
            Refresh
          </button>
        </>
      )}
    </div>
  );
}

[oakland]

The problem here is, after the first time you clicked the button, the "enabled" becomes true, and then the following onChang will trigger queryFn again.

[TkDodo]

The idea is to split this up into multiple components, and only set state of the parent component when the user hits the apply or refresh button. There's a good example in the docs here:

• https://tanstack.com/query/v5/docs/react/guides/disabling-queries#lazy-queries

[oakland]

Thanks for your reply. This is good, but I still find it is not perfect.
Firstly, this solution force me to split current component info multiple components.
Secondly, what if I have <AnotherFilterComponent> below the todo list? I want to change both states of <FilterComponentAbove> and <AnotherFilterComponent>, and then trigger refetch when clicking any of the filter component button to refetch. But I have to keep the two components state synchronized.

[TkDodo]

Firstly, this solution force me to split current component info multiple components.

Not necessarily - it only "forces" you to have an "ephemeral" state for your input that is not yet submitted, and one for the submitted state. You can keep this in two states, or you can push applied state to the url, or you can use uncontrolled components for the ephemeral state and only store the applied state. There are many options.

Secondly, what if I have below the todo list? I want to change both states of and , and then trigger refetch when clicking any of the filter component button to refetch. But I have to keep the two components state synchronized.

Lift state up. This is a client state management problem :)

[oakland]

Thanks, I will have a try. The solutions seem to be not as expected as I thought. I need to reconstruct my mental model and have some more practice.