我一直在四处寻找这个问题的答案,但一直没有任何运气. 我是RTK Query的新手,但到目前为止还不错.

我有两个查询,我希望根据第一个查询的缓存响应来转换第二个查询的响应.

目前,这两个查询是同时运行的,因为到目前为止它们彼此独立,但我需要更改它,以便在运行第二个查询之前等待第一个查询.在这个应用程序中,这不是问题,因为这两个查询是应用程序初始化的一部分.数据在会话期间不会发生变化.

第一个查询从数据库中获取一个非常大的JSON对象,该对象基本上只是一个对象array.第二个查询从数据库中获取一些配置,但需要从第一个查询中读取数据以转换和增强一些配置数据.我没有访问后端,所以我不能在服务器上的工作之前提取.

以下是我想要做的事情:

const myApi = createApi({
  reducerPath: 'myApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (builder) => ({
    getFirst: builder.query({
      query: () => '/getFirst',
    }),
    getSecond: builder.query({
      query: () => '/getSecond',
      transformResponse: (response) => {
        ...
        // Transform data using cached data from 'getFirst' query
        ...
        return { ... };
      },
    }),
  }),
});

这是可能的吗,还是我用错误的方式对待它?如有任何可能有用的额外信息,请随时询问.

推荐答案

如果两个API总是一起调用,第一个和第二个,那么为什么不将它们合并到一个端点中,例如getFirstAndSecond

有关详细信息,请参阅Performing Multiple Requests with a Single Query.

基本要点是使用自定义查询函数调用一个API,等待它,然后调用另一个API,等待它,并合并结果.

例如:

const myApi = createApi({
  reducerPath: 'myApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (builder) => ({
    getFirstAndSecond: builder.query({
      queryFn: async (arg, api, extraOptions, baseQuery) => {
        const [results1, results2] = await Promise.all([
          baseQuery('/getFirst'),
          baseQuery('/getSecond'),
        ]);

        // logic to use both results and compute query value to cache/return
        return {
          data: .... the computed value ....
        };
      }
    }),
  }),
});

Reactjs相关问答推荐

如何在useEffect中使用useParams()

如何在没有 node 模块的情况下利用外部Java脚本文件制作OWL carousel

替换谷歌 map api默认信息窗口与自定义

两条react 路由的行为不同.有没有人能解释一下,我已经找了好几天了

XChaCha20-Poly1305的解密函数

有没有一种方法可以在没有强烈动画的情况下有条件地渲染组件?

如何从react 18-nextjs 14应用程序路由中的客户端组件呈现服务器组件?

Reaction Google Maps API无法获取标题

关于forwardRef,我可以';我不理解第二个用例

如何在中间件中获取 nextAuth 会话

UseEffect 似乎不适用于页面的首次渲染

我如何使用 React toastify (Promise) toast 和邮箱 js

使用 nextjs App Router 在动态客户端进行服务器端渲染

Formik onChange() 字段挂钩覆盖显示值和 Select 机制

null 不是对象(判断RNSound.IsAndroid)

无法读取未定义的react native 的属性参数

谁能根据经验提供有关 useEffect 挂钩的更多信息

如何使用 babel 将 SVG 转换为 React 组件?

如果查询不存在,如何返回所有产品?

单击当前子div时如何更改p标签的图像和样式?react