Skip to content
⚛️ Devtools for React Query
JavaScript
Branch: master
Clone or download

Latest commit

Latest commit 8940244 Mar 26, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Delete test.yml Mar 4, 2020
.vscode Initial commit Mar 4, 2020
media Update media names Mar 4, 2020
src v1.0.13 Mar 26, 2020
.babelrc Initial commit Mar 4, 2020
.browserslistrc Initial commit Mar 4, 2020
.editorconfig Initial commit Mar 4, 2020
.eslintrc Initial commit Mar 4, 2020
.gitattributes Initial commit Mar 4, 2020
.gitignore Initial commit Mar 4, 2020
CHANGELOG.md v1.0.13 Mar 26, 2020
LICENSE Initial commit Mar 4, 2020
README.md Readme Mar 26, 2020
index.js v1.0.4 Mar 4, 2020
jest.config.js Initial commit Mar 4, 2020
package.json v1.0.13 Mar 26, 2020
prettier.config.js Initial commit Mar 4, 2020
rollup.config.js Readme Mar 26, 2020
yarn.lock v1.0.6 Mar 4, 2020

README.md

React Query Devtools Header

Devtools for React Query

#TanStack Join the community on Spectrum

Enjoy this library? Try them all! React Query, React Table, React Form, React Charts

Quick Features

  • View the cache in realtime
  • Inspect core query objects and query data payloads
  • Manually refetch & remove queries

Demo

Documentation

Installation

$ npm i --save react-query-devtools
# or
$ yarn add react-query-devtools

Usage

By default, React Query Devtools are not imported and used when process.env.NODE_ENV === 'production', so you don't need to worry about excluding them during a production build.

If you want to use the devtools in production, you can manually import them (preferably asynchronously code-split) by importing the dist/react-query-devtools.production.min.js file directly.

Floating Mode

Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen you can use to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.

Place the following code as high in your React app as you possibly can. The close it is to the root of the page, the better it will work!

import { ReactQueryDevtools } from 'react-query-devtools'

function App() {
  return (
    <>
      {/* The rest of your application */}
      <ReactQueryDevtools initialIsOpen={false} />
    </>
  )
}

Options

  • initialIsOpen: Boolean
    • Set this true if you want the dev tools to default to being open

Embedded Mode

Embedded Mode will embed the devtools as a regular component in your application. You can style it however you'd like after that!

import { ReactQueryDevtoolsPanel } from 'react-query-devtools'

function App() {
  return (
    <>
      {/* The rest of your application */}
      <ReactQueryDevtoolsPanel style={styles} className={className} />
    </>
  )
}

Options

  • style: StyleObject
    • The standard React style object used to style a component with inline styles
  • className: string
    • The standard React className property used to style a component with classes
You can’t perform that action at this time.