Expo中React Query返回页面时无法重新获取数据的问题

方法1：利用React Navigation的useFocusEffect触发重取 #

Stack导航模式下，返回上一页时组件不会重新挂载，但会触发页面焦点变化。用useFocusEffect监听这个时机，手动调用React Query的重取方法即可。

示例代码：

import { useFocusEffect } from '@react-navigation/native';
import { useQueryClient } from '@tanstack/react-query';
import React from 'react';

function HomeScreen() {
  const queryClient = useQueryClient();

  useFocusEffect(
    React.useCallback(() => {
      // 重取指定queryKey的查询数据
      queryClient.refetchQueries({ queryKey: ['homeData'] });

      // 如果你是通过useQuery直接获取的查询实例，也可以这样调用
      // const { refetch } = useQuery({ 
      //   queryKey: ['homeData'], 
      //   queryFn: () => fetchHomeData() 
      // });
      // refetch();
    }, [queryClient])
  );

  // 组件其他逻辑...
}

方法2：开启React Query的refetchOnFocus配置 #

React Query在React Native环境中会自动监听App状态，开启refetchOnFocus后，页面获得焦点（比如从其他页面返回）时会自动重取数据。可以全局配置或针对单个查询配置：

全局配置（初始化QueryClient时） #

import { QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnFocus: true, // 该选项默认就是true，若之前手动改为false，改回即可
    },
  },
});

单个查询配置 #

import { useQuery } from '@tanstack/react-query';

function HomeScreen() {
  const { data } = useQuery({
    queryKey: ['homeData'],
    queryFn: () => fetchHomeData(),
    refetchOnFocus: true, // 单独给这个查询开启焦点重取
  });

  // 组件其他逻辑...
}

方法3：监听路由参数触发重取 #

如果需要更精准的控制（比如仅从特定页面返回时才重取），可以通过路由参数标记，监听参数变化触发重取：

import { useRoute } from '@react-navigation/native';
import { useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';

function HomeScreen() {
  const route = useRoute();
  const { refetch } = useQuery({ 
    queryKey: ['homeData'], 
    queryFn: () => fetchHomeData() 
  });

  useEffect(() => {
    // 检测到路由参数中存在重取标记时触发重取
    if (route.params?.needRefetch) {
      refetch();
      // 重置参数，避免后续重复触发
      route.params.needRefetch = false;
    }
  }, [route.params, refetch]);

  // 跳转至Test页面时可传递参数：navigation.navigate('Test')
  // 在Test页面返回前设置标记：navigation.setParams({ needRefetch: true }); 再调用navigation.goBack()
}

内容的提问来源于stack exchange，提问作者robo