React Native 存在 RTK 查询分页问题

Question

我有一个 React Native 移动应用程序，我正在尝试使用 RTK 查询管理 API 请求。在“产品”屏幕上，我使用

getProducts

（无限滚动）获取并显示数据。在显示的数据上，我有一个用于删除产品的按钮（

deleteProduct

）。执行

deleteProduct

突变后，我希望删除的产品从屏幕上删除。我尝试使用

providesTags

和

invalidatesTags

，但由于查询中有合并部分，我无法实现这一点。请帮助我。

export const productApi=baseApi.injectEndpoints({
    overrideExisting:true,
    endpoints : (builder) => ({
        getProducts: builder.query({
            query: (page=1) => `url?page=${page}`,
            transformResponse: (response) => {
                return response.data
            },
            serializeQueryArgs: ({ endpointName }) => {
                return endpointName
            },
            merge: (currentCache, newItems) => {
                currentCache.data.push(...newItems.data)
                currentCache.links = newItems?.links;
            },
            forceRefetch({ currentArg, previousArg }) {
                return currentArg !== previousArg
            },
            providesTags: (result) =>
                result
                    ? [
                        ...result.data.map(({ id }) => ({ type: 'Products', id })),
                    ]
                    : [{ type: 'Products', id: 'PARTIAL-LIST' }],
        }),

        deleteProduct: builder.mutation({
            query : (id) => ({
                url: "products/delete",
                method: "POST",
                body: {
                    id:id
                }
            }),
            invalidatesTags: (result, error, id) => [
                { type: 'Products', id },
            ],
        })
    })
})

Answer 1

您可以在

updateQueryData

内使用

onQueryStarted

手动更新该文件的缓存条目 检查 this 出

export const productApi=baseApi.injectEndpoints({
  overrideExisting:true,
  endpoints : (builder) => ({
      getProducts: builder.query({
          query: (page=1) => `url?page=${page}`,
          transformResponse: (response) => {
              return response.data
          },
          serializeQueryArgs: ({ endpointName }) => {
              return endpointName
          },
          merge: (currentCache, newItems) => {
              currentCache.data.push(...newItems.data)
              currentCache.links = newItems?.links;
          },
          forceRefetch({ currentArg, previousArg }) {
              return currentArg !== previousArg
          },
          providesTags: (result) =>
              result
                  ? [
                      ...result.data.map(({ id }) => ({ type: 'Products', id })),
                  ]
                  : [{ type: 'Products', id: 'PARTIAL-LIST' }],
      }),

      deleteProduct: builder.mutation({
          query : (id) => ({
              url: "products/delete",
              method: "POST",
              body: {
                  id:id
              }
          }),
          onQueryStarted: async (arg, { dispatch, queryFulfilled }) => {
              const patchResult = dispatch(
                  productApi.util.updateQueryData('getProducts', (draft) => {
                      draft.data = draft.data.filter((res) => res.id !== arg);
                  }),
              );
              try {
                  await queryFulfilled;
              } catch {
                  patchResult.undo();
              }
          },
      })
  })
})

^ 执行此操作而不是

invalidateTags

，这样就不会触发完全重新加载

唯一的问题是您的分页现在将关闭一个（您加载的下一页实际上会跳过一个项目）。所以你可能必须添加偏移量或其他东西来补偿。我还在想如何处理这个问题