Pass the state parameter set by useEffect to queryFn of RTK Query
P粉364642019
P粉364642019 2023-09-13 12:37:44
0
1
560

I pass the boolean parameter usingAsSignUp into queryFn.

Unfortunately, usingAsSignUp always results in undefined! How do I get its value? usingAsSignUp is the state set by useEffect in the using component.

RTK query createApi and queryFn:

export const firebaseApi = createApi({
  reducerPath: "firebaseApi",
  baseQuery: fakeBaseQuery(),
  tagTypes: ["Auth"], //Optional, https://redux-toolkit.js.org/rtk-query/api/createApi#tagtypes
  endpoints: (builder) => ({
    authenticateWithFirebase: builder.mutation({
      async queryFn({ email, password, usingAsSignUp }) {
        try {
          const auth = getAuth(firebaseApp);
          const userCredential = usingAsSignUp ? 
          await createUserWithEmailAndPassword(auth, email, password) : 
          await signInWithEmailAndPassword(auth, email, password);
          return {
            data: {
              uid: userCredential?.user?.uid,
              email: userCredential?.user?.email,
              usingAsSignUp: usingAsSignUp,
            },
          };
        } catch (e) {
          return { error: e };
        }
      },
      providesTags: ["Auth"], //Optional, https://redux-toolkit.js.org/rtk-query/api/createApi#providestags
    }),
  }),
});

export const { useAuthenticateWithFirebaseMutation } = firebaseApi;

Use useEffectUse components to set the state passed to queryFn:

import { useAuthenticateWithFirebaseMutation } from "../../persistence/apiSlices";

  const [signup, setSignup] = useState(true);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const location = useLocation();

  const [authenticateNow, result, data] = useAuthenticateWithFirebaseMutation();

  useEffect(() => {
    location.pathname === "/login" ? setSignup(false) : setSignup(true);
  }, [location.pathname] );

  async function onSubmitACB() {
    await authenticateNow({ email, password, signup });
  }

P粉364642019
P粉364642019

reply all(1)
P粉529245050

You are passing a boolean parameter usingAsSignUp to the authenticateWithFirebase mutation endpoint's queryFn, but it always results in undefined. This may be because you are not passing parameters from the component correctly.

To fix this error, you need to pass the usingAsSignUp value as a signup to the authenticateWithFirebase endpoint's queryFn in your firebaseApi Configuring.

await authenticateNow({ email, password, usingAsSignUp: signup });
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!