React Native结合Apollo GraphQL开发聊天应用，添加新群组后主页面如何自动更新？

问题根因 #

Apollo Client默认不会在mutation执行后自动更新其他查询的缓存数据，你创建群组成功后，MY_GROUPS查询对应的缓存没有更新，所以GroupScreen拿到的还是旧数据，界面自然不会刷新。

解决方案 #

方案1：使用refetchQueries重新拉取列表（适合新手，实现最简单） #

直接在创建群组的mutation执行时，指定完成后重新拉取群组列表查询即可：

1. 在NewGroupButtonItem.tsx中导入MY_GROUPS查询

import { MY_GROUPS } from './GroupScreen';

2. 修改onPressSave中的newGroup调用，添加refetchQueries配置：

const onPressSave = () => {
  newGroup({
    variables: {
      createChatRoomName: groupName,
      createChatRoomImageUri: groupPic,
    },
    // mutation执行完成后自动重新拉取群组列表
    refetchQueries: [{ query: MY_GROUPS }]
  });
  setModalVisible(!modalVisible);
};

方案2：直接更新缓存（性能更高，无需额外网络请求） #

如果不想重新发请求拉取列表，可以通过mutation的update配置直接修改Apollo缓存：
修改NewGroupButtonItem.tsx中的useMutation定义：

const [newGroup, { data, error, loading }] = useMutation(CREATE_CHATROOM, {
  update(cache, { data: { createChatRoom } }) {
    // 读取缓存中现有群组列表
    const { chatRooms } = cache.readQuery({ query: MY_GROUPS });
    // 将新创建的群组加入列表后写回缓存
    cache.writeQuery({
      query: MY_GROUPS,
      data: { chatRooms: [...chatRooms, createChatRoom] }
    });
  }
});

代码优化建议 #

你在GroupScreen.tsx中不需要额外声明groups本地状态存储查询结果，直接使用useQuery返回的data即可，减少冗余代码，避免状态不同步问题：

export default function GroupScreen() {
  const { data, error, loading } = useQuery(MY_GROUPS);

  useEffect(() => {
    if (error) {
      Alert.alert("Something went Wrong! Please reload.");
    }
  }, [error]);

  // 可按需添加加载状态展示
  if (loading) return <ActivityIndicator size="large" style={styles.loader} />

  return (
    <View style={styles.container}>
      <FlatList
        style={{ width: "100%" }}
        data={data?.chatRooms || []}
        renderItem={({ item }) => <GroupListItem chatRoom={item} />}
        keyExtractor={(item) => item.id}
      />
      <NewGroupButtonItem />
    </View>
  );
}

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