mongodb - React-native：添加新项目后如何自动更新主屏幕

Question

我基本上是 React-native 的新手，我正在尝试将它与 MongoDB、apollo-graphql 集成以实现一个基本的聊天应用程序。

添加新组时，我需要自动更新屏幕并显示新创建的组。现在发生的情况是，当我创建组时，我每次都需要重新加载应用程序以显示所做的更新。

GroupScreen.tsx

const MY_GROUPS = gql`
  query chatRooms {
    chatRooms {
      id
      name
      createdAt
      imageUri
    }
  }
`;

export default function GroupScreen() {
  const [groups, setGroups] = useState(null);
  const { data, error, loading } = useQuery(MY_GROUPS);

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

  useEffect(() => {
    if (data) {
      //console.log(data);
      setGroups(data.chatRooms);
    }
  }, [data]);

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

NewGroupButtonItem.tsx

const CREATE_CHATROOM = gql`
  mutation Mutation(
    $createChatRoomName: String!
    $createChatRoomImageUri: String
  ) {
    createChatRoom(
      name: $createChatRoomName
      imageUri: $createChatRoomImageUri
    ) {
      id
      name
      imageUri
      createdAt
      users {
        id
        name
      }
    }
  }
`;

const NewGroupButtonItem = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [groupName, setGroupName] = useState("");
  const [groupPic, setGroupPic] = useState(null);

  const [newGroup, { data, error, loading }] = useMutation(CREATE_CHATROOM);

  const onPress = () => {
    setGroupName("");
    setGroupPic(null);
    setModalVisible(!modalVisible);
  };

  const onPressSave = () => {
    newGroup({
      variables: {
        createChatRoomName: groupName,
        createChatRoomImageUri: groupPic,
      },
    });
    setModalVisible(!modalVisible);
  };

  return (
    <View style={styles.container}>
      <Modal animationType="fade" transparent={true} visible={modalVisible}>
        <TouchableOpacity
          style={styles.touchableContainer}
          activeOpacity={1}
          onPress={() => setModalVisible(!modalVisible)}
        >
          <View style={styles.mainContainer}>
            <View style={styles.innerContainer}>
              <Pressable
                onPress={() => {
                  console.warn("Clicked Image!");
                }}
              >
                <Image source={{}} style={styles.avatar} />
              </Pressable>
              <TextInput
                placeholder={"Group Name"}
                style={styles.inputBox}
                value={groupName}
                onChangeText={setGroupName}
              />
              <Pressable
                onPress={() => {
                  console.warn("Clicked Emojies!");
                }}
              >
                <Entypo name="emoji-flirt" size={30} color="#37474f" />
              </Pressable>
            </View>
            {!groupName ? (
              <Text style={styles.saveButton} onPress={onPress}>
                Cancel
              </Text>
            ) : (
              <Text style={styles.saveButton} onPress={onPressSave}>
                Save
              </Text>
            )}
          </View>
        </TouchableOpacity>
      </Modal>
      <TouchableOpacity onPress={onPress}>
        <MaterialIcons name="group-add" size={30} color="white" />
      </TouchableOpacity>
    </View>
  );
};

export default NewGroupButtonItem;

标签： mongodbreact-nativeapollo