Comencé a usar ganchos personalizados en React, creando lo siguiente:

 export function useLazyHook({ onCompleted, onError }) { // Apollo const client = useApolloClient() /** * Use State */ const [loading, setLoading] = useState(false) const [data, setData] = useState(null) const [error, setError] = useState(null) /** * Method */ const CallMe = async ({ input }) => { // Loading setLoading(true) try { const data = await client.mutate({ mutation: MUTATION, variables: { Input: input, }, }) setLoading(false) setData(data) return { error: null, data: data } } catch (error) { setError(error) if (error.graphQLErrors) { setError(error.graphQLErrors[0]) return { error: error.graphQLErrors[0], data: null } } } } // Return return [{ loading, data, error }, CallMe] }

El gancho se puede usar de las siguientes maneras:

 const [{ loading, data, error }, CallMe] = useLazyHook({ onCompleted(res) { console.log(res) }, onError(err) { console.log(err) }, })

Podemos acceder a la carga, datos y error var las variables declaradas o dentro de onCompleted y onError. También podemos acceder a los mismos datos en línea a través de:

 const { error, data } = await CallMe({ input: {}, }) console.log(error) console.log(data)

Todo lo anterior funciona bien, sin embargo, si hay algo que me falta o que estoy haciendo incorrectamente, cualquier consejo es más que bienvenido.