Is there a plugin for Reactotron that allows for similar functionality to the React Query Devtools?

Overview

Reactotron React Query for React Native

Screenshot

Is there a plugin for Reactotron that allows for similar functionality to the React Query Devtools? Yes! This plugin helps you debug your React Query cache and queries in Reactotron.

Installation

npm i react-query
npm i reactotron-react-native --save-dev
npm i reactotron-react-query --save-dev

Usage

Create a file queryClient.ts

import { QueryClient } from "react-query";
const queryClient = new QueryClient();

export { queryClient };

Create a file reactotron.ts

import Reactotron from "reactotron-react-native";
import { queryClient } from "./queryClient";
import {
  QueryClientManager,
  reactotronReactQuery,
} from "reactotron-react-query";

const queryClientManager = new QueryClientManager({
  queryClient,
});
Reactotron.use(reactotronReactQuery(queryClientManager))
  .configure({
    onDisconnect: () => {
      queryClientManager.unsubscribe();
    },
  })
  .useReactNative()
  .connect();

Import the queryClient and reactotron in your App.jsx file.

import { StyleSheet, Text, View } from "react-native";
import { QueryClientProvider } from "react-query";
import { queryClient } from "./queryClient";

if (__DEV__) {
  // @ts-ignore
  import("./reactotron");
}
export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    </QueryClientProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
You might also like...
React Hook for managing state in URL query parameters with easy serialization.

useQueryParams A React Hook, HOC, and Render Props solution for managing state in URL query parameters with easy serialization. Works with React Route

A toolkit for opinionated use of the react-query + Jotai integration.

Jotai Query Toolkit (JQT) This is an opinionated toolkit for working with Jotai and react-query. This library extends upon the react-query integration

 A set of React Query hooks integrating with Firebase.
A set of React Query hooks integrating with Firebase.

React Query Firebase provides a set of easy to use hooks for common Firebase usecases. Each hook wraps around React Query, allowing to easily integrate the hooks into a new or existing project, whilst enjoying the powerful benefits React Query offers.

A demonstration of how to use React Query library

React Query Example This project is a demonstration of how to use React Query library to perform the following frontend API requests: Basic query Pagi

Rick and Morty app with react-query and GraphQL Code Generator

Rick and Morty app using react-query with GraphQL Code Generator This project was bootstrapped with Create React App. Available Scripts In the project

An app used in the tutorial for React Query.

Notes on React Query Using DevTools for React Query import { ReactQueryDevtools } from 'react-query/devtools' Refetching Behavior By default, Queries

Why you should use react-query instead of useEffects for API Calls?

Why you should use React Query instead of useEffect for API Calls? This repo, gives great examples of why you should use react-query library for fetch

A Progressive Solution for Query Table Scene

English | 简体中文 @ahooks/useTable A Progressive Solution for Query Table Scene, RFC for more information Features 🔗 Plugins: Some plugins for different

Use-obs-studio - React Hooks for working with OBS Studio's obs-browser plugin

use-obs-studio React hooks for working with the obs-browser JS bindings. Install

Comments
  • reactotoron needs to stay open

    reactotoron needs to stay open

    • I'm submitting a ... [x] bug report [ ] feature request [ ] question about the decisions made in the repository [ ] question about how to use this project

    • Summary app crashes if Reactotron is not open and connected

    • Other information (e.g. detailed explanation, stack traces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

    opened by sagivYad2 2
Releases(1.0.2)
  • 1.0.2(Jan 20, 2023)

    • Remove module config (eb772cf)
    • Fix output folder (c873cf1)
    • Add release-it config (e5bfde4)
    • Remove .cspell.json (0cbc062)
    • Excluded spec files (8cc55f2)
    • Removed unused dependencies and added husky (117406c)
    • Remove tsconfig.module.json (ad5c74e)
    Source code(tar.gz)
    Source code(zip)
Owner
Hasan
Hasan
React-api-query - Hooks to use react-query with a typed API client

?? react-api-query Hooks to use react-query with a typed API client. More types,

Felix Gnass 9 Dec 21, 2022
A package that allows application to query for list of tokens

@solana/spl-token-registry Solana Token Registry is a package that allows application to query for list of tokens. The JSON schema for the tokens incl

Abion Foundation 0 Dec 4, 2021
This simple tic-tac-toe game is created by following the react documentation. and there's some modifications on it.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Kesara Karannagoda 1 Dec 29, 2022
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React >= 16.8.0 Installation Using npm: $ npm install --save react-un

Salvatore Ravidà 177 Oct 10, 2022
React hook that provides copy to clipboard functionality.

?? react-use-clipboard A React Hook that provides copy to clipboard functionality. Install You can install react-use-clipboard with NPM or Yarn. npm i

Daniel O’Connor 247 Nov 11, 2022
React Hooks to implement Undo and Redo functionality

♻️ use-undo undo/redo functionality with React Hooks. Installation yarn add use-undo Usage import React from 'react'; import ReactDOM from 'react-dom'

Homer Chen 369 Dec 13, 2022
React hook for undo/redo functionality without the hassle.

useUndoable React Hook for undo/redo functionality without the hassle. This hook acts like the useState hook but provides easy-to-use helper functions

Infinium 91 Dec 27, 2022
React hook for undo/redo functionality without the hassle.

useUndoable React Hook for undo/redo functionality without the hassle. This hook acts like the useState hook but provides easy-to-use helper functions

Infinium 2 Dec 9, 2021
A react hook which lets you automatically synchronize a value to a server with react-query

useReactQueryAutoSync A helpful react hook for building interfaces which require autosave. Read more about the motivation and design in the original b

Luke Murray 35 Nov 2, 2022
useMedia React hook to track CSS media query state

use-media useMedia React sensor hook that tracks state of a CSS media query. Install You can install use-media with npm npm install --save use-media o

Vadim Dalecky 508 Jan 4, 2023