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

To which component does your `useEffect` belong to? Is the component code properly pasted? If that's the only content of `setOrdersInMetafields` component, it may be breaking this rule: [Only Call Hooks from React Functions](https://reactjs.org/docs/hooks-rules.html), **not regular javascript functions** . `useSetMetafields` hook is called in regular JS function `setOrdersInMetafields`. — exaucae, Feb 06 '22 at 10:59
I've updated the code example for the component. So I'm calling the custom hook from a React component. That constitutes a "React Function" right? This code is not unlike I've done before. The only difference is that I've moved the useMutation to a custom hook in order to make my code more DRY. I want to reuse it in other Components. — Paul van den Dool, Feb 06 '22 at 11:04
Thanks for the update. [Always use Hooks at the top level of your React function](https://reactjs.org/docs/hooks-rules.html). 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 though. I'll share a proposal in the answer section. — exaucae, Feb 06 '22 at 11:08

exaucae · Accepted Answer · 2022-02-06T15:24:02.917

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
}
}

Ah I see what I did wrong. I shouldn't call the custom hook directly like that. This helped a lot. Thank you! — Paul van den Dool, Feb 06 '22 at 13:09

How to use Apollo useMutation in custom React hook

1 Answers1