Changing the query key used as params without using state

[dm0114]

I've heard that the query key comparison only happens on render, is there any way to use the query key without using state, and if so, where should I refer to the relevant source code?

[TkDodo]

what do you mean "without state" ? The values in the QueryKey are the dependencies to your query, they have to come from somewhere. Usually it's user input or some other dynamic values that are essentially "client state". You have to manage that somehow

[dm0114]

Sorry, I meant state using useState, not refs or variable values.

[TkDodo]

show an example of what you mean please

[dm0114]

export const useParams = () => {
  const selectRef = useRef<HTMLInputElement>(null);
  const [input, _setInput] = useDebouncedState<string | null>(null, 200);

  const params = {
    page: 1,
    size: 10,
    sort: 'id,desc',
    selection: selectRef.current?.value ?? undefined,
    input: input,
  };

  const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    _setInput(e.currentTarget.value);
  };

  const fetchNextPage = () => {
    params.page = params.page + 1
  }

  return {
    params,
    selectRef,
    handleChangeInput,
    fetchNextPage,
  }
}

export const useTestList = (params) => {
  return useQuery({
    queryKey: ['test', params],
    queryFn: queryFn()
  })
}

export function Page() {
  const {params, selectRef, handleChangeInput, fetchNextPage}  = useParams()
  const {data} = useTestList(params)
  return (
    <div>
      <select ref={selectRef} data={data}/> // not working
      <input defaultValue={params.input ?? ''} onChange={handleChangeInput} /> // working
      <button onClick={fetchNextPage}>+1</button> // not working
    </div>
  )
} 

I didn't need the state in that example and the documentation said As long as the query key is serializable, and unique to the query's data, you can use it!, So I tried to change the queryKey using the object's reference, but it didn't work. I was looking through the documentation and Q&A and came across this post and stopped looking, but I was wondering if there was another way to do it.

[TkDodo]

const fetchNextPage = () => {
  params.page = params.page + 1
}

the rules of react still apply. Try to display params in a <div> and you would get the same "not working" state. You can't write to refs and expect them to magically update somewhere. That's what state is for ...

[dm0114]

Thank you for answer