ReactQuery + axios + msw does nothing

[nappalm]

I have a problem, and I really don't know if it's a problem with msw, react-query or axios. But simply msw is not listening to the calls that are made to the api through react-query.

browser.js

import { http, HttpResponse } from 'msw';
import { setupWorker } from 'msw/browser';
const handlers = [
  http.get('/api/data-todo', () => HttpResponse.json({
    id: 1,
    text: 'test',
  })),
];

export const worker = setupWorker(...handlers);

msw.js

export async function enableMocking() {
  if (import.meta.env.DEV) {
    const { worker } = await import('./browser');
    
    worker.events.on("request:start", ({request}) => {
      console.log('Outgoing:', request.method, request.url)
    })

    return worker.start();
  }
}

main.js

enableMocking().then(() => {
  ReactDOM.createRoot(document.getElementById('root')).render( ....

---

axios.js

import Axios from 'axios';

export const axios = Axios.create({
  baseURL: "/api",
});

service.js

export async function getDataService() {
  const response = await axios.get('/data-todo');
  return response.data;
}

useGetData.js

export function useGetData() {
  return useQuery({
    queryFn: () => getDataService(),
    queryKey: ["KEY"],
  });
}

• When executing the query from the browser absolutely nothing happens.
• I have followed the debugging manual and still have not been able to solve the problem.
• I intercepted the axios call and get this:

{
    "transitional": { },
    "transformRequest": [ ],
    "transformResponse": [  ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "env": {},
    "headers": {
        "Accept": "application/json, text/plain, */*"
    },
    "baseURL": "/api",
    "params": {
        "id": null
    },
    "method": "get",
    "url": "/data-todo"
}

Can someone please guide me in proving what is needed. It should be noted that in the navigation console I get [MSW] Mocking enabled.

[Lee-Minhoon]

I am using React Query, Axios, and MSW together, and they work very well.

I also confirmed that the provided code works. (My React Query version is 4.36.1)

Please take a look at React Query’s network mode. In fact, depending on the network settings, React Query sometimes does not send network requests.

You can try that like this

function useGetData() {
  return useQuery({
    queryFn: () => getDataService(),
    queryKey: ["KEY"],
    networkMode: "always",
  });
}