Disabling/Pausing Queries and Fetch Only When State Change | TanStack Query Docs

PHOTO EMBED

Thu Sep 15 2022 14:12:53 GMT+0000 (UTC)

Saved by @chezandrei #tsx #react.js #usequery

function Todos() {
  const [filter, setFilter] = React.useState('')


  const { data } = useQuery(
    ['todos', filter],
    () => fetchTodos(filter),
    {
      // ⬇️ disabled as long as the filter is empty
      enabled: !!filter
    }
  )


  return (
      <div>
        // 🚀 applying the filter will enable and execute the query
        <FiltersForm onApply={setFilter} />
        {data && <TodosTable data={data}} />
      </div>
  )
}
content_copyCOPY

https://tanstack.com/query/v4/docs/guides/disabling-queries#lazy-queries