I am trying to use a react query hook I made to make a request to mock data using json-server, but when the call is made it just returns an html document. I am trying to figure out what I did wrong, so any help would be appreciated. My code is below. I console logged the response also
Console logged response from hook call
clients: <!doctype html>
<html lang="en">
<head>
<script type="module">
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>
<script type="module" src="/@vite/client"></script>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FlowSwift POC</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx?t=1716566140428"></script>
</body>
</html>
Hook file
import { useQuery } from "@tanstack/react-query";
import { api, queryClient } from "@/services/api";
import { ClientType } from "./types";
const endpoint = "client";
export const baseClientQueryKey = "client";
export const useGetClients = () =>
useQuery<ClientType[]>({
queryKey: [baseClientQueryKey],
queryFn: async () => api.get(endpoint),
});
API file
import axios from 'axios';
import { QueryClient} from '@tanstack/react-query';
export const queryClient = new QueryClient();
export const baseURL ='http://localhost:5174';
export const baseHeaders = {};
export const api = axios.create({
baseURL
});
api.interceptors.response.use(
function (response) {
return response.data
},
function (error) {
return Promise.reject(error);
}
)
Mocks Data index.ts file
import axios from 'axios';
import { QueryClient} from '@tanstack/react-query';
export const queryClient = new QueryClient();
export const baseURL = Boolean(import.meta.env.VITE_MOCK) ? 'http://localhost:5174' : 'http://localhost:8098';
export const baseHeaders = {};
export const api = axios.create({
baseURL
});
api.interceptors.response.use(
function (response) {
return response.data
},
function (error) {
return Promise.reject(error);
}
)
Mocks Data index.cjs file
const jsonServer = require("json-server");
const clientMock = require("./data/clientMock.json");
const serverPort = 5174;
/**
*
* @param {MockServerConfig} config
*
*
* @throws {Error}
*/
export const startMockServer = () => {
try {
const mockServer = jsonServer.create();
/* Add mock data entities here */
const router = jsonServer.router({
client: clientMock,
});
const middleware = jsonServer.defaults();
mockServer.use(middleware);
mockServer.use(
jsonServer.rewriter({
"/*": "/$1",
"/client/:clientId": "/client?clientId=:clientId",
})
);
mockServer.use(router);
mockServer.listen(serverPort, () => {
console.log(`JSON Server is running on http://localhost:${serverPort}/`);
});
} catch (error) {
if (error instanceof Error) {
console.log(error.message);
} else {
console.log("createMockServer failed", error);
}
}
};
startMockServer();
Client Mock Data
[
{
"clientId": "123",
"clientName": "Client 1",
"clientStatus": "LEAD"
},
{
"clientId": "456",
"clientName": "Client 2",
"clientStatus": "CURRENT"
},
{
"clientId": "789",
"clientName": "Client 3",
"clientStatus": "COLD"
}
]
Component calling hook
import { useGetClients } from "@/services/client/clientServiceHooks";
export const ClientsTable = () => {
const { data: clients } = useGetClients();
console.log("clients: ", clients);
return <div>ClientsTable</div>;
};
New contributor
Jon Jackson is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.