How to use Apollo useMutation in custom React hook

Question

I'm still having issues with wrapping my head around Hooks. I constantly run into issues where it complains I'm doing an Invalid hook call.
This time, it's when trying to use the useMutation hook from Apollo inside a custom hook.
I'd appreciate if someone can tell me what I'm doing wrong.

Component (where I'm calling my custom hook)

export default function MyComponent() {

    const { loading, error, data } = useQuery( GET_ORDERS );

    const setOrdersInMetafields = ( orders: Array<OrderModel> ) => {
        metafieldResp = useSetMetafields( { customerId, value: orders, field: 'duplicateOrders' } );
    }

    @useEffect( () => {
        setOrdersInMetafields( orders );
    }, [ orders ] );
}

Custom hook

export const useSetMetafields( { customerId, value, field }, { customerId: string, value: any, field: string } ) => {
    [ updateMetafield, { loading, error, data } ] = useMutation( SET_METAFIELD_ON_CUSTOMER );

    useEffect( () => {
        onUpdateMetafield();
    }, [] );

    const onUpdateMetafield = () => {
        updateMetafield( {
            variables: {
                input: {
                    id: customerId,
                    metafields: [
                        {
                            namespace: 'app-name',
                            key: field,
                            value: JSON.stringify( value ),
                            type: 'string'
                        }
                    ]
                }
            }
        } );
    }
}

Resulting error:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Answer 1

Always use Hooks at the top level of your React function. You should call useSetMetafields right up next to useQuery. To make your code work, you'll need to change the aspect of your custom hook. My proposal, with the amount of code you've provided:

export default function MyComponent() {
    const { loading, error, data } = useQuery( GET_ORDERS );
    { doUpdateMetaField } = useSetMetafields();

  const setOrdersInMetafields = ( orders: Array<OrderModel> ) => {
// Make doUpdateMetaField function return something if you need and collect it here
       doUpdateMetaField( { customerId, value: orders, field: 'duplicateOrders' } );
    }
    useEffect( () => {
        setOrdersInMetafields( orders );
    }, [ orders ] );
}

export const useSetMetafields = () => {
    [ updateMetafield, { loading, error, data } ] = useMutation( SET_METAFIELD_ON_CUSTOMER );

    const doUpdateMetaField = ({ customerId, value, field }, { customerId: string, value: any, field: string } ) => {
        updateMetafield( {
            variables: {
                input: {
                    id: customerId,
                    metafields: [
                        {
                            namespace: 'app-name',
                            key: field,
                            value: JSON.stringify( value ),
                            type: 'string'
                        }
                    ]
                }
            }
        } );
    }

return {
   doUpdateMetaField
}
}