@tanstack/react-query
Advanced tools
Hooks for managing, caching and syncing asynchronous and remote data in React
The @tanstack/react-query package is a powerful tool for fetching, caching, and updating asynchronous data in React applications. It provides a set of hooks that enable developers to easily manage and synchronize server state with the UI, improving user experience and application performance.
Data Fetching
This feature allows you to fetch data asynchronously using the useQuery hook. You can specify a unique key for the query and a function that returns a promise. The hook returns the status of the query (loading, error, success) and the fetched data.
const { data, error, isLoading } = useQuery('todos', fetchTodos)Mutation
Mutations are used to create, update, or delete data. The useMutation hook returns a mutate function that you can call with the new data. You can specify side effects to run on success, error, or mutation completion, such as invalidating queries to refetch data.
const mutation = useMutation(newTodo => axios.post('/todos', newTodo), { onSuccess: () => queryClient.invalidateQueries('todos') })Automatic Refetching
React Query can automatically refetch data under certain conditions, such as when the window regains focus. This ensures that the user always sees the most up-to-date information without having to manually refresh the data.
const { data } = useQuery('todos', fetchTodos, { refetchOnWindowFocus: true })SWR is a React hooks library for data fetching, similar to @tanstack/react-query. It also provides features like caching, revalidation on focus, and more. SWR focuses on simplicity and ease of use, with a slightly different API design compared to React Query.
Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. It offers more extensive features for working with GraphQL APIs compared to @tanstack/react-query, which is more agnostic in terms of data fetching strategy.
React Fetch Hook is a simpler alternative for data fetching in React. It provides a straightforward useFetch hook for making HTTP requests. While it offers ease of use for simple use cases, it lacks the advanced caching, synchronization, and mutation features of @tanstack/react-query.
Hooks for fetching, caching and updating asynchronous data in React
Enjoy this library? Try the entire TanStack! TanStack Table, TanStack Router, TanStack Virtual, React Charts, React Ranger
FAQs
Hooks for managing, caching and syncing asynchronous and remote data in React
The npm package @tanstack/react-query receives a total of 3,946,593 weekly downloads. As such, @tanstack/react-query popularity was classified as popular.
We found that @tanstack/react-query demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.