带有TypeScript的Redux工具包API-提供标记/无效标记具有意外类型?

juud5qan  于 2023-01-27  发布在  TypeScript
关注(0)|答案(1)|浏览(136)

尝试使用Typescript实现Redux Toolkit API。我在invalidateTagsprovidesTags属性的以下代码中遇到错误。

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相对来说是新手。
只是想让它编译成功。
谢谢!

lf3rwulv

lf3rwulv1#

基本上回答了我自己的问题。
您需要添加一个tagTypes属性来定义要提供/使其无效的标记。
有一件事我仍然没有答案是如何无效一种以上的标签在同一时间,主要是因为我不知道如何混合类型在TypeScript中,但这似乎是一个相当尖锐的情况无论如何。

相关问题