RTK Query缓存自动更新地址时出现TypeScript类型错误

你遇到的Type 'string' is not assignable to type 'undefined'类型错误，核心原因是RTK Query的Mutation端点不支持providesTags配置项。

要实现添加地址后自动更新地址列表的需求，正确的做法是：

• Query端点（getAddresses）用providesTags标记它提供的缓存标签
• Mutation端点（addAddress）用invalidatesTags标记需要失效的标签，触发对应缓存的重新获取

修改后的代码如下：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { IAddress } from '../../../pages/UserProfile/components/Sections/Addresses';

interface GetMyInfoResponse {
  data: { addresses: IAddress[] };
  message: string;
  statusCode: number;
}

interface AddAddressResponse {
  data: { address: IAddress };
  message: string;
  statusCode: number;
}

export const addressApi = createApi({
  reducerPath: 'addressApi',
  tagTypes: ['address'],
  baseQuery: fetchBaseQuery({
    baseUrl: 'http://localhost:3000/address',
    prepareHeaders: (headers: Headers) => {
      const token = JSON.parse(localStorage.getItem('user') || '{}');
      if (token) headers.set('authorization', `Bearer ${token.accessToken}`);
      return headers;
    },
  }),

  endpoints: (builder) => ({
    getAddresses: builder.query<GetMyInfoResponse, void>({
      query: () => ({ url: `/` }),
      providesTags: ['address'],
    }),
    addAddress: builder.mutation<AddAddressResponse, IAddress>({
      query: (body) => ({
        url: `/`,
        method: 'POST',
        body,
      }),
      // 替换为invalidatesTags
      invalidatesTags: ['address'],
    }),
  }),
});

export const { useGetAddressesQuery, useAddAddressMutation } = addressApi;

关键说明： #

• providesTags是Query专属配置，用来声明当前Query提供哪些标签的缓存数据
• invalidatesTags是Mutation专属配置，用来声明当前Mutation执行后需要让哪些标签的缓存失效
• 当addAddress执行成功后，RTK Query会自动找到所有标记为address的Query缓存（也就是getAddresses的缓存），触发重新请求并更新组件显示的地址列表

内容的提问来源于stack exchange，提问作者Mohammad ARZ