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

Last update: Jan 30, 2023

Overview

Reactotron React Query for React Native

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",
  },
});

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

1.8k Dec 22, 2022

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

34 Oct 25, 2022

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.

277 Jan 7, 2023

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

3 Jan 21, 2022

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

1 Dec 20, 2021

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

0 Dec 31, 2021

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

26 Dec 15, 2022

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

40 Dec 9, 2022

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

3 Dec 9, 2022

Comments

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)
1.0.1(Jan 2, 2023)

Source code(tar.gz)
Source code(zip)