refetchQueries 仅适用于某些查询 [英] refetchQueries works for only some queries
问题描述
我在运行此更改的 AllFriends
屏幕上使用了 Friend
组件:
I use a Friend
component on my AllFriends
screen that runs this mutation:
const [deleteUserRelation] = useDeleteUserRelationMutation({
onCompleted: () => {
Alert.alert('Unfriended');
},
refetchQueries: [{ query: GetMyProfileDocument }],
awaitRefetchQueries: true,
onError: _onDeleteUserRelationError,
});
每次变异成功,重新获取查询,重新渲染这里的数据.我还看到了必要的日志.
Every time, the mutation is successful, the query is refetched and data here is successfully re-rendered. I also see the necessary logs.
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 日志.我错过了什么?
However, I am using the same query here but the data is not refetched here and hence the component is not re-rendered so the changes aren't reflected here. I don't see the onCompleted logs here as well. What am I missing out?
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>
);
};
推荐答案
我看不到您的 useGetMyProfileQuery
挂钩,但我想问题出在获取策略上.
在 useQuery
选项中设置 fetchPolicy:network-only"
.
I can't see your useGetMyProfileQuery
hook, but I guess the issue is with the fetch policy.
Set the fetchPolicy: "network-only"
in the useQuery
options.
const { data } = useGetMyProfileQuery({
variables: {},
fetchPolicy: "network-only",
onCompleted: _onCompleted,
onError: _onError,
});
如果 fetchPolicy 是仅缓存"或缓存优先",而不是第一次获取缓存的数据.似乎您已经缓存了数据,因为在其他屏幕上也使用过它.
默认情况下它是 "cache-first"
If the fetchPolicy is "cache-only" or "cache-first", than the cached data will be fetched for the first time. And seems like you have cached data, because have used it also at other screens.
By default it's "cache-first"
这篇关于refetchQueries 仅适用于某些查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!