RTK Query调用useGetUserQuery时报错providesTags为undefined如何解决

核心错误点 #

• tagTypes 配置格式错误：RTK Query 要求 tagTypes 必须传入字符串数组，你的代码中直接传入了单个字符串 'User'，会导致内部标签识别逻辑异常。
• providesTags 配置格式错误：单条查询的 providesTags 需要传入标签数组，针对单条用户资源建议关联ID，实现精准的缓存失效。
• 代码语法错误：你贴出的 createApi 配置段存在多余的闭合括号，会导致 API 实例初始化异常，内部属性读取失败。
• 可选校验：确认后端返回的是否为未包裹的单个 User 对象，若后端返回格式为 { data: User, code: xxx } 这类包裹结构，需要添加 transformResponse 做数据解包。

修复后完整代码 #

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import Cookie from 'js-cookie';
import React from 'react';

export interface User {
   id: string
   login: string
   password: string
   fonction: string
   imageprofil: string  
   // 其余字段按需补充
}
React.useLayoutEffect = React.useEffect
type UsersResponse = User[]

export const api = createApi({
  baseQuery: fetchBaseQuery({ 
    baseUrl: 'http://localhost:8080/api/',
    prepareHeaders: (headers) => {
      const token = Cookie.get('token');   
      if (token) {
        headers.set('authorization', `Bearer ${token}`)
      }
      return headers
    }, 
  }),
  // 修复为数组格式
  tagTypes: ['User'],
  endpoints: (build) => ({
    getUser: build.query<User, string>({
      query: (id) => ({url:`users/${id}`}),
      // 修复为数组格式，关联单条资源ID实现精准缓存
      providesTags: (result, error, id) => [{ type: 'User', id }],
      // 如果后端返回数据有外层包裹，取消注释下面代码做解包
      // transformResponse: (response: {data: User}) => response.data
    }),
  })
})

export const {         
  useGetUserQuery        
} = api

额外说明 #

如果修改后依然报相同错误，清空浏览器本地缓存、重启项目开发服务即可，避免旧的打包缓存影响运行结果。

内容的提问来源于stack exchange，提问作者Nicolas Popy