Redux RTK查询无效突变后未调用标签

7z5jn7bk  于 2023-10-19  发布在  其他
关注(0)|答案(2)|浏览(92)

我一直在试图找出为什么标签无效不工作,并添加了一些日志记录。getMe中的providesTags工作正常,但login中的invalidatesTags永远不会被调用。可能出了什么问题?
我有一个Redux RTK查询API如下:

const baseQuery = fetchBaseQuery({
  baseUrl: baseUrl,
  prepareHeaders: (headers, { getState }) => {
    const token = getState().auth.token
    if (token) {
      headers.set('authorization', `Bearer ${token}`)
    }
    return headers
  },
})

export const api = createApi({
  baseQuery: baseQuery,
  tagTypes: ['User'],
  endpoints: build => ({
    login: build.mutation({
      query: code => ({
        url: `auth/login/?code=${code}`,
        method: 'POST',
      }),
      invalidatesTags: (result, error, arg) => {
        console.log('auth/login', result, error, arg)
        return ['User']
      },
    }),
    getMe: build.query({
      query: () => 'auth/me',
      providesTags: result => {
        console.log('auth/me', result)
        return ['User']
      },
    }),
  }),
})

export const { useLoginMutation, useGetMeQuery } = api

login在组件挂载时被调用,当页面从回调加载时,如下所示:

const CallbackComponent = () => {
  const location = useLocation()
  const [login, { isUninitialized, isLoading, isError, data, error }] = useLoginMutation()

  useEffect(() => {
    if (isUninitialized) login(getCode(location))
  })
  ...
}

getMe在这样的组件中使用:

const Header = () => {
  const isAuthenticated = useIsAuthenticated()
  const {
    data: user,
    isError,
    error,
  } = useGetMeQuery(null, {
    skip: !isAuthenticated,
  })

  if (isError) return <span>{JSON.stringify(error)}</span>

  return (
    <nav className="header">
      {user ? <CharacterList characters={user.characters} /> : null}
      {!user || user.characters.length === 0 ? <Login /> : null}
    </nav>
  )
}
tf7tbtn2

tf7tbtn21#

事实证明,问题不在这些地方。我还没有将API中间件添加到我的商店中。

export const store = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(api.middleware),
})

文档:https://redux-toolkit.js.org/tutorials/rtk-query#add-the-service-to-your-store

cygmwpex

cygmwpex2#

我遇到了一个非常类似的问题,当getMe请求在没有有效会话令牌的情况下被调用时,它会抛出一个HTTP 401响应代码。事实证明,删除服务器端的401解决了这个问题。
然而,这不是一个最佳解决方案,所以我发现,providesTags: ['example']只在成功时才提供标记。要在失败或其他标记时提供它,请使用以下内容:

providesTags:(result, error, id)=> (
  result
    ? ['example']
    : (error?.status === 401 ? ['UNAUTHORIZED'] : ['UNKNOWN_ERROR'])
)

虽然你已经找到了解决问题的方法,但这可能会帮助其他遇到类似问题的人。

相关问题