React还原：如何处理RTK查询/突变 typescript 中的错误？

xn1cxnb4 于 2023-03-13 发布在 TypeScript

关注(0)|答案(3)|浏览(178)

希望你们一切都好。
我使用的RTK突变Typescript一切都工作良好，但如果我发送任何错误，从后端在特定的JSON格式，如

{ 
   status: "Error",
   message "Something went wrong"
}

当我检查我的浏览器网络选项卡时，它会向我显示正确的错误响应，如：

{
   data: { 
      status: "Error",
      message "Something went wrong"
    }
}

我在变异钩子中得到错误：

const [createCategory, {isLoading, error }] = useCreateCategoryMutation();

但我无法访问错误。数据。消息在我的React，它是给我类型的错误，如：

Property 'data' does not exist on type 'FetchBaseQueryError | SerializedError'.

typescript

来源：https://stackoverflow.com/questions/70017789/react-redux-how-to-handle-errors-in-rtk-queries-mutation-typescript

3条答案

按热度按时间

o7jaxewo1#

此时，它可能是来自服务器的错误（FetchBaseQueryError），也可能是您编写的代码引发的任何错误（SerializedError，例如query、queryFn、transformResponse等）-而且可能具有完全不同的形式。
要确保它是FetchBaseQueryError，只需执行以下操作

if ('data' in error) {
  // TypeScript will handle it as `FetchBaseQueryError` from now on.
}

赞(0）回复(0）举报 2023-03-13

bnl4lu3b2#

我在这里找到了你的问题的答案，也是由Phry写的：），
https://github.com/rtk-incubator/rtk-query/issues/86#issuecomment-738845312
如果您知道从服务器返回的所有非2xx状态响应的格式，则可以直接将

fetchQuery as BaseQueryFn<string | FetchArgs, unknown, YourErrorType, {}>.

赞(0）回复(0）举报 2023-03-13

9udxz4iz3#

我最终在组件本身中解决了这个问题。在我的情况下，我需要错误类型为Record<string, string>

// In the component arrow function where I use the RTK Query hook
const [register, { error }] = useRegisterMutation();
const errors = (): Record<string, string> => {
    if (error && (error as Record<string, string>)) {
      return error as Record<string, string>;
    } else {
      return {};
    }
  };

// In the rest of the code, I can just call
errors().propertyName // and check if it is undefined where I need to

我不认为这是理想的，但没有找到更好的工作，目前为止

赞(0）回复(0）举报 2023-03-13

我来回答

React还原：如何处理RTK查询/突变 typescript 中的错误？

3条答案

相关问题

热门标签

最新问答