[Tanstack Query] Next.js에서 Devtools가 사라지는 문제 해결

문제 발생

tanstack query hook을 만들어 사용하기 전 까진 문제 없이 devtools가 존재하다 hook을 사용하면 사라지는 문제가 발생했다!

Tanstack Query를 사용하기 위해 먼저
Provider를 만들어

<QueryClientProvider client={queryClient}>
    {children}
    <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

Root(next.js 14버전 기준 최상위 layout.ts)에 선언을 해줄 텐데

Bad 😨

만약 아래의 방법과 같이 TanstackQueryProvider안에 queryClient를 선언해줬다면 나와 같은 문제가 발생했을 것이라 생각한다.

'use client';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import React from 'react';

export default function TanstackQueryProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [queryClient] = React.useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            suspense: true,
          },
        },
      }),
  );

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

Good 😘

TanstackQueryProvider 밖에서 queryClient를 선언해주면 다시 devTools가 나타난다!

'use client';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import React from 'react';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
    },
  },
});

export default function TanstackQueryProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}