Unable to set up react-query correctly?

user_18863015 0
Viewed 255

Ok, this question isn't precise but I can't think of a better way to put it: react-query is just not behaving as expected. I have created a minimal example which keeps as close to the documentation as possible to exclude all other possible sources of errors. In the example, I'm rendering two components, one tries to use react-query and the other plain old useEffect and useState hooks.

import ReactDOM from 'react-dom/client';
//the import from react-query is where the first error appears: 'Could not find a declaration file for module 'react-query'.' I fixed it by creating a .d.ts file, but have the feeling it has something to do with the library not working 
import {useQuery, QueryClient, QueryClientProvider} from 'react-query';
import { useEffect, useState } from 'react';

function App() {
  const queryClient = new QueryClient();
  return (
    <QueryClientProvider client={queryClient}>
        <h1>Todos</h1>
        {/* this one tries to use react-query, unsuccessfully */}
        <Todos />
        {/* this one uses useState and useEffect, works as expected */}
        <Todos2 />
    </QueryClientProvider>
  );
}
export default App;

Nothing unusual apart from requiring a declaration file. But it does get weird in this component:

function Todos() {
  const query = useQuery('todos', async () => {
    const res = await fetch('http://localhost:5555/todos');
    return res.json()
  })
  
  console.log('query results: ', query)
  return (
    <ul className='todos'>
      {
        query.data && query.data.map(todo => (
        <li key={todo.name}>{todo.name}</li>
      ))}
   </ul>)
}

running this will only render an error of "Missing queryFn". Even after following every tutorial I could find, there wasn't a function that was accepted by useQuery. For comparison, this Component works perfectly fine:

function Todos2() {
  const [todos, setTodos] = useState(null);
  useEffect(() => {
    fetch('http://localhost:5555/todos')
      .then(data => data.json())
      .then(data => setTodos(data))
  }, [])
  return (
    <ul className='todos'>
      {
        todos && todos.map(todo => (
        <li key={todo.name}>{todo.name}</li>
      ))}
   </ul>)
}

I'm at my wits' end and can't think of anything I could still try to make this work. It's likely that I forgot something absolutely elementary, but I just can't find it. I'd really appreciate any pointers in the right direction. I've put the example on Github in case you want to see the full code: https://github.com/ThemisDaughter/example-react-query (npm start should get the application running) Also, the versions I am using are react 18.2.0 and react-query 4.0.0.

react-query reactjs fetch-api version
1 Answers

I believe that in react query 4 the query key needs to be an array? anyway that's how i would write the query in your component, also you should take this line const queryClient = new QueryClient() out of your app component, maybe just put it above it

const fetchTodos = async () => {
    const res = await fetch('http://localhost:5555/todos');
    if(res.ok){
        return res.json()
    }
    else {
        throw new Error(`Error: ${res.status} ${res.statusText}`);
    }
}

function Todos() {
    const query = useQuery(['todos'], fetchTodos)
    return (
        <ul className='todos'>
            {
                !!query.data && query.data.map(todo => (
                <li key={todo.name}>{todo.name}</li>
            ))}
        </ul>)
}
user_178988010
Related