Use multiple hooks in the same component?

[advename]

A component can have multiple auto generated hooks:

import {
	useGetAllUsersQuery,
} from "./graphql/home.query.generated";
import { useCreateUserMutation } from "./graphql/home.mutation.generated";
export function Home() {
        // Get Users
   	const {
		data: users,
		loading: loadingUsers,
		error: errorUsers
	} = useGetAllAppUsersQuery({
		variables: { first: 1, page: 2 }
	});

	if (!loadingUsers) {
		console.log("All users", users);
	}

	// Mutation query with multi params
	const [
		createNewUser,
		{ data: createdUser, loading: loadingCreated, error: errorCreated }
	] = useCreateAppUserMutation();

	const handleClick = () => {
		createNewUser({
			variables: {
				email: "[email protected]"
			}
		});
		if (!loadingCreated) {
			console.log("Updated User", createdUser);
		}
	};
        
       // Check if loading true, else return the component.
        if(loadingCreated || loadingUser) return <p>Loading</p>
        return (...)
}

I would like to avoid using aliases for each query and mutation loading variable. It seems wrong to check for each loading value like in my above example. What is the recommended approach to use multiple generated hooks in a component?

[dotansimha]

It's not a question related to codegen. It's a general hooks usage.

You can avoid destructing and do:

	const getAllAppUsers = useGetAllAppUsersQuery({
		variables: { first: 1, page: 2 }
	});