refetchQueries 仅适用于某些查询答案

【问题标题】：refetchQueries works for only some queriesrefetchQueries 仅适用于某些查询
【发布时间】：2020-10-21 21:53:25
【问题描述】：

我在运行此突变的AllFriends 屏幕上使用Friendcomponent：

  const [deleteUserRelation] = useDeleteUserRelationMutation({
    onCompleted: () => {
      Alert.alert('Unfriended');
    },
    refetchQueries: [{ query: GetMyProfileDocument }],
    awaitRefetchQueries: true,
    onError: _onDeleteUserRelationError,
  });

每次变异成功，查询重新获取，这里的数据重新渲染成功。我还看到了必要的日志。

export const AllFriends: React.FunctionComponent = () => {
  const navigation = useNavigation();

  const { data, error } = useGetMyProfileQuery(
    {
      onCompleted: () => {
        console.log('from all friends')
      }
    }
  );
  return (
    <SafeAreaView style={styles.safeView}>
      <Container style={styles.container}>
        <View style={styles.listHolder}>
          {data && (
            <FlatList
              data={data.me.friends.nodes}
              horizontal={false}
              renderItem={({ item }) => (
                <Friend friend={item} originatorId={data.me.id} numberOfFriends={item.friends.totalCount}/>
              )}
              keyExtractor={(item) => item.id.toString()}
            />
          )}
        </View>
      </Container>
    </SafeAreaView>
  );
};

但是，我在此处使用相同的查询，但此处未重新获取数据，因此未重新渲染组件，因此此处未反映更改。我在这里也没有看到 onCompleted 日志。我错过了什么？

export const WhitelistBar: React.FC = () => {
  const [friendList, setFriendList] = useState<Friend[]>();
  const [originatorId, setOriginatorId] = useState<number>();

  const _onCompleted = (data) => {
    console.log('running', data);
    let DATA = data.me.friends.nodes.map(
      (item: {
        id: number;
      }) => ({
        id: item.id,
        imageUrl: defaultUrl,     
      }),
    );
    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',
      },
    ];
    setFriendList(DATA);
    setOriginatorId(0);
  };

  const { data } = useGetMyProfileQuery({
    variables: {},
    onCompleted: _onCompleted,
    onError: _onError,
  });


  return (
    <View style={scaledStyles.container}>
      <View style={scaledStyles.whiteListBarTitle}>
        <Text style={scaledStyles.whiteListBarText}>Meine Freunde</Text>
        <Text
          style={[scaledStyles.whiteListBarText, { color: 'grey' }]}
          onPress={() => navigation.navigate('AllFriends')}>
          Alle Anzeigen
        </Text>
      </View>
      <View style={{ flexDirection: 'row' }}>
        <WhitelistItem title={ADDICON.name} face={ADDICON.imageUrl}/>
        <FlatList
          showsHorizontalScrollIndicator={false}
          data={friendList}
          horizontal={true}
          scrollEnabled
          renderItem={({ item }) => (
            <WhitelistItem
              title={item.name}
              face={item.imageUrl}
              firstName={item.name}
            />
          )}
          keyExtractor={(item) => item.id.toString()}
        />
      </View>
    </View>
  );
};

【问题讨论】：

标签： javascript reactjs react-native graphql apollo

【解决方案1】：

我看不到您的 useGetMyProfileQuery 钩子，但我想问题出在获取策略上。
在useQueryoptions 中设置fetchPolicy: "network-only"。

  const { data } = useGetMyProfileQuery({
    variables: {},
    fetchPolicy: "network-only",
    onCompleted: _onCompleted,
    onError: _onError,
  });

如果 fetchPolicy 是“cache-only”或“cache-first”，那么缓存的数据将被第一次获取。似乎您已经缓存了数据，因为在其他屏幕上也使用过它。
默认为"cache-first"

【讨论】：

这并没有解决问题。即使在其他屏幕上，我在没有 fetch 选项的情况下使用它，它工作正常，但我知道我在这里缺少什么。它似乎没有重新运行。另外，你怎么知道我也在其他屏幕上使用数据？
还有useDeleteUserRelationMutation如果可能的话。