File "QueryProvider.tsx"

Full Path: /home/trinadezambia/public_html/student_panel/src/components/QueryProvider.tsx
File size: 1.06 KB
MIME-type: text/x-java
Charset: utf-8

'use client';

import { useState, useEffect } from 'react';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { queryClient } from '@/components/lib/queryClient';

// TanStack Query provider component
interface QueryProviderProps {
  children: React.ReactNode;
}

export default function QueryProvider({ children }: QueryProviderProps) {
  // Track if component has mounted on client side
  // This prevents hydration mismatch with ReactQueryDevtools
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    // Mark as mounted (client-side only)
    setIsMounted(true);
  }, []);

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      {/* DevTools only in development and after mount to prevent hydration mismatch */}
      {/* ReactQueryDevtools renders differently on server vs client */}
      {isMounted && process.env.NODE_ENV === 'development' && (
        <ReactQueryDevtools initialIsOpen={false} />
      )}
    </QueryClientProvider>
  );
}