Pass the state parameter set by useEffect to queryFn of RTK Query

Question

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 });
  }

Answer 1

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 });