How to use RTK query under useEffect?

user_11151389 0
Viewed 3950

I have a situation where I tried to fetch data when user login , and my structure is I have two redux slice one is userData other one is UserCartData and

  1. when user login ,if login success ,
  2. then I will dispatch data into UserData , 3, then I write a useEffect to check if there's userData ,
  3. I will then fetch UserCartData with UserData

But the thing is I can't get useGetxxxQuery work under useEffect,here's my code

const Login = () => {
  const user = useAppSelector(state=> state.auth);
  const dispatch = useAppDispatch();
  const [login] = useLoginMutation();
  const [showPassword,setShowPassword] = useState<boolean>(false);
  useEffect(() => {
    if (user!==null){ //fecth userCart data with userData
      const {data ,isLoading,isFetching }= useGetCartByIDQuery(user.user?._id!)
    }
  }, [dispatch])
  return (
    <Container>
      <Wrapper>
        <Title>SIGN IN</Title>
        <Formik
          initialValues={{ email: "", password: "" }}
          validationSchema={Yup.object({
            password: Yup.string()
              .min(8, 'Must be 8 characters or higher')
              .required(),
            email: Yup.string().email('Invalid email address').required(),
          })}
          onSubmit = {  async (values, actions) => {
                try{
                  const result = await login(values);
                  if("data" in result){
                    //console.log(result.data.data)
                    dispatch(setCredentials({user:result.data.data.findUser,token:result.data.data.cookie}))
                    
                  }else{
                    const err = (result.error as RequestError).data.message
                    if(err.includes("password")){
                      actions.setErrors({password:err})
                    }else if(err.includes("Facebook")){
                      actions.setErrors({email:err})
                    }
                  }
                }catch(err){
                  console.log(err)
                }             
          }}>
          //....unrelevant code
rtk-query react-redux reactjs
2 Answers

You don't need a useEffect here, you can simply use skipToken:

import {skipToken} from '@reduxjs/toolkit/query'

const {data, isLoading, isFetching } = useGetCartByIDQuery(user.user ? user.user._id : skipToken)
user_20759440

You can not use hooks inside other hooks. It is a rule!!!
Source: https://reactjs.org/docs/hooks-rules.html
Instead of this you can change useGetCartByIDQuery hook and use only a function from there: ex: const { startFetch } = useGetCartByIDQuery

useEffect(() => {
  startFetch('your arguments')
}, [])

user_125405000
Related