Tanstack 查询 React 中的类型错误

Question

我是反应 tanstack 查询的新手，我正在构建一个待办事项列表应用程序来强化我正在学习的概念。待办事项来自 DummyJson API - https://dummyjson.com/docs/todos。响应数据对象有一些属性 - limit、skip、total 和一个在 types/index.ts 中定义的 todos 数组。

// types/index.ts
export type TodoType = {
    id: number;
    completed: boolean;
    todo: string;
    userId: number;
};

export type TodosType = {
    limit: number;
    skip: number;
    total: number;
    todos: TodoType[]; // Correctly defined as an array of Todo objects
};

在我的 lib 文件夹中，我有一个反应查询文件。

// lib/react.query.ts
import { QueryClient, DefaultOptions } from '@tanstack/react-query';

const queryConfig: DefaultOptions = {
  queries: {
    refetchOnWindowFocus: false,
  },
};

export const queryClient = new QueryClient({ defaultOptions: queryConfig });

我的 api 文件夹中正在使用它。

// api/getTodos.ts
import { useQuery } from '@tanstack/react-query';
import { axios } from '../lib/axios';
import { TodoType  } from '../types';

export const getTodos = (): Promise<TodoType[]> => {
  return axios.get('/todos');
}; 

export const useTodos = () => {
    return useQuery({queryKey: ['todos'], queryFn: () => getTodos()});
};

问题是，在我使用 useTodos 钩子的 TodoWrapper 中，在 console.log 中，我收到打字稿错误

Property 'todos' does not exist on type 'TodoType[]'.

这很奇怪，因为我确信 Todos 确实存在于 TodoType 中。

export const TodoWrapper = () => {
  const todosQuery = useTodos();

  if(todosQuery.isLoading) return <div>Loading...</div>

  if(!todosQuery.data) return null;

console.log(todosQuery.data.todos);

}

Answer 1

getTodos

实用程序返回待办事项数组

TodoType[]

。

export const getTodos = (): Promise<TodoType[]> => {

todoQuery.data

是

getTodos

（数组）的返回类型。没有

todoQuery.data.todos

。

console.log(todosQuery.data.todos); // ❌ there is no data.todos

console.log(todosQuery.data); // ✅ data is the output.

如果您想将

data

重命名为

todos

，您可以通过分配给函数或解构：

const todosQuery = useTodos();

const todos = todosQuery.data;

console.log(todos)