在上下文提供程序中使用React query 4使查询无效会产生意想不到的结果

Question

在React项目中有一个名为& StaticDataProvider"的上下文提供程序。

这样，UI项目就可以从API中获取静态数据，并将其放在上下文中，以便在组件中使用。

StaticDataProvider看起来像这样:

import {
createContext,
ReactNode,
useContext,
useState,
useEffect,
} from 'react';
import { useQuery } from 'react-query';
import { useToken } from '../../../lib';
import { GetAllReferenceData } from '../../../requests';
import { StaticDataInterface, initialStaticData } from './initialStaticData';
export const StaticDataContext =
createContext<StaticDataInterface>(initialStaticData);
export const useStaticData = () => useContext(StaticDataContext);
export function StaticDataProvider({ children }: { children: ReactNode }) {
// ** Init the State with initial Static Data.
const [refData, setRefData] =
useState<StaticDataInterface>(initialStaticData);
const token = useToken(); // Needed for the Query to the API
// ** Fetch Reference Data
const {
data: referenceData,
isSuccess,
isLoading,
} = useQuery('reference_data', () => GetAllReferenceData(token));
useEffect(() => {
if (isSuccess) {
setRefData({
...initialStaticData,
referenceData,
});
} 
}, [isLoading, isSuccess]);
if (isLoading && !isSuccess) {
return null; // Forget about showing anything if we don't have StaticData.
}
return (
<StaticDataContext.Provider value={refData}>
{children}
</StaticDataContext.Provider>
);
}

当应用程序加载时，StaticData是可用的，但只有init版本，因为您没有登录(因此没有accessToken来访问API)。

在登录时，'reference_data'键无效，数据从API加载。一切正常

问题是，有时在应用程序中发生的事情需要重新加载StaticData。(你可以说我的静态数据并不是真正的"静态的";: -))然后在关键字"reference_data"上添加一个新的'invalidateQueries'命令被发送。这个无效工作正常(我看到请求来自API端)。

但是问题是StaticData提供程序中的useEffect没有执行，因此setRefData (to the State)没有执行。useEffect的依赖是'isLoading'和'isSuccess'。它们将在查询运行期间更改。那么为什么没有执行useEffect ?

我在这里做错了什么?

Answer 1

我想我解决了这个问题:

1. 添加'referenceData'到useEffect的依赖数组
2. HotReloading代码确实搞砸了React-Query的缓存机制。所以，如果你热加载你的代码，它将不再工作。

尤其是最后一个会让你弄不清楚这里发生了什么. ...