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

안녕하세요 재남님! getQueryClient 질문과 error 관련해서 질문 드립니다!

export const getClient = (() => {
  let client: QueryClient | null = null;

  return () => {
    if (!client) {
      client = new QueryClient();
      return client;
    }
  };
})();

getClient 함수 안에 client라는 변수를 선언하고 client가 없을시에만 new QueryClient()를 만들어주고 값을 반환한다 라고 이해했는데, 로직 중간에 return ( ) => {.....}이 해주는 역활이 정확이 무엇인지 궁금하고, getClient를 왜 즉시실행 함수로 작성하신건지 궁금합니다! (즉시실행을 하지않아도 다른 컴포넌트에서 useEffect안에 함수를 호출하면 되지않을까 하는 생각에 질문드렸어요!)

마지막으로 client type 지정 하실 때

new QueryClient(config?: QueryClientConfig | undefined): QueryClient 라고 되어있는 부분에서 QueryClient가 있어서 적어주신걸로 봤는데, new QueryClient의 반환 type이 QueryClient 라서 type지정을 해주신건지 궁금합니다!

Error

queryClient 만들고 실행하니 아래와 같은 error가 발생했습니다.

문제

렌더링이 되지 않고 Router 기능도 되지 않음

구글링 하고 적용해보았던 것

1. react-query 버전을 v4에서 다운그레이드 하였음

2. react와 react-dom 버전 다운그레이드 하였음

3. FunctionComponent 관련해서 react type(?)이 바뀐 부분이 있어서 https://github.com/TanStack/query/issues/3476 참조해서 index.t.ds 파일에 해당 내용 넣어주고 실행하였음

결론

1,2,3을 적용해도 아직 에러를 고치지 못했습니다..ㅜㅜ

package.json

{
  "name": "shopping-mall",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-query": "^3.34.16",
    "react-router-dom": "^6.3.0",
    "vite-plugin-next-react-router": "^0.6.2"
  },
  "devDependencies": {
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@vitejs/plugin-react": "^2.1.0",
    "typescript": "^4.6.4",
    "vite": "^3.0.0"
  }
}

App.tsx

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

const App = () => {
  const element = useRoutes(routes);
  const queryClient = getClient();

  return (
    <QueryClientProvider client={queryClient}>
      {element}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
};

export default App;