alternative of useEffect for react hooks

First, I run a graphql query and then use its results to render some items using the FlatList. This works fine.

On another screen, I run another mutation using apollos refetch option, such that whenever that mutation is successful, the first query will refetch data where ever it is used. The refetching part works fine and I have tested it on other screens. So automatically, the data in WhiteList is updated.

However the friendList is not updated so the FlatList doesn't get updated.

How can I fix this? useEffectcould have been an option but using the custom graphql hook inside it gives me invalid hook call error. What else can I do?

export const WhitelistBar: React.FC = () => {  const [friendList, setFriendList] = useState<Friend[]>();  const [originatorId, setOriginatorId] = useState<number>();  useEffect(() => {    //console.log('friendlist', friendList);  }, [useGetMyProfileQuery]);  const _onCompleted = (data) => {    console.log('running', data);    let DATA = data.me.friends.nodes.map(      (item: {        id: number;        firstName: string;        rating: number;        vehicles: Vehicle[];        friends: UserConnection;      }) => ({        id: item.id,        imageUrl: defaultUrl,        name: item.firstName,        rating: item.rating,        vehicles: item.vehicles,        numberOfFriends: item.friends.totalCount,            }),    );    setFriendList(DATA);    console.log('daattaaa', DATA);    setOriginatorId(data.me.id)  };  const _onError = () => {    let DATA = [      {        id: 1,        imageUrl: defaultUrl,        name: 'Friend',      },      {        id: 2,        imageUrl: defaultUrl,        name: 'Friend',      },      {        id: 3,        imageUrl: defaultUrl,        name: 'Friend',      },    ];    setFriendList(DATA);    setOriginatorId(0);  };  const { data } = useGetMyProfileQuery({    onCompleted: _onCompleted,    onError: _onError,  });  return (<View style={scaledStyles.container}><View style={scaledStyles.whiteListBarTitle}><Text style={scaledStyles.whiteListBarText}>Meine Freunde</Text></View><View style={{ flexDirection: 'row' }}><FlatList          showsHorizontalScrollIndicator={false}          data={friendList}          horizontal={true}          renderItem={({ item }) => (<WhitelistItem              title={item.name}              face={item.imageUrl}              numberOfFriends={item.numberOfFriends}              vehicles={item.vehicles}            />          )}          keyExtractor={(item) => item.id.toString()}        /></View></View>  );};