ReduxToolKit:在查询钩子中使用SelectFromResult选项的正确方法?

Question

我想了解如何正确使用SelectFromResult从官方文档:

https://redux-toolkit.js.org/rtk-query/usage/queries selecting-data-from-a-query-result

我已经扩展了口袋妖怪的例子，以检索以";saur"结尾的口袋妖怪的过滤列表。使用SelectFromResult，但输出导致丢失错误和isLoading data

live sandbox here:https://codesandbox.io/s/rtk-query-selectfromresult-vvb7l

相关代码:

端点使用transformResponse提取出相关数据:

getAllPokemon: builder.query({
query: () => `pokemon/`,
transformResponse: (response: any) => {
console.log("transformResponse", response);
return response.results;
}
})

和钩子失败，如果我尝试selectFromResult，我失去了错误和isLoading变量，因为它们不再从钩子返回。如果我注释掉SelectFromResult选项，它们就会正确返回。

export const PokemonList = () => {
const { data, error, isLoading } = useGetAllPokemonQuery(undefined, {
selectFromResult: ({ data }) => ({
data: data?.filter((item: Pokemon) => item.name.endsWith("saur"))
})
});
useEffect(() => {
if (data) console.log("filtered result", data);
}, [data]);
return (
<div>
{data?.map((item: Pokemon) => (
<p>{item.name}</p>
))}
</div>
);
};

我的问题:当尝试使用推荐的方法过滤结果时，我不想失去fetch状态。我如何修改上面的代码正确的SelectFromResult和维护正确的错误，isLoading等状态值从钩子?

Answer 1

解决方案找到:

我传入并返回了额外的所需变量(并通过添加轮询间隔来测试，以允许我断开强制和错误)

const { data, error, isLoading } = useGetAllPokemonQuery(undefined, {
selectFromResult: ({ data, error, isLoading }) => ({
data: data?.filter((item: Pokemon) => item.name.endsWith("saur")),
error,
isLoading
}),
pollingInterval: 3000,
});