在Redux Toolkit中进行两次相互依赖的连续获取

Question

我对Redux中的新做事方式很陌生，我有点困惑。

我想调用一个API端点来获取帐户Id和类别Id。一旦我获取了这些Id，我想向另一个API端点发出另一个请求，以获取事务列表。

我的createApi函数如下：

export const accountApiSlice = createApi({
reducerPath: "api",
baseQuery: fetchBaseQuery({
prepareHeaders(headers) {
headers.set("authorization", token);
return headers;
},
}),
endpoints(builder) {
return {
fetchAccount: builder.query<AccountEndpointResponse, void>({
query() {
return `/accounts`;
},
}),
fetchTransactions: builder.query<
TransactionsEndpointResponse,
{ accountId: string; categoryId: string; changesSince: string }
>({
query({accountId, categoryId, changesSince}) {
return `feed/account/${accountId}/category/${categoryId}?changesSince=${changesSince}`;
},
}),
};
},
});

changesSince参数只是我自己生成的一个ISO DateTime。

在我的App.tsx中，我有：

function App() {
const { data, isSuccess } = useFetchAccountQuery();
let accountId = data?.accounts[0].accountUid;
let categoryId = data?.accounts[0].defaultCategory;
return ( 
<header className="App-header">
<p>Number of accounts fetched: {data?.accounts.length}</p>
<p>Account Id: {accountId}</p>
<p>Category Id: {categoryId}</p>
{ accountId && categoryId && <TransactionsTable accountId={accountId} categoryId={categoryId} /> }
</header>
);
}
export default App;

最后，在我的TransactionsTable组件中，我有：

import { skipToken } from "@reduxjs/toolkit/dist/query";
import moment from "moment";
import { useFetchTransactionsQuery } from "./accountApiSlice";
interface TransactionsProps {
accountId: string;
categoryId: string;
}
const TransactionsTable = (props: TransactionsProps) => {
const changesSince: string = moment().subtract(7, "d").toISOString();
const { data, error, isSuccess } = useFetchTransactionsQuery({
accountId: props.accountId,
categoryId: props.categoryId,
changesSince,
}, skipToken);
return (
<>
{isSuccess && (
<div>
<h1>Number of transactions: {data?.feedItems.length}</h1>
</div>
)}
{error && <p>{error.toString()}</p>}
</>
);
};
export default TransactionsTable;

我不能百分之百肯定我的方法。我觉得我做错了什么。我觉得我不应该将帐户Id和类别Id作为道具传递给TransactionsTable组件。我觉得我应该直接访问来自州政府的信息，但我不确定如何访问。

其次，我对事务的获取应该触发并在页面上呈现，但事实并非如此，我也不知道为什么。

我试着使用skipToken技术，就像这样：

const { data, error, isSuccess } = useFetchTransactionsQuery({
accountId: props.accountId,
categoryId: props.categoryId,
changesSince,
}, skipToken);

但是TypeScript不高兴，我得到了错误：

类型"唯一符号"与类型"UseQuerySubscriptionOptions&UseQueryStateOptions<查询定义<｛accountId:string|undefined；categoryId:string| undefineed；changesSince:string|undefine；｝，BaseQueryFn<string|FetchArgs，未知，FetchBaseQueryError，｛｝，FetchBaseQueryMeta>，never，TransactionsEndpointResponse，"；api">，UseQueryStateDef…'。ts(2559(

然而，一切似乎都没有改变。我没有Number of transactions: <some number>。我错过了什么？

Answer 1

skipToken应该在第一个参数的中传递，而不是，如：

useFetchTransactionsQuery(
someCondition ? realArgument : skipToken
)