Typescript useQueries 類型（反應查詢）

Question

我有類似的東西：

// useMyList hook:

const allQueries = myList.map((myData) => {
  return {
    queryKey: ['myquerykey'],
    queryFn: myQueryFn
  }
}

return useQueries(buildQuery)

現在在我的組件中，我有：

const myData: any = useMyList()

const allQueriesSuccess: boolean = myData.every((result: any) => result.isSuccess)

來自 queryFunction 的響應數據將匹配已設置的名為IMyData的類型。 如何正確輸入myData和結果？ myData將是一個反應查詢標准響應數組，每個元素的data字段匹配IMyData 。

Answer 1

可以通過多種方式向data和error添加類型，加載狀態為boolean ，因此不需要提供類型，即isLoading不需要類型。 下面我調用了 API 來獲取一些數據，並為每種方法提供了類型——注釋在代碼中。

您可以從 https 的文檔中更詳細地了解這些工作原理的更多信息：//tanstack.com/query/v4/docs/react/typescript

import {
  useQuery,
  QueryClient,
  QueryClientProvider
} from "@tanstack/react-query";
import "./styles.css";
import axios from "axios";

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

const queryClient = new QueryClient();

function MyComponent() {
  const fetchTodo = (): Promise<Todo> =>
    axios
      .get("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.data);

  // data is inferred from fetch const, error is unknown
  const { data: inferredData, error: errorUnknown } = useQuery({ queryKey: ["todo"], queryFn: fetchTodo });
  
  // specify the error and data type as type param
  const { data: typedData, error: typedError } = useQuery<Todo, Error>({ queryKey: ["todo"], queryFn: fetchTodo });

  // runtime check errorUnknown is an error
  if (errorUnknown instanceof Error) {
    return <p>Woops!</p>
  }

  // trusting the type matches return value
  if (typedError) {
    return <p>{typedError.message}</p>
  }

  return (
    <div>
      <h1>useQuery</h1>
      <p>inferredData: {inferredData && inferredData.title}</p>
      <p>typedData: {typedData && typedData.title}</p>
    </div>
  );
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
}