Javascript refetchQueries仅适用于某些查询
我在我的Javascript refetchQueries仅适用于某些查询,javascript,reactjs,react-native,graphql,apollo,Javascript,Reactjs,React Native,Graphql,Apollo,我在我的AllFriends屏幕上使用了一个friends组件来运行此代码: const [deleteUserRelation] = useDeleteUserRelationMutation({ onCompleted: () => { Alert.alert('Unfriended'); }, refetchQueries: [{ query: GetMyProfileDocument }], awaitRefetchQueries:
AllFriends
屏幕上使用了一个friends
组件来运行此代码:
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>
);
};
export const AllFriends:React.FunctionComponent=()=>{
const navigation=useNavigation();
const{data,error}=useGetMyProfileQuery(
{
未完成:()=>{
console.log('来自所有朋友')
}
}
);
返回(
{数据&&(
(
)}
keyExtractor={(item)=>item.id.toString()}
/>
)}
);
};
但是,我在这里使用的是相同的查询,但是数据没有在这里重新绘制,因此组件没有重新渲染,因此更改不会反映在这里。我在这里也没有看到未完成的日志。我错过了什么
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>
);
};
export-const-WhitelistBar:React.FC=()=>{
const[friendList,setFriendList]=useState();
常量[originatorId,setOriginatorId]=useState();
const_onCompleted=(数据)=>{
console.log('running',data);
让DATA=DATA.me.friends.nodes.map(
(项目:{
id:编号;
}) => ({
id:item.id,
imageUrl:defaultUrl,
}),
);
setFriendList(数据);
console.log('daattaaa',数据);
setOriginatorId(data.me.id)
};
常数=()=>{
让数据=[
{
id:1,
imageUrl:defaultUrl,
姓名:'朋友',
},
{
id:2,
imageUrl:defaultUrl,
姓名:'朋友',
},
];
setFriendList(数据);
SetOrigorid(0);
};
const{data}=useGetMyProfileQuery({
变量:{},
未完成:_未完成,
onError:_onError,
});
返回(
梅恩·弗伦德
导航。导航('AllFriends')}>
安齐根酒店
(
)}
keyExtractor={(item)=>item.id.toString()}
/>
);
};
我看不到您的useGetMyProfileQuery
钩子,但我想问题在于获取策略在
useQuery
选项中设置fetchPolicy:“仅网络”
const { data } = useGetMyProfileQuery({
variables: {},
fetchPolicy: "network-only",
onCompleted: _onCompleted,
onError: _onError,
});
如果fetchPolicy为“仅缓存”或“缓存优先”,则缓存的数据将第一次被提取。看起来您已经缓存了数据,因为您也在其他屏幕上使用了它默认情况下,没有解决问题的是
“缓存优先”
。即使在其他屏幕上,我也在使用它,没有fetch选项,它工作得很好,但是idk我在这里缺少了什么。它似乎没有重新运行。另外,您是如何判断我也在使用其他屏幕上的数据的?如果可能的话,还有useDeleteUserRelationVariation
。