Snippets Collections
// This will not work in React 16 and earlier
const CreateTodo = () => {
  const mutation = useMutation({ mutationFn: event => {
    event.preventDefault()
    return fetch('/api', new FormData(event.target))
  }})


  return <form onSubmit={mutation.mutate}>...</form>
}


// This will work
const CreateTodo = () => {
  const mutation = useMutation({ mutationFn: formData => {
    return fetch('/api', formData)
  }})
  const onSubmit = event => {
    event.preventDefault()
    mutation.mutate(new FormData(event.target))
  }


  return <form onSubmit={onSubmit}>...</form>
}
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>
  )
}
star

Mon Nov 28 2022 13:14:14 GMT+0000 (UTC) https://tanstack.com/query/v4/docs/guides/mutations

#tsx
star

Thu Sep 15 2022 14:12:53 GMT+0000 (UTC) https://tanstack.com/query/v4/docs/guides/disabling-queries#lazy-queries

#tsx #react.js #usequery

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension