防止在特定 RTK 查询端点上进行缓存

Question

我正在使用 rtq 查询，我有一个端点，它从全局存储中获取 azure-ad oid 并向后端进行查询以检查用户是否存在于后端以检查用户是否存在。如果用户存在，那么我将用户重定向到仪表板，否则我不会重定向用户。

问题在于，尽管尝试阻止该端点上的缓存，但它仍然使用缓存的数据，并且当真实数据来自服务器时，重定向已经发生。以下是我为防止这种情况发生而采取的一些步骤。

1. 使用重新获取
2. 设置 refetchOnMountOrArgChange: true,
3. 设置 keepUnusedDataFor: 0.0001 几乎立即使缓存失效

重点是我不希望此端点使用任何缓存的数据。

以下是我的组件：

 const [isSignedIn] = useIsSignedIn();
  const history = useHistory();
  const dispatch = useAppDispatch();
  const ongraphLogin = async (role: string) => {
    if (Providers.globalProvider.login) {
      dispatch(setloginType(role));

      await Providers.globalProvider.login();
    }
  };
  const userState = useAppSelector(state => state.userState);

 
  console.log(userState?.currentUser?.id);
  const { data, error, isLoading, refetch } = useGetUserByOidQuery(userState?.currentUser?.id, {
    skip: isSignedIn,
    refetchOnMountOrArgChange: true
  });
  
  useEffect(() => {
    refetch();
    // console.log(res);
    if (isSignedIn) {
      console.log('I am in');
      // Check if the user exists in the ndovysystem
      if (data?.status === 'success') {
        console.log(data);
        history.push('/user');
      } else if (userState.loginType === 'volunteerRegistration') {
        history.push('/register/volunteer');
      } else if (userState.loginType === 'menteeRegistration') {
        history.push('/register/mentee');
      }
    }
  }, [isSignedIn, data]);

下面是终点

import { ndovuAPI } from './ndovuAPI';

export const ndovuUserAPI = ndovuAPI.injectEndpoints({
  endpoints: builder => ({
    getUserByOid: builder.query({
      query: (oid: string) => `/users/oid/${oid}`,
      keepUnusedDataFor: 0.0001
    })
  })
});

// Export hooks for usage in functional components
export const { useGetUserByOidQuery} = ndovuUserAPI;

请帮我解决这个问题。

Answer 1

您可以将时间戳作为查询的参数传递。这就是我为防止组件安装时缓存所做的事情。

像这样

const timestampRef = useRef(Date.now()).current;
const {data = [], isFetching} 
    = useGetChatMessagesQuery({id: chatId, lastMessageId, sessionId: timestampRef});

Answer 2

嗯。您无法真正阻止缓存查询，但您可以将其设为突变 - 默认情况下，即使具有相同参数的两个突变也不会共享缓存条目。

Answer 3

在 useLazyQuerySubscription 或 useLazyQuery

 中使用第二个参数作为 

false

const [triggerGetUsers, { isLoading, error }] = useLazyGetUsersQuery();
 


const handleGetUsers = async (reqBody) => {

const { data: usersData, isLoading } = await triggerGetUsers(reqBody, false);

};

参考文献：https://redux-toolkit.js.org/rtk-query/usage/queries#hook-types

1. 使用LazyQuery

返回一个包含触发函数、查询结果和最后一个 Promise 信息的元组。与 useQuery 类似，但可以手动控制数据获取的时间。 注意：如果缓存数据已存在，您想跳过发出请求，则触发器函数采用第二个参数

preferCacheValue?: boolean

。

2. 使用LazyQuerySubscription

返回一个带有触发函数的元组，以及最后的承诺信息。与 useQuerySubscription 类似，但可以手动控制数据获取的时间。 注意：如果缓存数据已存在，您想跳过发出请求，则触发器函数采用第二个参数

preferCacheValue?: boolean

。

Answer 4

对于我的情况，我有一个场景，在用户第一次使用第三方 OAuth 登录时在数据库中注册用户。但是，当所述组件异步加载（依赖于用户位于数据库中）时，我添加了一个带有 refetch 的钩子来检查用户当时是否位于数据库中。

const { refetch } = useFetchUserQuery(authUserId);

（useFetchUserQuery是rtk查询端点）

const userInDb =  (await refetch(authUserId).unwrap());

如果用户存在，则所有登录功能（不仅仅是默认功能）都可用。重新获取挂钩取决于用户 ID 和登录状态更改。这个项目是用javascript编写的

Answer 5

这有效

const { data, isFetching, refetch } = useSkillsListQuery(undefined, {
  refetchOnMountOrArgChange: 3600, // in seconds
});

这会导致查询在 3600 秒（1 小时）内使缓存失效，并在组件重新安装时自动重新获取。

您还可以使用

refetch

手动触发重新获取，这将使缓存失效。