我有一个使用 RTK 查询挂钩生成的简单家庭列表，其中可以将项目标记为最喜欢的，并根据标签失效自动重新获取数据。虽然当我在测试中运行项目时一切正常，但 msw 无法匹配在突变成功通过标签失效触发后第二次调用的相同 GET 请求。
服务：
export const homesApi = createApi({
reducerPath: 'homesApi',
baseQuery: fetchBaseQuery({
baseUrl: API_URL,
prepareHeaders: (headers, { getState }) => {
headers.set('Accept', `application/json`);
return headers;
},
}),
tagTypes: [
'Homes',
],
endpoints: (builder) => ({
getHomes: builder.query({
query: (params) => {
const url = qs.stringifyUrl(
{ url: '/homes', query: params },
{ skipEmptyString: true, skipNull: true }
);
return url
},
providesTags: (result) =>
result?.data
? [
...result.data.map(({ id }) => ({ type: 'Homes', id …根据redux 文档：“虽然使用 RTK 查询管理缓存数据来将响应存储在规范化查找表中的需要较少，但如果需要，可以利用 TransformResponse 来做到这一点。”
我正在尝试使用 RTK 查询，但找不到如何使用 React 测试库为使用 RTK 查询请求的组件编写单元测试的好示例。
例如，我们有一个从服务器获取某些内容的列表的组件。如何模拟请求数据？我找到了一个用于mswjs模拟 API 测试的解决方案。
await new Promise((r) => setTimeout(r, 1000));但即使有了它，我仍然遇到一个问题：在检查集合中的某些内容是否存在之前，我需要添加。
也许，有人知道如何使用 RTK 查询测试组件？
我对使用 useEffect、useCallback 和运行 RTK 查询有点困惑。我想要实现的目标是用户能够根据应用程序中提供的输入字段搜索电影。
有一个带有输入字段的主页，供用户搜索电影。另外，我在 RTK 查询 API 中有一个 useSearchMovieQuery ，它可以搜索用户在搜索字段中输入的任何内容。我想阻止查询在初始渲染上运行，这可以通过使用“skip”或“skipToken”跳过查询来实现。
我只想在用户停止输入后运行此查询，而不是在搜索字段中的 onChange 事件之后立即运行。
这是我到目前为止所尝试过的。
const Home = () => {
const [page, setPage] = useState<number>(1);
const [skip, setSkip] = useState<boolean>(true);
const [searchQuery, setSearchQuery] = useState<string>("");
const { data: popularMovies, isLoading: popularLoading } =
useGetPopularMoviesQuery(page);
const { data: topRatedMovies, isLoading: topRatedLoading } =
useGetTopRatedMoviesQuery();
const { data: upcomingMovies, isLoading: upcomingLoading } =
useGetUpcomingMoviesQuery();
const {
data: searchResult,
isSuccess: searchedForMovie,
isFetching,
isError,
} = useSearchMovieQuery(searchQuery, { skip });
const handleOnChangePage …我正在使用 RTK 查询进行 POST 调用。我能够将有效负载数据传递给我的查询，但我想访问我的transformResponse函数内的查询参数“id”。但发现没有办法这样做。
下面是我的代码
export const apiSlice = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({ baseUrl: '/fakeApi' }),
endpoints: builder => ({
getPosts: builder.query({
query: ({id}) => ({ url, method: 'POST', body: { id } }),
transformResponse: (response) => { console.log(response, id) } //How can I access the 'id' from query here?
})
})
})
如何访问函数内的查询负载transformResopnse？
我还尝试将传递arg给transformResponse函数，但arg对我来说是未定义的。
(response, meta, arg)
arg 对我来说是未定义的。
在RTK查询的文档中，这是向util提供的介绍fetchBaseQuery：
这是一个非常小的包装器
fetch，旨在简化请求。axios它不是、superagent或任何其他重量级库的全面替代品，但它可以满足您的大部分需求。
好的，我知道 fetchBaseQuery 并不完美，但是什么时候应该使用 fetchBaseQuery 而不是axiosor superagent？
有哪些权衡？
我正在使用REDUX-TOOLKIT-QUERY，现在我有一种情况，我必须调用一个突变。一旦该突变返回响应，我就必须在其他三个突变中使用该响应作为请求参数。我们如何以正确的方式实施这一点？
const [getSettings, { isLoading, data: Settings }] =useSettingsMutation();
const [getMenu] =useMenuMutation();
const [getServices] = useServicesMutation();
useEffect(() => {
const obj = {
Name: "someNme",
};
if (obj) getSettings(obj);
if (Settings?._id ) {
const id = settings._id;
getServices(id);
getMenu(id);
getServices(id);
}
}, []);
我正在使用 Redux Toolkit 和 RTK Query 与 MSW 进行模拟，但在尝试在测试中返回错误时，我似乎得到了相同的数据。我怀疑这是 RTK 查询缓存行为的问题，并尝试使用工具包 createApi 方法的这些选项来禁用它，但它们似乎没有解决该问题：
keepUnusedDataFor: 0,
refetchOnMountOrArgChange: true,
refetchOnFocus: true,
refetchOnReconnect: true,
在 MSW 文档中，它给出了如何在使用其他库时解决此问题的示例：https://mswjs.io/docs/faq#why-do-i-get-stale-responses-when-using-react-queryswretc
// react-query example
import { QueryCache } from 'react-query'
const queryCache = new QueryCache()
afterEach(() => {
queryCache.clear()
})
// swr example
import { cache } from 'swr'
beforeEach(() => {
cache.clear()
})
使用 Redux Toolkit 和 RTK Query 时如何实现相同的效果？
在下面的示例中，我尝试使用 React 和 Redux Toolkit 创建一个简单的登录/身份验证组件。
const Login = () => {
const dispatch = useDispatch();
const [login, { isLoading }] = useLoginMutation();
const [loginData, setLoginData] = useState({
email: '',
password: '',
});
const loginHandler = async () => {
try {
const result = await login({
email: loginData.email,
password: loginData.password,
}).unwrap();
const { token, userId } = result;
const { data } = await dispatch(
backendApi.endpoints.getUser.initiate({ token, userId })
);
dispatch(
setCredentials({
user: {
email: data.user.email,
id: data.user.id,
name: …使用RTK Query，如何使用获取功能来更新另一个切片的状态？
本质上，我试图将所有相关状态保持在一起，因此在使用 查询数据后useLazyGetQuery，我想使用结果并将其存储在现有的切片状态中。
虽然像下面这样的东西可以在组件中工作，但它使整个代码变得混乱
const [trigger, result, lastArg] = useLazyGetFiltersQuery();
React.useEffect(() => {
if (result.status === 'fulfilled' && result.isSuccess === true && result.isLoading === false) {
dispatch(updateData(result.data.map((pg) => ({ label: pg, value: pg }))));
}
}, [dispatch, result, result.isLoading, result.isSuccess, result.status]);
我宁愿直接在createApi方法中设置一些逻辑，以便将结果数据从头存储在我想要的切片中。
谢谢