ReduxToolKit：在查询挂钩中使用 SelectFromResult 选项的正确方法？

Question

我试图从官方文档中了解如何正确使用 SelectFromResult：

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

我已经扩展了 Pokemon 示例，以使用 SelectFromResult 检索以“saur”结尾的经过过滤的 Pokemon 列表，但输出会导致错误丢失并且 isLoading 数据

实时沙箱： 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>
  );
};

我的问题：当尝试使用推荐的方法过滤结果时，我不想丢失获取状态。如何修改上述代码以正确选择 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,
  });