It's not a bug, it's a feature - they say.

React DX is so special...

```js // Ensure MQTT.js is installed first // > npm install mqtt import * as mqtt from "mqtt"

// Where 'url' is "mqtts://BROKER.NAMESPACE.cloudflarepubsub.com:8884" function example(url) { let client = mqtt.connect(url, { protocolVersion: 5, reconnectPeriod: 0, username: 'anything', password: jwt, // pass this from a form field in your app clientId: '', })

client.on('connect', function () { client.subscribe(topic, function (err) { if (err) { client.end(); } else { console.log(subscribed to ${topic}) } })

client.on('message', function (topic, message) { let line = (new Date()).toLocaleString('en-US') + ": " + message.toString() + "\n"; console.log(line) }) } ```

```js exports.handler = async (event) => { if (event.headers != undefined) { const headers = toLowerCaseProperties(event.headers);

    if (headers['sec-websocket-protocol'] != undefined) {
        const subprotocolHeader = headers['sec-websocket-protocol'];
        const subprotocols = subprotocolHeader.split(',');

        if (subprotocols.indexOf('myprotocol') >= 0) {
            const response = {
                statusCode: 200,
                headers: {
                    "Sec-WebSocket-Protocol" : "myprotocol"
                }
            };
            return response;
        }
    }
}

const response = {
    statusCode: 400
};

return response;

};function toLowerCaseProperties(obj) { var wrapper = {}; for (var key in obj) { wrapper[key.toLowerCase()] = obj[key]; } return wrapper; } ```

js const wss = new WebSocketStream(url); const { readable } = await wss.connection; const reader = readable.getReader(); while (true) { const { value, done } = await reader.read(); if (done) break; await process(value); } done();

js const wss = new WebSocketStream(url); const { writable } = await wss.connection; const writer = writable.getWriter(); for await (const message of messages) { await writer.write(message); }

js const controller = new AbortController(); const wss = new WebSocketStream(url, { signal: controller.signal }); setTimeout(() => controller.abort(), 1000);

Increasing StaleTime

React Query comes with a default staleTime of zero. This means that every query will be immediately considered as stale, which means it will refetch when a new subscriber mounts or when the user refocuses the window. It is aimed to keep your data as up-to-date as necessary.

This goal overlaps a lot with WebSockets, which update your data in real-time. Why would I need to refetch at all if I just manually invalidated because the server just told me to do so via a dedicated message?

So if you update all your data via websockets anyways, consider setting a high staleTime. In my example, I just used Infinity. This means the data will be fetched initially via useQuery, and then always come from the cache. Refetching only happens via the explicit query invalidation.

You can best achieve this by setting global query defaults when creating the QueryClient:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
    },
  },
})