reactjs 如何使用RTK查询清除缓存数据并使其失效?

p4rjhz4m  于 2022-11-22  发布在  React
关注(0)|答案(2)|浏览(249)

有一段时间我遇到了一个问题,那就是我无法使用RTK查询清除缓存。我尝试了各种方法,但缓存数据不清楚。
我在我的变异查询中使用了invalidatesTag,它立即调用了api。但在这种情况下,我想再次重新获取多个api,但不是从任何rtk查询或变异。我想在一些用户活动(如单击)后调用api。我如何解决这个问题?

I made a separate function where I return api.util.invalidateTags(tag) or api.util.resetApiState().
this is my code-snipet:-

({.....})的函数。

export const resetRtkCache = (tag?: String[]) => {
const api = 
if (tag) {
    return api.util.invalidateTags(tag)
} else {
    return api.util.resetApiState()
}

}`
第一个

k2arahey

k2arahey1#

但在这种情况下我想再次重新获取多个api,但不是从任何rtk查询或变异。我想在一些用户活动如点击后进行api调用。我如何解决这个问题?
所以,如果我理解正确,你想要实现的是获取一些API,你在RTK只有在某种用户交互后?
你就不能定义一下吗?

const { data } = useGetYourQuery({ skip: skipUntilUserInteraction })

其中,skipUntilUserInteraction是一个组件状态变量,您可以将其设置为true,并根据所需的用户交互(例如,单击一个按钮)更新为false。因此,在组件呈现时,该特定端点将被跳过,但将在您希望的交互发生后获取?

ioekq8ef

ioekq8ef2#

哇,你真的一次问了这么多问题。但是我认为你绝对应该阅读文档,因为它涵盖了你所有的问题。所以试着一个一个地回答你的问题。
I used invalidatesTag in my mutation query and it called the api instantly.
使用标记使无效是清除该高速缓存的方法之一。您应首先为API设置tagTypes,然后在变异查询中使用这些标记,并告诉RTK查询您要清除的实体部分。
I want to refetch multiple APIs again
您可以customize变形或查询(如this example)中的查询,通过调用一个函数query,您可以一次发送多个请求,如果您希望在删除缓存后再次获取API,则无需执行任何操作,因为RTK查询会为您执行此操作。
I want to make the API call after some user activity like click每次变异都会给u一个函数,你可以把它传递给onClick,如下所示:

import { use[Mymutation]Mutation }  from 'features/api';

const MyComponenet() {
    const [myMutationFunc, { isLoading, ...}] = use[Mymutation]Mutation();

    return <button type='button' onClick={myMutationFunc}>Click for call mutaion</button>

}

请记住,如果您通过单击按钮并启动myMutationFunc为在tagTypes中定义的端点设置providesTags,您将清除带有这些标记该高速缓存。
如果您要查找该高速缓存的乐观更新,可以在here中找到答案。

async onQueryStarted({ id, ...patch }, { dispatch, queryFulfilled }) {
        const patchResult = dispatch(
          api.util.updateQueryData('getPost', id, (draft) => {
            Object.assign(draft, patch)
          })
        )
        try {
          await queryFulfilled
        } catch {
          patchResult.undo()
        }
      }

相关问题