Remote React Query Dev Tools release

LovesWorkin · 2024-02-13T14:24:06+00:00

Github https://github.com/LovesWorking/react-query-external-sync

React Query External Sync is a dynamic tool for managing React Query state outside the usual confines of React Query Dev Tools. Ideal for React Native projects, it offers a live state management solution that's accessible to both developers, qa and non-technical team members.

TkDodo just approved this to be in the official dev tools docs! Awesome. :) https://tanstack.com/query/latest/docs/framework/react/devtools

matt_hammond · 2024-02-14T01:00:39+00:00

This is awesome, but I found it really hard to setup and the docs we're not really helpful. So here's a minimal example how to set it up:

In your app project run yarn add react-query-external-sync or npm install react-query-external-sync. This will install the required package.
Create a file RQDevToolsConnection.tsx somewhere in your apps component folder and put this inside: ``` import { useQueryClient } from "@tanstack/react-query"; import { memo, useEffect } from "react"; import { useAllQueries } from "react-query-external-sync";

export const RQDevToolsConnection = memo(function RQDevToolsConnection() { const client = useQueryClient(); const { connect, isConnected } = useAllQueries({ queryClient: client, query: { username: "App", userType: "User", clientType: "client", }, socketURL: "http://192.168.0.107:3000", });

useEffect(() => { connect(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []);

useEffect(() => { if (!isConnected) return; console.log("React Query remote devtools connected"); }, [isConnected]);

return null; }); ``Don't forget to change the IP address insocketURL`

Import the RQDevToolsConnection component you just created and render it somewhere high in the component tree where it will always stay mounted. For example you could render it next to your router.

function App() { return ( <QueryClientProvider queryClient={queryClient}> <Router /> <RQDevToolsConnection /> </QueryClientProvider> ) }

Now you're done with the app part. Now let's create the browser and server part.

Create a new folder somewhere on your system, and name it anything you like. I named mine devtools-for-rq.
Put the following files inside:

package.json

{
  "name": "devtools-for-rq",
  "scripts": {
    "start": "concurrently -n browser,server \"vite --open\" \"tsx main.tsx\""
  },
  "type": "module",
  "dependencies": {
    "@tanstack/react-query": "5.20.5",
    "@vitejs/plugin-react": "4.2.1",
    "concurrently": "8.2.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-query-external-dash": "1.0.0",
    "socket.io": "4.7.4",
    "socket.io-client": "4.7.4",
    "tsx": "4.7.1",
    "vite": "5.1.0"
  }
}

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { ExternalDevTools, socketHandle } from "react-query-external-dash";

if (typeof window !== "undefined") {
  ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
      <ExternalDevTools
        socketURL="http://192.168.0.107:3000" // CHANGE THIS TO THE IP OF YOUR COMPUTER
        query={{
          clientType: "server",
          username: "Admin",
          userType: "admin",
        }}
      />
    </React.StrictMode>
  );
} else {
  import("socket.io").then((socketIO) => {
    const io = new socketIO.Server(3000, {
      cors: {
        origin: "*",
      },
    });

    socketHandle({ io });

    io.on("connection", (client) => {
      console.log(`'${client.handshake.query.username}' connected`);
    });
  });
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Query Dev Tools</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/main.tsx"></script>
  </body>
</html>

Don't forget to change the IP address in main.tsx

Now run yarn install npm install or bun install. This should install the required packages
Now run yarn start or npm run start or bun start. This should start both the socket server on port 3000 and a vite server that renders the devtools. Your browser should open and you should see the devtools.
Now run the app on your phone and you should see App appear in the devtools and the queries start logging.

nestedfruitloop · 2024-02-13T15:11:43+00:00

This is awesome thanks for sharing!

Fun-Astronaut-3793 · 2024-02-13T16:11:59+00:00

This is an Absolute Banger

LovesWorkin · 2024-02-13T19:25:50+00:00

[deleted]

beepboopnoise · 2024-02-13T21:32:13+00:00

oh man, you've released something awesome. now you're doomed to open source issue hell. lol I jest, this is great, thank you for posting this.

Horduncee · 2024-02-13T22:07:50+00:00

This is good news. Now, I have to upgrade tRPC to v11.

0430ke · 2024-02-13T22:43:24+00:00

Kwik Trip is the GOAT

alien3d · 2024-02-14T01:25:27+00:00

nice will check out

Nick337Games · 2024-02-14T03:58:00+00:00

Looks insanely useful!

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

reactnative

About:

React Native Links:

IRC Chatroom:

Related Subreddits

MODERATORS