@tanstack/query-devtools

What is @tanstack/query-devtools?

@tanstack/query-devtools is a set of development tools for React Query (now part of TanStack Query). It provides a visual interface to inspect and debug queries, mutations, and cache in your application.

What are @tanstack/query-devtools's main functionalities?

Devtools UI

The Devtools UI provides a visual interface to inspect and debug queries and mutations. You can toggle it open and closed within your application.

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

function App() {
  return (
    <>
      <YourAppComponents />
      <ReactQueryDevtools initialIsOpen={false} />
    </>
  );
}

Inspect Queries

You can inspect the state of your queries, including their data, loading status, and errors. This helps in understanding the flow and state of data fetching in your application.

import { useQuery } from '@tanstack/react-query';

function Example() {
  const { data, error, isLoading } = useQuery(['todos'], fetchTodos);

  if (isLoading) return 'Loading...';
  if (error) return 'An error occurred';

  return (
    <div>
      {data.map(todo => (
        <div key={todo.id}>{todo.title}</div>
      ))}
    </div>
  );
}

Inspect Mutations

You can inspect the state of your mutations, including their data, loading status, and errors. This helps in understanding the flow and state of data mutations in your application.

import { useMutation } from '@tanstack/react-query';

function AddTodo() {
  const mutation = useMutation(newTodo => fetch('/api/todos', {
    method: 'POST',
    body: JSON.stringify(newTodo)
  }));

  return (
    <button
      onClick={() => {
        mutation.mutate({ title: 'New Todo' });
      }}
    >
      Add Todo
    </button>
  );
}

Other packages similar to @tanstack/query-devtools

redux-devtools

Redux DevTools is a set of tools to help debug Redux applications. It provides a time-traveling debugger, action log, and state inspector. Compared to @tanstack/query-devtools, it is more focused on state management rather than data fetching and caching.

mobx-react-devtools

MobX React DevTools is a set of tools for debugging MobX applications. It provides a visual interface to inspect observable state, actions, and reactions. Compared to @tanstack/query-devtools, it is more focused on state management and reactivity rather than data fetching and caching.

apollo-client-devtools

Apollo Client DevTools is a set of tools for debugging Apollo Client applications. It provides a visual interface to inspect GraphQL queries, mutations, and cache. Compared to @tanstack/query-devtools, it is more focused on GraphQL data fetching and caching.