RTK 查询 selectFromResult 导致使用未定义的参数不必要地调用 API

Question

我有一个参数可以是对象或未定义的查询。当我在我的组件中使用函数 selectFromResult 时，调用端点时参数为 undefined.

我明白它应该只从现有数据中获取值而不是调用没有参数的端点。

export const getMessages = (
  build: EndpointBuilder<BaseQueryFn, string, string>
): QueryDefinition<
  IGetMessagesArgs | undefined,
  BaseQueryFn,
  string,
  IGetMessagesResponse
> =>
  build.query<IGetMessagesResponse, IGetMessagesArgs | undefined>({
    providesTags: ['Message'],
    query: (queryArg: IGetMessagesArgs | undefined) => {
      const paginationParamObject = {
        conversation: queryArg?.conversation,
        page: queryArg?.page,
      };
      const paginationQuery = serializeFlatObject(paginationParamObject, '?');
      const filterQuery = serializeFilters(queryArg?.filters);
      return {
        url: `/api/messages${paginationQuery}${filterQuery}`,
      };
    }
  });

在父组件中我这样称呼它

const { data: messages } = useGetMessagesQuery(
    { conversation: conversation || '' },
    { skip: !conversation }
  );

在细节部分

 const { message } = useGetMessagesQuery(undefined, {
    selectFromResult: ({ data }) => ({
      message: data?.items.find((el) => el.id === messageId),
    }),
  });

这种情况下selectFromResult是不是用错了？

Answer 1

selectFromResult 只允许您使用选择器函数更改 result 的形状。
但除此之外，useGetMessagesQuery 仍然像 useGetMessagesQuery 一样工作 - 没有变化。因此，如果您使用 undefined 参数调用 useGetMessagesQuery，它将启动对 undefined 参数的请求。

您的印象似乎是，一旦您添加 selectFromResult，它只会为您提供该端点的随机缓存条目的结果 - 事实并非如此。

RTK 查询 selectFromResult 导致使用未定义的参数不必要地调用 API

RTK Query selectFromResult causing unnecessary call to the API with undefined argument

redux

redux-toolkit

rtk

rtk-query