I’m trying to figured out how to implement react-query in my react-native app. I’m executing a simple firebase login function from react-query mutation. Then in my signIn component I will call the mutation from a submit button. When I thought it was this simple, I’m keep getting “Error: Should have a queue. This is likely a bug in React. Please file an issue.” However, the code was able to reach the success part of the mutation. Any helps on this would be appreciated as there are only few guidances online that showcase the implementation of react-query with firebase.
These are the full errors:
Running "App" with {"rootTag":231,"initialProps":{}}
ERROR Warning: React has detected a change in the order of Hooks called by SignIn. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://react.dev/link/rules-of-hooks
Previous render Next render
------------------------------------------------------
1. useRef useRef
2. useState useRef
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
in SignIn (created by SignMain)
in RCTView (created by View)
in View (created by AnimatedComponent(View))
in AnimatedComponent(View)
in Unknown (created by SignMain)
in RCTView (created by View)
in View (created by AnimatedComponent(View))
in AnimatedComponent(View)
in Unknown (created by SignMain)
in RCTView (created by View)
in View (created by SignMain)
in RCTView (created by View)
in View (created by KeyboardAvoidingView)
in RCTView (created by View)
in View (created by KeyboardAvoidingView)
in KeyboardAvoidingView (created by SignMain)
in RCTScrollContentView (created by ScrollView)
in RCTScrollView (created by ScrollView)
in ScrollView (created by ScrollView)
in ScrollView (created by SignMain)
in SignMain (created by AuthNavigation)
in AuthNavigation (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in WithSplashScreen (created by App)
in App (created by AppWrapper)
in QueryClientProvider (created by AppWrapper)
in AppWrapper
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in App(RootComponent)
ERROR Error: Should have a queue. This is likely a bug in React. Please file an issue.
This error is located at:
in SignIn (created by SignMain)
in RCTView (created by View)
in View (created by AnimatedComponent(View))
in AnimatedComponent(View)
in Unknown (created by SignMain)
in RCTView (created by View)
in View (created by AnimatedComponent(View))
in AnimatedComponent(View)
in Unknown (created by SignMain)
in RCTView (created by View)
in View (created by SignMain)
in RCTView (created by View)
in View (created by KeyboardAvoidingView)
in RCTView (created by View)
in View (created by KeyboardAvoidingView)
in KeyboardAvoidingView (created by SignMain)
in RCTScrollContentView (created by ScrollView)
in RCTScrollView (created by ScrollView)
in ScrollView (created by ScrollView)
in ScrollView (created by SignMain)
in SignMain (created by AuthNavigation)
in AuthNavigation (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in WithSplashScreen (created by App)
in App (created by AppWrapper)
in QueryClientProvider (created by AppWrapper)
in AppWrapper
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in App(RootComponent), js engine: hermes
signIn.tsx
function SignIn() {
const signInMutation = authAPI_login;
const validationSchema = loginValidation;
type SignInFormSchema = z.infer<typeof validationSchema>;
const {control, handleSubmit, setFocus} = useForm<SignInFormSchema>({
defaultValues: loginFormData,
resolver: zodResolver(validationSchema),
});
const onSubmit = async (data: any) => {
signInMutation.mutate({
email: data.email,
password: data.password,
});
};
return (
<View style={styles.rootContainer}>
<View style={styles.inputContainer}>
<TxtInput
height={40}
width={300}
control={control}
name="email"
placeholder="Email"
inputMode="email"
nextFocus={true}
isLoading={false}
secureTextEntry={false}
setNextFocus={() => {
setFocus('password');
}}
/>
</View>
<View style={styles.inputContainer}>
<TxtInput
height={40}
width={300}
control={control}
name="password"
placeholder="Password"
inputMode="text"
isLoading={false}
secureTextEntry={true}
/>
</View>
<Button
height={40}
width={300}
outline={true}
isListening={true}
isLoading={false}
// onPress={handleSubmit(onSubmit)}
onPress={() => {return onSubmit('test') }}
>
Sign In
</Button>
</View>
);
}
api.tsx
export async function authSV_login(email: string, password: string) {
return auth()
.signInWithEmailAndPassword(email, password)
.then((auth) => {
return true
})
.catch(error => {
if (error.code === 'auth/email-already-in-use') {
console.log('That email address is already in use!');
}
if (error.code === 'auth/invalid-email') {
console.log('That email address is invalid!');
}
return false
});
}
export const authAPI_login = useMutation({
mutationFn: ({ email, password }: {email: string, password: string}) => authSV_login(email, password),
onSuccess: async (data) => {
console.log('success', data);
},
onError: async (error) => {
console.log('error', error);
},
})
