rtk查询合并数据,标签,突变

您可以添加 onQueryStarted 的处理程序 createNewUser 调度操作以更新的缓存的端点 getUsers 端点。这与申请基本相同 Optimistic Updates .

基本示例:

export const usersApi = createApi({
  reducerPath: "userApi",
  baseQuery: fetchBaseQuery({ baseUrl: "url" }),
  tagTypes: ['User'],
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: ({ page }) => `users?page=${page}&count=6`,
      serializeQueryArgs: ({ endpointName }) => {
        return endpointName
      },
      merge: (currentCache, newItems, { arg }) => {
        currentCache?.users?.push(...newItems?.users)
      },
      forceRefetch({ currentArg, previousArg }) {
        return currentArg !== previousArg
      },
      providesTags: ['User']
    }),
    createNewUser: builder.mutation({
      query: ({ token, formData }) => ({
        url: `users`,
        method: 'POST',
        headers: {
          'Token': token,
        },
        body: formData,
      }),
      invalidatesTags: ['User'],
      onQueryStarted: async (arg, { dispatch, queryFulfilled }) => {
        // Dispatch API utility to update the getUsers endpoint cache
        const patchResult = dispatch(usersApi.util.updateQueryData(
          "getUsers",
          undefined,
          draft => {
            // check this access, I'm just guessing based on information
            // provided above in getUsers cache merging
            draft.users = [];
          }
        ));
    
        try {
          await queryFulfilled;
        } catch {
          // Undo if there were any mutation errors
          patchResult.undo();
        }
      },
    }),
  }),
});