인프런 커뮤니티 질문&답변

Unexpected Application Error!

No QueryClient set, use QueryClientProvider to set one

Error: No QueryClient set, use QueryClientProvider to set one
    at useQueryClient (http://localhost:3000/node_modules/.vite/deps/chunk-PPRRYNMJ.js?v=afce5f27:2826:11)
    at useBaseQuery (http://localhost:3000/node_modules/.vite/deps/chunk-PPRRYNMJ.js?v=afce5f27:3003:23)
    at useQuery (http://localhost:3000/node_modules/.vite/deps/chunk-PPRRYNMJ.js?v=afce5f27:3051:10)
    at ProductList (http://localhost:3000/src/pages/products/index.tsx?t=1694339505145:26:7)
    at renderWithHooks (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:12169:26)
    at mountIndeterminateComponent (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:14919:21)
    at beginWork (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:15900:22)
    at beginWork$1 (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:19747:22)
    at performUnitOfWork (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:19192:20)
    at workLoopSync (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:19131:13)

import { Suspense, useEffect } from "react";
import { getClient } from "./queryClient";
import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { routes } from "./routes";
import { useRoutes } from "react-router-dom";

const App = () => {
	const elem = useRoutes(routes);
	const queryClient = getClient();
	console.log("QueryClient:", queryClient); //

	useEffect(() => {
		console.log("QueryClientProvider is mounted.");
	}, []);
	return (
		<QueryClientProvider client={queryClient}>
			<Suspense fallback={<div>Loading...</div>}>{elem}</Suspense>
			<ReactQueryDevtools initialIsOpen={false} />
		</QueryClientProvider>
	);
};
export default App;

import React from "react";

export const DynamicIndex = React.lazy(() => import("./pages/index"));
export const DynamicProductsIndex = React.lazy(() => import("./pages/products/index"));
export const DynamicProductsId = React.lazy(() => import("./pages/products/[id]"));

import GlobalLayout from "./pages/_layout";
import * as Lazy from "./Lazy";

export const routes = [
	{
		path: "/",
		element: <GlobalLayout />,
		children: [
			{ path: "/", element: <Lazy.DynamicIndex />, index: true },
			{ path: "/products", element: <Lazy.DynamicProductsIndex />, index: true },
			{ path: "/products/:id", element: <Lazy.DynamicProductsId /> },
		],
	},
];

export const pages = [{ route: "/" }, { route: "/products" }, { route: "/products/:id" }];

queryclient와 queryprovider를 잘 설정한것 같은데 에러가 발생하고 있습니다. 거의 4시간 가까이 찾아본것 같습니다.. Lazy부분은 따로 분리를 안하면 경고를 띄워서 분리를 했습니다. 이리저리 만져서 tool도 안뜨는걸 뜨게 했는데 저 에러는 도저히 해결이 안되네요 ... https://github.com/littleduck1219/Web_Toy_Project/tree/main/shopping-mall