@tanstack/react-query-devtools

What is @tanstack/react-query-devtools?

@tanstack/react-query-devtools is a set of development tools for React Query, which helps in managing server-state in React applications. It provides a visual interface to inspect and debug queries, mutations, and cache data managed by React Query.

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

Devtools Panel

The Devtools Panel provides a visual interface to inspect and debug queries and mutations. It can be toggled open or closed and provides detailed information about the state of your queries and mutations.

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

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

Query Inspection

Query Inspection allows you to see the status, data, and error states of your queries. This is useful for debugging and ensuring that your queries are working as expected.

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

function MyComponent() {
  const { data, error, isLoading } = useQuery('myQueryKey', fetchMyData);

  return (
    <div>
      {isLoading ? 'Loading...' : error ? 'Error!' : data}
    </div>
  );
}

Mutation Inspection

Mutation Inspection allows you to see the status and results of your mutations. This helps in debugging and ensuring that your mutations are being executed correctly.

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

function MyComponent() {
  const mutation = useMutation(newData => fetch('/api/data', { method: 'POST', body: JSON.stringify(newData) }));

  return (
    <button onClick={() => mutation.mutate({ foo: 'bar' })}>
      Submit
    </button>
  );
}

Other packages similar to @tanstack/react-query-devtools

redux-devtools-extension

Redux DevTools Extension is a development tool for Redux that provides a visual interface to inspect and debug the state of your Redux store. It offers time-travel debugging, action replay, and state inspection. Compared to @tanstack/react-query-devtools, it is specific to Redux and does not provide tools for managing server-state in React applications.

mobx-react-devtools

MobX React DevTools is a set of development tools for MobX, a state management library for React. It provides a visual interface to inspect and debug the state managed by MobX. Compared to @tanstack/react-query-devtools, it is specific to MobX and does not provide tools for managing server-state in React applications.

apollo-client-devtools

Apollo Client DevTools is a set of development tools for Apollo Client, a GraphQL client for React. It provides a visual interface to inspect and debug GraphQL queries, mutations, and cache data managed by Apollo Client. Compared to @tanstack/react-query-devtools, it is specific to GraphQL and Apollo Client.