React Native FlatList中合规执行Apollo useQuery的方法

1. 将列表项抽为独立组件（最推荐） #

把单个好友的渲染逻辑拆成独立组件，在组件内部使用useQuery，完全符合Hook调用规则，代码结构也更清晰。

示例代码：

// 独立的好友列表项组件
const FriendItem = ({ friendEmail, myEmail }) => {
  const { loading, error, data } = useQuery(mygql.eventsAttendedTogether, {
    variables: { myEmail, peaEmail: friendEmail },
    fetchPolicy: "cache-and-network"
  });

  if (loading) return <Text>加载中...</Text>;
  if (error) return <Text>加载失败</Text>;

  return (
    <View>
      <Text>共同活动数：{data?.eventsAttendedTogether?.count || 0}</Text>
      {/* 其他好友信息渲染 */}
    </View>
  );
};

// 原页面组件
const FriendListScreen = ({ email }) => {
  const { loading, error, data } = useQuery(mygql.peaInfo, {
    variables: { email },
    fetchPolicy: "cache-and-network"
  });

  if (loading) return <Text>加载好友列表...</Text>;
  if (error) return <Text>好友列表加载失败</Text>;

  return (
    <FlatList
      data={data?.peaInfo}
      keyExtractor={(item) => item.email}
      renderItem={({ item }) => (
        <FriendItem friendEmail={item.email} myEmail={email} />
      )}
    />
  );
};

2. 使用useLazyQuery批量触发查询 #

如果不想拆分组件，可通过useLazyQuery在好友列表加载完成后，批量发起每个好友的共同活动查询，结果存入状态后再渲染。

示例代码：

const FriendListScreen = ({ email }) => {
  const { loading: friendsLoading, error: friendsError, data: friendsData } = useQuery(mygql.peaInfo, {
    variables: { email },
    fetchPolicy: "cache-and-network"
  });

  const [fetchSharedEvents] = useLazyQuery(mygql.eventsAttendedTogether, {
    fetchPolicy: "cache-and-network"
  });

  // 存储各好友的共同活动数据，以邮箱为key
  const [sharedEventsData, setSharedEventsData] = useState({});

  // 好友列表加载完成后批量触发查询
  useEffect(() => {
    if (!friendsLoading && friendsData?.peaInfo) {
      friendsData.peaInfo.forEach(friend => {
        fetchSharedEvents({
          variables: { myEmail: email, peaEmail: friend.email },
          onCompleted: (data) => {
            setSharedEventsData(prev => ({
              ...prev,
              [friend.email]: data.eventsAttendedTogether
            }));
          }
        });
      });
    }
  }, [friendsLoading, friendsData, email, fetchSharedEvents]);

  if (friendsLoading) return <Text>加载好友列表...</Text>;
  if (friendsError) return <Text>好友列表加载失败</Text>;

  const renderVineSegment = ({ item }) => {
    const data = sharedEventsData[item.email];
    const isLoading = !data;

    return (
      <View>
        {isLoading ? <Text>加载中...</Text> : <Text>共同活动数：{data?.count || 0}</Text>}
        {/* 其他好友信息 */}
      </View>
    );
  };

  return (
    <FlatList
      data={friendsData.peaInfo}
      keyExtractor={(item) => item.email}
      renderItem={renderVineSegment}
    />
  );
};

3. 修改GraphQL查询，一次性获取所有数据 #

如果后端支持，直接调整初始的peaInfo查询，让它返回每个好友的共同活动数，避免多次网络请求，这是性能最优的方案。

修改后的GraphQL查询示例：

query peaInfo($email: String!) {
  peaInfo(email: $email) {
    email
    position
    sharedEventsCount # 新增字段，由后端计算当前用户与该好友的共同活动数
    # 其他原有字段
  }
}

之后在原代码中直接从好友列表数据中取sharedEventsCount即可，无需额外查询。

内容的提问来源于stack exchange，提问作者JSim