react-query中的queryFunction有什么區別？

Question

嗨，我是 react 和 react-query 的初學者。
下面的代碼，它工作正常！！

const { data, isLoading, isError, error } = useQuery("comments", () => {
    return fetchComments(post.id);
  });

它不工作。

const { data, isLoading, isError, error } = useQuery("comments", fetchComments(post.id))

這些有什么區別？

Answer 1

在第一種情況下，您提供了一個 function，它將調用fetchComments作為回調 function。 react-query 將獲取 function 並調用它，這將調用fetchComments

在第二種情況下，您正在運行 fetchComments function 並將返回值作為參數傳遞，並且 react-query 正在嘗試運行fetchComments將返回的任何內容，我假設它是 Promise 而不是 ZC1C4145268E17A945D

在某些特定情況下，您可以只傳遞 function 引用而不調用它，但是您將無法傳遞任何道具：

const { data, isLoading, isError, error } = useQuery("comments", fetchAllComments)

您的第一個解決方案是正確的。

和建議，您可以使用 Arrow function 而無需返回，對我來說它更具可讀性

const { data, isLoading, isError, error } = useQuery("comments", () => fetchComments(post.id));