Apollo useQuery hook on component mount

Question

I'm new to hooks and trying to use them more

How can I get data (with Apollo) when a component mount ?

I'm trying to use useQuery inside a useEffect, my code so far looks like this

const MyComponent = () => {
  const getME = () => {
      const { loading, error, data } = useQuery(ME);
      setMe(data.me) // useState hook
      console.log('query me: ', me);
  };

  useEffect(getME);
  return (<>
  ...
  </>)
}

but this gives me an error

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:

edit: this is the query

import { gql } from '@apollo/client';

export const ME = gql`
  query me {
    profile {
      firstName
      lastName
    }
  }
`;

Answer 1

Here is an example on how you should use the useQuery hook and then stock the data in the state

const { loading, data, error } = useQuery(SOME_QUERY)
const [state, setState] = React.useState([])

useEffect(() => {
  // do some checking here to ensure data exist
  if (data) {
    // mutate data if you need to
    setState(data)
  }
}, [data])`enter code here`

from https://github.com/trojanowski/react-apollo-hooks/issues/158