React 查询失效在 React Native 中不起作用

问题描述

如何在刷新页面后使数据失效？它似乎没有失效，而它应该是。即使服务器端发生了一些变化，它仍然显示旧数据。

我在将数据发布到后端时使用 useMutation 时遇到同样的问题，即使在使用 QueryClient 后 UI 也不会更新。

下面是我的代码：

const IncomeManager: React.FC<any> = (props) => {

    const queryClient = new QueryClient();
    const {isLoading,isError,isFetching,data}: QueryObserverResult = useQuery('typeIncomes',() => typesApi.getAllTypes());

    const [refresh,setRefresh] = useState<boolean>(false);
    const [isModalVisible,setIsModalVisible] = useState<boolean>(false);

    //@ts-ignore
    const handleClose = (): void => {
        setIsModalVisible(false);
    }

    const refreshContent = async () => {
        await queryClient.invalidateQueries('typeIncomes');
        console.log("Content has been refreshed!!!");
    }


    return (
        <View style={style.container}>

            <View>
                <AppText style={style.title}>{data ? data.length : 0} income types available</AppText>
            </View>

            <FixedButton
                title={"plus"}
                onPress={() => props.navigation.navigate(navConstants.ADDTYPE,{type: "incomes"})}
            />

            {
                 isLoading || isFetching ? <PageActivityIndicator visible={isLoading || isFetching}/> :
                    <FlatList style={{width: "100%"}}
                              data={data}
                              renderItem={
                                  ({item}) => <CategoryItem
                                      id={item.type_id}
                                      title={item.title}
                                      subTitle={item.description}
                                      onLongPress={() => console.log("Very long press!")}
                                      onPress={() => props.navigation.navigate(navConstants.EDITTYPE,{
                                              item: {
                                                  id: item.type_id,title: item.title,description: item.description
                                              }
                                          })
                                      }
                                  />
                              }
                              keyExtractor={item => item.type_id}
                              refreshing={refresh}
                              onRefresh={async () => refreshContent()}
                    />
            }
        </View>
    );

}

export default IncomeManager;

const style = StyleSheet.create({

    container: {
        flex: 1,width: "100%",backgroundColor: constants.COLORS.secondary,alignItems: "center"
    },title: {
        color: constant.COLORS.lightGray,paddingVertical: 10,fontSize: 17,marginBottom: 0
    },});

解决方法

每次组件呈现时，您都在创建一个新的 QueryClient 执行以下操作：

const queryClient = new QueryClient()

queryClient 保存您的缓存，该缓存保存您的数据。应该只有一个（如 redux 存储）——您最初创建然后传递给 QueryClientProvider 的那个。要检索此 Singleton 实例，您可以执行以下操作：

const queryClient = useQueryClient()

它将通过 React 上下文为您提供实例。 那个 queryClient 应该可以工作的无效。这也是文档和所有示例中的所有内容的设置方式。