如何仅在参数存在时使用查询，否则使用默认值

Question

只有当参数出现在屏幕上时，我才想从后台获取数据，如果参数不存在，我想让它使用默认数据。不确定如何在组件中有条件地使用查询。

这就是我的代码：

const emptyInfo: NewQuizInfo = {
title: "",
timePerQuestion: 3,
}
const [quizInfo, setQuizInfo] = useState<NewQuizInfo|QuizInfo>(emptyInfo);
const [saveQuizInfo, saveQuizInfoStatus] = useSaveQuizInfoMutation();
const quizInfoQuery = useGetQuizInfoQuery(route.params?.quizId);
useEffect(() => {
if (route.params?.quizId) {
// TODO: refetch ?
// assign query result to `quizInfo` ?
}
}, [route.params]);

我的用例是在同一个屏幕上编辑和创建字段。因此，如果没有参数发送到屏幕，我希望同一个对象包含新的测试数据，或者如果发送了参数，则包含从后端检索的测试。

上面的代码不起作用，因为参数(route.params(是可选的。我正在寻找一种发送useQueryHooknull并直接获得默认对象的方法，而不是通过BE进行请求。
正在寻找类似以下内容：

getQuizInfo: builder.query<QuizInfo, QuizId>({
query: (id) => id?`${id}`:null,
onQueryNull: () => emptyQuizObject
}),

有可能吗？

Answer 1

您想要使用；懒惰；版本的查询，这样它就不会试图直接获取内容，从而为您提供所需的控制级别。

对于lazy版本，您将返回一个包含2个内容的数组。第一个是回调，当使用变量调用时，它将发出网络请求。这也会回报一个承诺，这样你就可以对任何回报做出反应。第二个是你习惯的常见结果对象。它更类似于突变钩子的行为。

至关重要的是，与非懒惰版本不同，它不会在没有你告诉它的情况下直接提出请求，这让你可以做你需要的事情。

const emptyInfo: NewQuizInfo = {
title: "",
timePerQuestion: 3,
}
const [quizInfo, setQuizInfo] = useState<NewQuizInfo|QuizInfo>(emptyInfo);
const [saveQuizInfo, saveQuizInfoStatus] = useSaveQuizInfoMutation();
const [getQuizInfo, quizInfoQuery] = useGetQuizInfoLazyQuery();

useEffect(() => {
if (route.params?.quizId) {
getQuizInfo(route.params?.quizId).then(result => setQuizInfo(result.data))
}
}, [route.params]);

Answer 2

我认为skipToken在这种情况下很方便。这是文件。

import { skipToken } from "@reduxjs/toolkit/dist/query";
const emptyInfo: NewQuizInfo = {
title: "",
timePerQuestion: 3,
}
const [saveQuizInfo, saveQuizInfoStatus] = useSaveQuizInfoMutation();
const { data = emptyInfo, ...getQuizInfoStatus} = useGetQuizInfoQuery(route.params?.quizId ?? skipToken);