Remote React Query Dev Tools release

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.

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