refetchQueries 仅适用于某些查询

Posted 2023-03-10

【中文标题】refetchQueries 仅适用于某些查询

【英文标题】：refetchQueries works for only some queries

【发布时间】：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>
  );
;

【参考方案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如果可能的话。