每次进入屏幕时重新获取数据

Question

我有一个屏幕，其中我运行一个查询，然后根据其结果，我通过 UserList 组件呈现一些项目。使用 UserList 组件中的一个按钮，我运行一个突变（删除一个项目）。在这种情况下，因为组件是链接在一起的。我传递了 deleteContact 函数并在其中使用了 refetch() 。因此，当我删除用户时，ui 会自动更新并删除已删除的用户。

但是，我有另一个 AddContact 的组件，它并没有真正链接到 Whitelist 组件（导航除外）。因此，当我添加用户并返回到 Whitelist 屏幕时，ui 没有更新。未呈现新用户。每次重新访问 Whitelist 屏幕时，有什么方法可以调用 refetch() 吗？

export const Whitelist: React.FunctionComponent = (props) => {

  // useEffect(() => {
  //   refetch()
  // }, []);

  const [deleteUserRelationMutation] = useDeleteUserRelationMutation({
    onCompleted: (index: number) => {
      refetch();
      Alert.alert('Contact Deleted');
    },
    onError: _onDeleteUserRelationError
  });

  const onDeleteContact = (relationId: number) => {
    deleteUserRelationMutation({
      variables: { id: relationId}
  })
  };

  const { loading, error, data, refetch } = useUsersQuery({
    variables: {
      where: { id: 1 },
    },
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Container style={{ flex: 1, alignItems: 'center' }}>
<Item style={styles.addToWhitelist}>
          <Icon name="add" onPress={() => navigation.navigate('AddContact')} />
          <Text >Add contact</Text>
        </Item>
        <ContactList data={data} onDeleteContact={onDeleteContact}></ContactList>
      </Container>
    </SafeAreaView>
  );
};

export const ContactList: React.FunctionComponent<UserProps> = ({ data, onDeleteContact }) => {

  if (!data) return null;
  return (
    <View style={styles.users}>
    {data.users.nodes[0].userRelations.map(
      (item: { relatedUser: RelatedUser, type: RelationType, id: number}) => {
        const userName = item.relatedUser.firstName.concat(' ').concat(item.relatedUser.lastName);
        return (
          <View style={styles.item} key={item.id}>
              <View style={styles.nameNumber}>
            <Text style={styles.userName}>{userName}</Text>
            </View>
            <View style={styles.deleteButtonContainer}>
              <Button
                onPress={() => onDeleteContact(item.id)}
                >
              </Button>
            </View>
          </View>
        );
      },
    )}
  </View>
  );
};

我尝试在 useEffect 中调用 refetch。当我从主页转到 whitelist 屏幕时它起作用了。但是，当我转到 add contact 屏幕、添加联系人然后导航回 whitelist.

时，它不起作用

也试过在白名单中使用这个：

useFocusEffect(
  React.useCallback(() => {
    console.log('refetching data');
    refetch();
  }, [])
);

每次我 return 到屏幕时，它都会给我 console.log('refetching data');，但是 ui 没有更新，所以我猜它实际上并没有重新获取。

Answer 1

您可以将挂钩 useUsersQuery 中的 fetchPolicy 设置为 cache-and-network 或 network-only，以便在访问该页面时更新用户列表页面。

cache-and-network

如果设置fetchPolicy为cache-and-network，apollo会先显示缓存数据，并在后台进行网络调用更新缓存。收到响应后，它将更新缓存，缓存又将重新呈现调用挂钩的组件。当组件重新渲染时，用户列表将被更新。

优点：未显示装载程序。给人一种“快速网站”的印象。

缺点：在更新缓存之前，可能会显示过时的数据（持续时间取决于查询解析的速度）。

这对于您不希望数据经常更改的页面很有用。如果adding/deleting用户不是经常操作，可以使用这个选项。

network-only

如果将fetchPolicy设置为network-only，apollo将始终进行网络调用以获取数据。它永远不会将数据存储在其缓存中。

优点：保证显示最新数据。

缺点：需要在进行网络调用时显示加载程序。给人一种“网站速度慢”的印象。

如果 adding/deleting 用户是您应用程序中的频繁操作，这是一个更好的选择，因为它确保始终显示最新数据。

您可以在官方文档中阅读有关获取策略的更多信息 https://www.apollographql.com/docs/react/api/react-apollo/#optionsfetchpolicy

每次进入屏幕时重新获取数据

refetch data every time you enter the screen

javascript

reactjs

typescript

graphql

react-apollo