使用 React Hooks 使用 RTK 查询进行链式查询/变异调用

问题描述

在下面的示例中，我尝试使用 React 和 Redux Toolkit 创建一个简单的登录/身份验证组件。

const Login = () => {
    const dispatch = usedispatch();
    const [login,{ isLoading }] = useLoginMutation();
    const [loginData,setLoginData] = useState({
        email: '',password: '',});

    const loginHandler = async () => {
        try {
            const result = await login({
                email: loginData.email,password: loginData.password,}).unwrap();

            const { token,userId } = result;

            const { data } = await dispatch(
                backendApi.endpoints.getUser.initiate({ token,userId })
            );

            dispatch(
                setCredentials({
                    user: {
                        email: data.user.email,id: data.user.id,name: data.user.name,type: data.user.type,},token,})
            );
        } catch (err) {
            console.log(err);
        }
    };

    return (
        <Space>
            {isLoading ? (
                <SpinnerIcon />
            ) : (
                // setLoginData and loginHandler are set and used here
                // Standard React code: Input onChange -> setLoginData / Submit button onClick -> loginHandler
                // (nothing special,code shortened for the sake of readability)
                <FormWithEmailPasswordInputsAndButton />
            )}
        </Space>
    );
};

这很好用，问题是：

我想使用 isLoading 查询结果对象上的 getUser 属性，以便 <SpinnerIcon /> 组件在两个请求都完成之前可见。

实际上，spinnerIcon 组件仅在 login API 调用期间显示，因为我没有使用 React Hooks 来调用 getUser 查询，因此我没有 {来自 isLoading 的 {1}} 属性可用于组件的其余部分。

但是如果我想使用 React Hooks 进行调用，我需要事先获得 getUser 突变的结果。

login

我不知道该怎么做。一个接一个，这样我就可以同时使用这两个 const [getUser,{ isLoading: isUserLoading }] = useGetUserQuery(resultFromLoginMutation); 属性。

解决方法

您可以使用 skipToken 或 skip 选项：

const [login,{ isLoading,data: resultFromLoginMutation,isSuccess }] = useLoginMutation();
const [getUser,{ isLoading: isUserLoading }] = useGetUserQuery(resultFromLoginMutation,{ skip: !isSuccess });

或

const [login,data: resultFromLoginMutation }] = useLoginMutation();
const [getUser,{ isLoading: isUserLoading }] = useGetUserQuery(resultFromLoginMutation ?? skipToken);