React query with react hook form

[Walber10]

Hey guys I have a query that gets a user by email when the form is submitted
should I use useState to handle this?
I also have queries which depend of another query

const { data: userAuth, refetch: refetchCreateUserAuth } = useQuery(
[queryKeys.publicUser, signInFormSubmit],
() => signInFormSubmit && createUserAuth(signInFormSubmit)
);

const { data: userStores } = useQuery(
queryKeys.stores,
() => userAuth && fetchUserStores()
);

const { data: merchantSession } = useQuery(queryKeys.publicUser, () => {
if (userStores && userStores.length === 1) {
return merchantLogin(userStores[0].id);
}
});

const onFormSubmit = (data: SignInWithPasswordData) => {
setSignInFormSubmit(data);
refetchCreateUserAuth().then(() => {
if (userAuth) {
setUserAuthenticated(userAuth.access_token, data.email);
if (merchantSession) {
setMerchantAuthenticated(
merchantSession.session_token,
merchantSession.shop
);
navigate(Path.MERCHANT_DASHBOARD);
}
if (userStores && userStores.length > 1) {
navigate(Path.MERCHANT_STORES);
}
}
});
};

[louis-young]

Hi 👋

Hey guys I have a query that gets a user by email when the form is submitted
should I use useState to handle this?

TanStack Query manages asynchronous state for you. If you need to derive state from the state of the query then you can, although it's usually better avoided.

I also have queries which depend of another query

You can express dependent queries with the enabled option. Please see: https://tanstack.com/query/v4/docs/react/guides/dependent-queries

Also, it looks like you might be using a query to perform a mutation (signing in), although it's hard to reason about your implementation given the unformatted example and lack of context.

[Walber10]

Thanks for your help louis,
what about in this case below where I have a form to submit,as Hooks can only be called inside of the body of a function component, Do I have to create a local state to set the form value and them pass to useQUery ?

` const [getStartedForm, setGetStartedForm] =
React.useState();

const { data: publicUser } = useQuery({
queryKey: queryKeys.PUBLIC_USER,
queryFn: () => getStartedForm && getPublicUser(getStartedForm.email),
enabled: getStartedForm !== undefined,
});

useEffect(() => {
if (publicUser?.has_password) {
navigate(Path.AUTH_USER_SIGN_IN);
}
}, [publicUser, getStartedForm]);

return (
<PageWithPanel
desktopPanel={



}
wrapContentInPaper={true}
bgProps={{ backgroundVariant: BackgroundVariant.Magic }}
>

<GetStartedForm
getStartedText="Enter your email address"
showSignInHavingTrouble={false}
onSubmit={(data) => setGetStartedForm(data)}
toSignInWithStore={() => navigate(Path.AUTH_STORE_SIGN_IN)}
/>


);
};`

[louis-young]

Yes, hooks need to be called unconditionally at the top level. Requests made as a result of a form submission are often mutations that are easily triggered from within an event handler but if this is actually a query then deferring the dependent state update is a valid approach 👍

I also think you might benefit from reading https://tkdodo.eu/blog/effective-react-query-keys and https://tanstack.com/query/v4/docs/react/guides/dependent-queries.

I'm going to mark this as answered. Feel free to reach out if you need further support 🙂