rtk 查询 ts 错误 jwt 在类型上不存在

Question

为什么我会收到此错误消息？

Property 'jwt' does not exist on type '{ data: IAuthResponse; } | { error: FetchBaseQueryError | SerializedError; }'.
  Property 'jwt' does not exist on type '{ data: IAuthResponse; }'.ts(2339)

我使用 RTK 查询并希望处理我的回复：

Query.tsx

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { IAuthLoginForm } from '../../../components/Login/Model';
import { IAuthResponse } from './Model';

export interface IAuthResponse {
  jwt: string;
  name: string;
  username: string;
  profile_name: string;
}

export const AuthFlow = createApi({
  reducerPath: 'AuthFlow',
  baseQuery: fetchBaseQuery({ baseUrl: 'http://192.168.0.249:4000/' }),
  endpoints: (builder) => ({
    login: builder.mutation<IAuthResponse, IAuthLoginForm>({
      query: (form) => ({
        url: '/login',
        method: 'POST',
        body: form
      })
    })
  })
});

export const { useLoginMutation } = AuthFlow;

Home.tsx

...
const [register, { data, error, isLoading }] = useLoginMutation();

const Submit = () => {
 const response = await register('test');
 
 if(response.jwt) {
   // ERROR above jwt not exists on property
 }
};

为什么我想访问 .jwt 时会出现此错误？我在我的模型中使用它.. 谁能帮我解决这个问题？

Answer 1

来自 RTK 查询文档：

The "mutation trigger" is a function that when called, will fire off the mutation request for that endpoint. Calling the "mutation trigger" returns a promise with an unwrap property, which can be called to unwrap the mutation call and provide the raw response/error. This can be useful if you wish to determine whether the mutation succeeds/fails inline at the call-site.

这里的变异触发器是 register，因此要使用 rtk 查询从你的响应中访问数据，你应该使用以下方法之一：

const Submit = async (data: IAuthLoginForm) => {
 // note the unwrap here, you always use it to get the data
 await register(data).unwrap().then((response) => {
   // Handle the response here
   console.log(response)
 });
};

或者使用useEffect hook获取响应数据

const Submit = (data: IAuthLoginForm) => {
 register(data)
};

useEffect(() => {
   // use the const data to get the response
   console.log(data)
}, [data])

要处理错误，您可以像这样调用嵌套到 .then 的 .catch：

const Submit = async (data: IAuthLoginForm) => {
 await register(data).unwrap().then((response) => {
   // Handle the response here
   console.log(response)
 }).catch((error) => {
   // Handle the error here
   console.log(error)})
};

或者您可以在 useEffect 中使用 useLoginMutation 中的 const 错误，就像我对 const data:

useEffect(() => {
   // use the const error to get the error
   console.log(error)
}, [error])

最后一件事，要将数据正确发送到服务器，来自提交的数据应该与您在 builder.mutation<IAuthResponse, IAuthLoginForm>

中定义的数据类型相同

所以你在这里也有两种方法：

const Submit = async (data: IAuthLoginForm) => {
 // send the same data type from submit and just pass to register
 await register(data).unwrap().then((response) => {
   // Handle the response here
   console.log(response)
 });
};

或者像这样分别传递每个数据进行注册：

const Submit = async (data: IAuthLoginForm) => {
 // note that i used an example here because i don't know how your interface IAuthLoginForm looks like
 await register({data1: data.data1, data2: data.data2 }).unwrap().then((response) => {
   // Handle the response here
   console.log(response)
 });
};

一些关于解包和突变的参考：Frequently Used Mutation Hook Return Values

rtk 查询 ts 错误 jwt 在类型上不存在

rtk query ts error jwt does not exists on type

typescript

react-native

redux

expo

redux-toolkit