導航后查詢不會重新運行

Question

我有一個屏幕，我正在使用這樣的查詢：

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

  const { data, error } = useGetMyProfileQuery({
    onCompleted: () => {
      console.log('hellooo')
    },
  });

每次我從主頁訪問此頁面時，我都認為查詢會重新運行，因為我總是看到hello日志。 同樣，從這個頁面，我訪問另一個屏幕，如下所示：

          <Text
            onPress={() => navigation.navigate('PendingRequests')}>
            Pending Requests (
            {data
              ? data.me.pendingUserRelationsRequestsReceived.totalCount
              : ''}
            )
          </Text>

每次訪問此屏幕時，我都會再次看到 hellooo 從 pending 。 此屏幕如下所示：

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

  const { data, error } = useGetMyProfileQuery({
    onCompleted: () => {
      console.log('hellooo from pending')
    },
  });

  return (
    <SafeAreaView style={styles.safeView}>
      <Container style={styles.container}>
        <Text
          style={styles.backText}
          onPress={() => navigation.navigate('AllFriends')}>
          Zurück
        </Text>
      </Container>
    </SafeAreaView>
  );
};

現在的問題是，當我導航回AllFriends時，查詢應該重新運行，並且我應該再次看到hello日志，就像我從Homepage回到AllFriends時看到的一樣。 但我沒有。

但是，如果我從 AllFriends 回到 PendingRequests，我會再次看到日志hellooo from pending 。

編輯：

  useFocusEffect(()=>{
    getMyProfile()
  },[]);
  
  const getMyProfile = () => {
    const { data, error } = useGetMyProfileQuery({
      onCompleted: () => {
        console.log('hellooo')
      },
      //fetchPolicy: 'network-only',
    });
  }

Answer 1

您必須調用refetch它將為您重新運行查詢。 您也可以將其傳遞到其他屏幕。

你可以像這樣得到它：

const {loading, data, refetch} = useQuery(Query, {})

現在在你 useFocuseEffect 中調用這個：

 useFocusEffect(()=>{
   React.useCallback(() => {
    refetch();
    }, [])
 },[]);

Answer 2

使用navigation.navigate時，屏幕不會“卸載”，因此它不會像使用navigation.replace時那樣從頭開始重新初始化

嘗試使用navigation.replace而不是navigation.navigate 。 我希望它有幫助，如果沒有，請告訴我。