Redux Toolkit RTK Query无参数查询端点定义及TS调用报错解决

问题原因 #

RTK Query 的 builder.query 泛型默认要求显式声明入参类型，如果你的查询不需要传参数，没有指定入参类型为void的情况下，TS 会默认要求调用时传入参数，触发类型报错。

解决方法 #

给builder.query的第二个泛型参数传入void声明该查询无入参即可，若需要更好的类型提示，建议同时声明接口返回值的类型：

// 先定义宝可梦列表接口的返回值类型
interface PokemonListResponse {
  count: number
  next: string | null
  previous: string | null
  results: { name: string; url: string }[]
}

export const pokemonApi = createApi({
  reducerPath: "pokemonApi",
  baseQuery: fetchBaseQuery({ baseUrl: "https://pokeapi.co/api/v2/" }),
  tagTypes: [],
  endpoints: (builder) => ({
    getPokemonByName: builder.query({
      query: (name: string) => `pokemon/${name}`
    }),
    // 修改后的无参查询定义
    getAllPokemon: builder.query<PokemonListResponse, void>({
      query: () => `pokemon/`
    })
  })
});

修改完成后，组件中直接调用useGetAllPokemonQuery()就不会出现要求传参的报错，同时返回的data也会有对应的类型提示。

文档中 useGetPostsQuery 对应的端点定义参考 #

你提到的官方文档中未给出的useGetPostsQuery对应的端点定义遵循同样规则：

// 定义返回的Post类型
interface Post {
  id: number
  title: string
  content: string
  // 其他字段
}

// 端点定义
endpoints: (builder) => ({
  getPosts: builder.query<Post[], void>({
    query: () => '/posts'
  })
})

内容的提问来源于stack exchange，提问作者Laurence Fass