React Query devtool synced with Socket.IO, to debug your react-query outstide your app easily.
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 projects, it offers a live state management solution that's accessible to both developers, qa and non-technical team members.
npm install react-query-external-sync
import { useAllQueries } from "react-query-external-sync";
const { connect, disconnect, isConnected, queries, socket, users } =
useAllQueries({
query: {
username: "myUsername",
userType: "User", // Role of the user
clientType: "client", // client | server
},
queryClient,
socketURL: "http://localhost:4000",
});
.connect()
: initiate a connection with the socket server.disconnect()
: terminate the connection to the socket server by invoking the disconnect function.isConnected
: monitor the connection statusnpm install react-query-external-dash
import { socketHandle } from "react-query-external-dash"
import("socket.io").then(4000 => {
const io = new socketIO.Server(socketPort, {
cors: {
// This origin is the devtool (see next section), change the port to fit your needs.
// You'll also need to add the URL of your client if you have any CORS issue
origin: ["http://localhost:4001"],
credentials: true,
},
})
socketHandle({ io })
io.on("connection", client => {
console.log(`'${client.handshake.query.username}' connected`)
})
})
import React from "react"
import ReactDOM from "react-dom/client"
import { ExternalDevTools } from "react-query-external-dash"
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<ExternalDevTools
socketURL={"http://localhost:4000"}
query={{
clientType: "server",
username: "Admin",
userType: "admin",
}}
/>
</React.StrictMode>,
)
If you don't want to setup both Socket.IO + Dedicated React.js server to monitor your app, a Docker image is available to launch those both services at once, with custom ports and CORS urls.
https://hub.docker.com/repository/docker/navalex/rq_devtool
SOCKET_PORT
: Port for the Socket.io serverDT_PORT
: Port for the Vite server to access your devtoolCORS_ORIGINS
: String to specify authorized url's for CORS in form of: "url1,url2,url3,..." (separate with coma without spaces). Note that the devtool url is automaticly included in the CORS Policy.services:
rqDevtools:
image: navalex/rq_devtool:latest
ports:
- ${RQ_DEVTOOLS_PORT}:${RQ_DEVTOOLS_PORT}
- ${RQ_DEVTOOLS_SOCKET_PORT}:${RQ_DEVTOOLS_SOCKET_PORT}
environment:
DT_PORT: ${RQ_DEVTOOLS_PORT}
SOCKET_PORT: ${RQ_DEVTOOLS_SOCKET_PORT}
SOCKET_CORS: "http://localhost:8102,http://localhost:5173"
I welcome contributions, feedback, and bug reports. Feel free to open an issue or pull request on this GitHub repository.
🌴Looking for a web/mobile developer? I'm actively seeking my next opportunity. Feel free to message me on LinkedIn! https://www.linkedin.com/in/lovesworking/