alternative of useEffect for react hooks

Question

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

Edit:

I also tried this but this renders nothing for now:

 const showFlatList = (friendList: Friend[] | undefined) => {
    return (
      <FlatList
        showsHorizontalScrollIndicator={false}
        data={friendList}
        horizontal={true}
        scrollEnabled
        renderItem={({ item }) => (
          <WhitelistItem
            title={item.name}
            face={item.imageUrl}
            firstName={item.name}
            rating={item.rating}
            numberOfFriends={item.numberOfFriends}
            vehicles={item.vehicles}
            originatorId={originatorId}
          />
        )}
        keyExtractor={(item) => item.id.toString()}
      />
    );
  };
  useEffect(() => {
    showFlatList(friendList);
  }, [useGetMyProfileQuery]);

and this in the main return instead of the FlatList:

 {data && showFlatList}

Also, tried this but Argument of type '(DATA: any) => void' is not assignable to parameter of type 'EffectCallback'.ts(2345)

     useEffect((DATA: any) => {
        setFriendList(DATA)
      }, [DATA])

Answer 1

You can't use hook as effect dependency - only variables/props/values.

You can use hook inside effect function (body).

If it is a component dependent on other (parent's) data/values - pass them as prop and use in effect dependency.