[英]Make two consecutive fetches that depend on each other in Redux Toolkit
I am new to the new way of doing things in Redux and I am a little confused.我是Redux新的做事方式的新手,有点迷茫。
I want to call one API endpoint to get an account Id and a category Id.我想调用一个 API 端点来获取帐户 ID 和类别 ID。 Once I grab those, I want to make another request to another API endpoint to get a list of transactions.一旦我抓住了这些,我想向另一个 API 端点发出另一个请求以获取交易列表。
My createApi
function is like this:我的createApi
function是这样的:
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}`;
},
}),
};
},
});
The changesSince
param is just an ISO DateTime that I generate myself. changesSince
参数只是我自己生成的 ISO DateTime。
In my App.tsx
I have:在我的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;
Finally, in my TransactionsTable
component, I have:最后,在我的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;
I am not 100% sure of my approach.我不是 100% 确定我的方法。 I feel like I'm doing something wrong.我觉得我做错了什么。 I feel like I shouldn't be passing the account Id and category Id as props to the TransactionsTable
component.我觉得我不应该将帐户 ID 和类别 ID 作为道具传递给TransactionsTable
组件。 I feel like I should instead access those from the state directly, but I wasn't sure how.我觉得我应该直接从 state 访问那些,但我不确定如何访问。
Secondly, my fetching of the transactions should trigger and render on the page, but it isn't and again I'm not sure why.其次,我对交易的提取应该触发并在页面上呈现,但事实并非如此,我又一次不确定为什么。
I tried to use the skipToken
technique, like so:我尝试使用skipToken
技术,如下所示:
const { data, error, isSuccess } = useFetchTransactionsQuery({
accountId: props.accountId,
categoryId: props.categoryId,
changesSince,
}, skipToken);
But TypeScript was not happy, I got the error:但是 TypeScript 不高兴,我得到了错误:
Type 'unique symbol' has no properties in common with type 'UseQuerySubscriptionOptions & UseQueryStateOptions<QueryDefinition<{ accountId: string |类型“唯一符号”与类型“UseQuerySubscriptionOptions & UseQueryStateOptions<QueryDefinition<{ accountId: string | 没有共同的属性” undefined;不明确的; categoryId: string | categoryId: 字符串 | undefined;不明确的; changesSince: string |更改自:字符串 | undefined;不明确的; }, BaseQueryFn<string | }, BaseQueryFn<字符串 | FetchArgs, unknown, FetchBaseQueryError, {}, FetchBaseQueryMeta>, never, TransactionsEndpointResponse, "api">, UseQueryStateDef...'.ts(2559) FetchArgs、未知、FetchBaseQueryError、{}、FetchBaseQueryMeta>、从不、TransactionsEndpointResponse、“api”>、UseQueryStateDef...'.ts(2559)
However, nothing seems to have changed.然而,一切似乎都没有改变。 I don't get Number of transactions: <some number>
.我没有得到Number of transactions: <some number>
。 What am I missing?我错过了什么?
skipToken
should be passed in instead of the first parameter, like:应该传入skipToken
而不是第一个参数,例如:
useFetchTransactionsQuery(
someCondition ? realArgument : skipToken
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.