Цепочка вызовов запросов / мутаций с помощью RTK Query с использованием React Hooks

Question

В приведенном ниже примере я пытаюсь создать простой компонент входа / аутентификации с помощью 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>
    );
};

Это работает нормально, проблема в том, что:

Я хочу использовать свойство объекта результата запроса, чтобы <SpinnerIcon /> Компонент будет виден, пока оба запроса не будут выполнены.

Как бы то ни было, spinnerIcon компонент отображается только во время вызова API, потому что я не использую React Hooks для вызова запроса, поэтому у меня нет свойства из getUser доступны для остальной части компонента.

Но если я хочу использовать React Hooks для вызова, мне понадобится результат login мутация заранее.

const [getUser, { isLoading: isUserLoading }] = useGetUserQuery(resultFromLoginMutation);

И я не знаю, как это сделать. Один за другим, так что я могу использовать оба isLoading характеристики.

Answer 1

Ты можешь использовать skipToken или skip вариант:

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

или же

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