So, I've been searching the internet for an example of a react-query function called outside the body of the function component; however, I was unable to find a sample.
I have a query type of GraphQL, and I am waiting for a value from the form that I could pass on. So I needed to call it inside the onSubmit function of Formik.
I have generated my hooks with GraphQL Codegen. Since we cannot call the react-hooks outside the function, I am uncertain how I can do this.
So, this is my react-hook for the query
const [{ data, fetching, stale, error, extensions, operation }] = useForgotPasswordQuery({ variables: { email: "value from the form" } });
Unlike with the mutation, it returns a function wherein I could use to call outside the function.
const [, forgotPassword] = useForgotPasswordMutation();
...
<Formik initialValues={{ email: '' }} onSubmit={async (values, { setErrors }) => {
const response = await forgotPassword({ email: values.email });
}}>
I'd like to know on this use case, I cannot use query type? Or this is a way that I am unaware.
I've read here in the Stackoverflow that the convention:
Query — for querying data (SELECT operations)
Mutation — for creating new and updating/deleting existing data (INSERT, UPDATE, DELETE)
In a way, this convention makes sense to me and I want to implement it. So I am trying to do it using the query rather than the mutation.
