How can i make the search button work with react query?

[gmcamposano]

I have the following code and it works. I have tried various ways to make it work: using the enabled, using the refetch, and it doesnt seem to work. So instead of pasting here the none working one, i decided to show you guys what I want to do. I cannot create a sandbox as its fetches to my docker postgres container.

const TODAY = new Date().toISOString().split('T')[0]
const [isLoading, setIsLoading] = useState(false)
  const [total, setTotal] = useState(0)
  const [formaDePago, setFormaDePago] = useState({
    efectivo: 0,
    tarjeta: 0
  })
  const [date, setDate] = useState(TODAY)
  const [data, setData] = useState([])
  const router = useRouter()

//fetch function
  const getData = async () => {
    setIsLoading(true)
    const { data } = await axios.get(`/api/cierre/?fecha=${date}`)
    setData(data.facturas)
    setFormaDePago({
      efectivo: data.efectivo,
      tarjeta: data.tarjeta
    })
    setTotal(data.total)
    setIsLoading(false)
    router.push({
      pathname: '/cierre-del-dia',
      query: { fecha: date }
    })
  }

  const handleSearch = (e) => {
    e.preventDefault()
    try {
      getData()
    } catch (error) {
      console.log(error)
    }
  }

  const handleSelectDate = (e) => {
    setDate(e.target.value)
  }

  useEffect(() => {
    try {
      getData()
    } catch (error) {
      console.log(error)
    }
  }, [])

  if (isLoading) return <Loading />

  return (
    <div>
      <form>
        <input
          type="date"
          name="fecha"
          id="fecha"
          onChange={handleSelectDate}
          value={date}
        />
        <button
          disabled={router.query.fecha === date ? true : false}
          onClick={handleSearch}
        >
          Search
        </button>
...

[TkDodo]

I cannot create a sandbox as its fetches to my docker postgres container.

I don't know why everyone keeps saying things like that. You can do it. You can change the query function. You don't have to use axios in there. It's fine to return some json from the queryFn that does NOT come from the network. If react-query is the problem, then the sandbox will show the problem even if you don't "fetch" in there...

https://tkdodo.eu/blog/how-can-i#3-provide-a-minimal-reproducible-example

[gmcamposano]

You are absolutely right. I will write an example and come back to post it. Sorry about that.

[gmcamposano]

Here i got the example @TkDodo https://codesandbox.io/s/react-query-search-t9lk76

[TkDodo]

all you are really missing is to add the query to the queryKey:

https://codesandbox.io/s/react-query-search-forked-t1o496?file=/src/App.js

I've also added keepPreviousData, but that is merely to avoid loading states between filters.

Everything you use in the queryFn should be part of the queryKey. This is documented:

• https://tanstack.com/query/v4/docs/guides/query-keys#if-your-query-function-depends-on-a-variable-include-it-in-your-query-key
• https://tkdodo.eu/blog/practical-react-query#treat-the-query-key-like-a-dependency-array

We even have an eslint rule that should catch this:

• https://tanstack.com/query/v4/docs/eslint/exhaustive-deps

[gmcamposano]

Thanks a lot @TkDodo . I was getting corrected by github copilot, but I did not understand why it was adding a second argument to the queryKey. I now know I will have to do a more extensive study to the docs.