尝试使用Typescript实现Redux Toolkit API。我在invalidateTags
和providesTags
属性的以下代码中遇到错误。
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { faker } from '@faker-js/faker';
interface Album { id: number; title: string; userId: number; }
interface User { id: number; }
interface FetchAlbumsResult { albums: Album[]; }
interface AddAlbumMutationResult { album: Album; }
interface RemoveAlbumMutationResult { id: number; }
const albumsApi = createApi({
reducerPath: 'albums',
baseQuery: fetchBaseQuery({
baseUrl: 'http://localhost:3005',
fetchFn: async (...args) => {
return fetch(...args);
},
}),
endpoints(builder) {
return {
removeAlbum: builder.mutation<RemoveAlbumMutationResult, Album>({
invalidatesTags: (result, error, album) => {
return [{ type: 'Album', id: album.id }];
},
query: (album) => {
return {
url: /albums/${album.id},
method: 'DELETE',
};
},
}),
addAlbum: builder.mutation<AddAlbumMutationResult, User>({
invalidatesTags: (result, error, user) => {
return [{ type: 'UsersAlbums', id: user.id }];
},
query: (user) => {
return {
url: '/albums',
method: 'POST',
body: {
userId: user.id,
title: faker.commerce.productName(),
},
};
},
}),
fetchAlbums: builder.query<FetchAlbumsResult, User>({
providesTags: (result, error, user) => {
const tags = result!.albums.map((album) => {
return { type: 'Album', id: album.id };
}) || [];
tags.push({ type: 'UsersAlbums', id: user.id });
return tags;
},
query: (user) => {
return {
url: '/albums',
params: {
userId: user.id,
},
method: 'GET',
};
},
}),
};
},
});
export const { useFetchAlbumsQuery, useAddAlbumMutation, useRemoveAlbumMutation, } = albumsApi; export { albumsApi };
错误示例:
Type '(result: RemoveAlbumMutationResult | undefined, error:
FetchBaseQueryError | undefined, album: Album) => { type: string; id:
number; }[]' is not assignable to type 'ResultDescription<never,
RemoveAlbumMutationResult, Album, FetchBaseQueryError,
FetchBaseQueryMeta | undefined> | undefined'. Type '(result:
RemoveAlbumMutationResult | undefined, error: FetchBaseQueryError |
undefined, album: Album) => { type: string; id: number; }[]' is not
assignable to type 'GetResultDescriptionFn<never,
RemoveAlbumMutationResult, Album, FetchBaseQueryError,
FetchBaseQueryMeta | undefined>'. Type '{ type: string; id:
number; }[]' is not assignable to type 'readonly
FullTagDescription<never>[]'. Type '{ type: string; id: number;
}' is not assignable to type 'FullTagDescription<never>'.
Types of property 'type' are incompatible. Type 'string' is
not assignable to type 'never'.ts(2322) endpointDefinitions.d.ts(454,
5): The expected type comes from property 'invalidatesTags' which is
declared here on type 'Omit<EndpointDefinitionWithQuery<Album,
BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {},
FetchBaseQueryMeta>, RemoveAlbumMutationResult> & { ...; } & { ...; }
& MutationExtraOptions<...>, "type"> | Omit<...>'
我试着看过Redux Toolkit的文档,但到目前为止,使用标记的示例没有给我任何提示。我有很多Javascript和旧Redux的经验,但我对TypeScript和Redux Toolkit相对来说是新手。
只是想让它编译成功。
谢谢!
1条答案
按热度按时间lf3rwulv1#
基本上回答了我自己的问题。
您需要添加一个
tagTypes
属性来定义要提供/使其无效的标记。有一件事我仍然没有答案是如何无效一种以上的标签在同一时间,主要是因为我不知道如何混合类型在TypeScript中,但这似乎是一个相当尖锐的情况无论如何。