React Formik props isSubmitted with react-query do not take affect

user_7121272 0
Viewed 43

I have my Formik form below (I'm new with formik). An this is the simple form which have two fields and makes api call using react-query (react -query works well).

But the problem is that formik state isSubmitting do not take effect when click. (Button do not start spinning, but if it is direct true, it works well)

I wonder what i'm missing? Why it has no effect? and How it could be solved?

Api Call:

const createUser = async ({name, password}: Record<string, string>) => {
    return await axiosInstance.post(`users/create_user/`, {
        name: name,
        password: password,
    });
};

React-query Mutation:

const createNewUser = useMutation(createUser, {
        onSuccess: () => {
            queryClient.refetchQueries(["getAllUsers"])
        },

        onError: (newUser) => {
            console.log("onError", newUser);
        }

Formik Form:

<Formik
                initialValues={{ username: username, password: password }}
                validateOnChange={false}
                validateOnBlur={false}

                onSubmit={(values, {setSubmitting, resetForm }) => {
                    setSubmitting(true)
                    
                    createNewUser.mutate({

                        name: values.username,

                        password: values.password,
                    });

                    setSubmitting(false);
                    resetForm();

                }}
            >
                {({ values, errors, isSubmitting, handleSubmit }) => (
                    <form onSubmit={handleSubmit}>
                        <div>
                            <label
                                htmlFor="Имя"
                                className="block text-900 font-medium mb-2"
                            >

                            </label>
                            <Field
                                type="text"
                                name="username"
                                className="w-full mb-3"
                                as={InputText}
                            />
                            <Field
                                type="text"
                                name="password"
                                className="w-full mb-3"
                                as={InputText}
                            />

                        <Button
                            label="save new user"
                            icon="pi pi-user"
                            className="w-full"
                            type="submit"
                            loading={isSubmitting} // to not take effect? why?
                        />

                        </div>

                    </form>
react-query formik
1 Answers

Try using setTimeout, to setSubmitting(false) after few seconds not immediately like this:

setTimeout(() => setSubmitting(false), 2000);

Or, check if mutation is successfully executed, then setSubmitting to false

if(createNewUser.status == 'success' || createNewUser.status == 'error') {
   setSubmitting(false);
}

Alternatively, without using formik isSubmitting you can use createNewUser.isLoading

<Button
  label="save new user"
  icon="pi pi-user"
  className="w-full"
  type="submit"
  loading={createNewUser.isLoading} 
/>
user_134051060
Related