我是RTK查询的新手,我正在努力解决一个必须实现的用例.

Scenario:

Problem:

Question:

import { createEntityAdapter } from '@reduxjs/toolkit';
import axios from 'axios';

export const personsAdapter = createEntityAdapter();
const permitsInitialState = personsAdapter.getInitialState();

export const apiSlice = myServiceApi.injectEndpoints({
  endpoints: (builder) => ({
    getPersons: builder.query({
      query: () => ({ url: '/persons', method: 'get' }),
      onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
        try {
          // Resolving the private API call
          const { data: persons } = await queryFulfilled;

          // Just a random public API call
          const { data: todos } = await axios('https://jsonplaceholder.typicode.com/todos');

          const enhancedPersons = /** Here the logic that merge the todos and the persons */

          const state = personsAdapter.setAll(permitsInitialState, enhancedPermits);

          dispatch(
            apiSlice.util.updateQueryData('getPersons', _, (draft) => {
              Object.assign(draft, state);
            })
          );
        } catch (e) {
          console.error(e);
        }
      },
    }),
  }),
});

推荐答案

这是queryFn: Performing multiple requests with a single query的用例之一

import {
  createApi,
  fetchBaseQuery,
  FetchBaseQueryError,
} from '@reduxjs/toolkit/query'
import { Post, User } from './types'

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/ ' }),
  endpoints: (build) => ({
    getRandomUserPosts: build.query<Post, void>({
      async queryFn(_arg, _queryApi, _extraOptions, fetchWithBQ) {
        // get a random user
        const randomResult = await fetchWithBQ('users/random')
        if (randomResult.error) throw randomResult.error
        const user = randomResult.data as User
        const result = await fetchWithBQ(`user/${user.id}/posts`)
        return result.data
          ? { data: result.data as Post }
          : { error: result.error as FetchBaseQueryError }
      },
    }),
  }),
})

Reactjs相关问答推荐

在react中向数组状态添加值时出错

如何在重新图表中更改悬停时的条形填充 colored颜色 ?

在Reaction中更新状态时,我将变得未定义

如何在与AntD的react 中限制文件上传和显示消息?

如何在整个应用程序中显示通用弹出窗口中的点击事件

使用Ionic 7和React 18,如何访问历史对象以在页面之间导航?

ReactJS:唯一项目的数量总和

根据处于react 状态的数组的名称键,将新对象添加到嵌套的对象数组中

为什么React UseEffect挂钩在页面重新加载时运行

为 Next.js 应用程序目录中的所有页面添加逻辑的全局文件是什么?

Mui 在 TextField 标签上添加工具提示显示两个工具提示框

运行 npm run build 出现问题

next js 13 在获取中使用标头时动态渲染而不是静态渲染?

React Native PermissionsAndroid 不包括 READ_MEDIA_IMAGES.如何解决这个问题?

Cypress ,重试不再附加到 DOM 的元素

错误:无效挂钩调用.钩子只能在函数组件的主体内部调用.使用 next/router 时

React 检测哪些 props 在 useEffect 触发器上发生了变化

将鼠标悬停在仅适用于该类的第一个实例的 p5.js 类上

您无权使用阻止 webRequest 侦听器.请务必在 list 中声明 webRequestBlocking 权限

下拉菜单在 AppBar 中未正确对齐