React part 2 Fatching data

React
1

I’m following the course as it is no variants at the moment and I’m component and I am encountering the following:

Error 1 on line 20: queryKey: [“todos”],

No overload matches this call.
The last overload gave the following error.
Object literal may only specify known properties, and ‘queryKey’ does not exist in type ‘readonly unknown[]’…
The last overload gave the following error.

Error 2 on line 28: {todos?.map((todo) => (
The error is:
Property ‘map’ does not exist on type ‘NonNullable’.

import axios from "axios";
import React, { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";

interface Todo {
  id: number;
  title: string;
  userId: number;
  completed: boolean;
}

const fetchTodo = () => {
  axios
    .get<Todo[]>("https://jsonplaceholder.typicode.com/todos")
    .then((res) => res.data);
};

const TodoList = () => {
  const { data: todos, error } = useQuery<Todo[], Error>({
    queryKey: ["todos"],
    queryFn: fetchTodo,
  });

  if (error) return <p>{error.message}</p>;

  return (
    <ul className="list-group">
      {todos?.map((todo: Todo) => (
        <li key={todo.id} className="list-group-item">
          {todo.title}
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

Does anybody have any idea what’s going on?

Thx

1 Like
2

Hi! I’m having the same issue. could you able to resolve this issue?

3

Hi! Came across the same issue here. I deleted the curly brackets in fetchTodos function then it worked fine:
const TodoList = () => {
const fetchTodos = () =>
axios
.get<Todo>(“https://jsonplaceholder.typicode.com/todos”)
.then((res) => res.data);

1 Like
4

Thank you! That was really helpful!

5

import axios from “axios”;
import React, { useEffect, useState } from “react”;
import { useQuery } from “@tanstack/react-query”;

interface Todo {
id: number;
title: string;
userId: number;
completed: boolean;
}

const fetchTodo = () => {
return axios
.get<Todo>(“https://jsonplaceholder.typicode.com/todos”)
.then((res) => res.data);
};

const TodoList = () => {
const { data: todos, error } = useQuery<Todo, Error>({
queryKey: [“todos”],
queryFn: fetchTodo,
});

if (error) return

{error.message}

;

return (


    {todos?.map((todo) => (

  • {todo.title}

    • ))}

);
};

export default TodoList;

If Possible use this code once and check