CODEWITHSUNDEEP
reactjstypescriptreact-query
Emmanuel uzoezie
Emmanuel uzoezie

Reputation: 441

React app not working with react-query and typescript

am trying to use React-query and TypeScript in my React application but it not working, am get an Error: react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. i think the problem is from the latest upgrade. please could the error be coming from.

Here's my code

index file

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { QueryClient, QueryClientProvider } from 'react-query'
 
 const queryClient = new QueryClient()

ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
).render(
  
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
    <App />
    </QueryClientProvider>
  </React.StrictMode>
);

App file

function App() {
  return (
    <div className="App">
      GetStarted
    </div>
  );
}

export default App;

Upvotes: 0

Views: 725

Answers (1)

Mahmoud Ibrahiam
Mahmoud Ibrahiam

Reputation: 139

try to warp elements in App component, like that.

import { QueryClient, QueryClientProvider } from 'react-query'

export default function App() {
  const queryClient = new QueryClient()

  return (
    <QueryClientProvider client={queryClient}>
        <div className="App">Hello</div>
    </QueryClientProvider>
  );
}

Upvotes: -1

Related Questions