如何在RTK Query中直接获取接口返回的data.result数据？

使用RTK Query的transformResponse配置项，在接口定义阶段直接将返回的响应数据转换为你需要的result数组，这样调用useGetMoviesQuery后就能直接通过data.map遍历数据。

修改后的API定义代码 #

export const movieApi = createApi({
    reducerPath: 'movieApi',
    baseQuery: fetchBaseQuery({
        baseUrl: 'https://movie-flask.c3-na.altogic.com/'
    }),
    tagTypes: [],
    endpoints: (builder) => ({
        getMovies: builder.query({
            query: () => "movies",
            // 新增transformResponse处理响应数据，直接返回嵌套的result数组
            transformResponse: (response) => response.result
        })
    }),
})
export const { useGetMoviesQuery } = movieApi

修改后的调用代码 #

const { data, error, isLoading } = useGetMoviesQuery();
{data && data.map((item, i) => (
    <Text key={i}>
         {item.name}
    </Text>
))}

补充说明 #

transformResponse的作用是在RTK Query接收到后端原始响应后，对数据做自定义转换，最终把转换后的数据作为useGetMoviesQuery返回的data值。你之前尝试直接在builder.query后加.result无效，是因为builder.query返回的是接口配置对象，并不存在这个属性。

内容的提问来源于stack exchange，提问作者funky-nd