React Redux RTK - 当变量获得值时运行查询答案

【问题标题】：React Redux RTK - run a query when a variable gets valueReact Redux RTK - 当变量获得值时运行查询
【发布时间】：2022-07-27 13:55:06
【问题描述】：

我在 RTK 中有 3 个查询，这些查询在安装组件时运行。第一个查询的数据被传递到第二个和第三个查询中，我使用skip: !isSuccess 让查询仅在data 可用时运行。这工作正常。但是，我的用例略有不同。我希望在第一个查询中从 data 获取 ID 以传递给其他两个查询。如果我按原样发送数据，我必须将IDs = data.map(row => row.id) 放在查询函数中，该函数运行两次，因为有两个查询使用相同的数据。我希望在发送到查询之前提取这些 ID。

这是我的代码的外观 -

# inside the component

const { data, error, isLoading, isSuccess } = useGetDataQuery();
const { data: todoData, error: todoError } = useGetCountersQuery({"issueType": "todos", data}, {skip: !isSuccess});
const { data: rmaData, error: rmaError } = useGetCountersQuery({"issueType": "rmas", data}, {skip: !isSuccess})


    if (error) { console.log(error); }

    if (data) {
        if (!data.success){ 
            console.log("failed"); 
        }
    }

# the query
getCounters: build.query({
            query: ({issueType, data}) => {
                let IDs = data.data.map(row => row.id);
                return ({
                    url: `${issueType}/count`,
                    method: 'POST',
                    body: { IDs }
                })
            }
        })

这是我希望达到的目标-

    let IDs = [];
    const { data, error, isLoading, isSuccess } = useGetDataQuery();
    const { data: todoData, error: todoError } = useGetCountersQuery({"issueType": "todos", data: IDs}, {skip: IDs.length <= 0});
    const { data: rmaData, error: rmaError } = useGetCountersQuery({"issueType": "rmas", data: IDs}, {skip: IDs.length <= 0});


    if (error) { console.log(error); }

    if (data) {
        if (!data.success){ 
            console.log("failed"); 
        }
        IDs = data.data.map(row => row.id);
    }

我已经尝试了多种方法，但我想知道理想的方法。请帮忙。提前致谢！

【问题讨论】：

标签： javascript reactjs redux react-redux redux-toolkit

【解决方案1】：

您可以通过使用 RTK 查询中的 useLazyQuery 而不是借助 useEffect 的常规 useQuery 挂钩来实现此目的。 UseLazyQuery 钩子与 useQuery 类似，但主要区别在于我们可以手动控制何时发生数据获取。这意味着查询不会在组件挂载或渲染时自动触发。

const { data, error, isLoading, isSuccess } = useGetDataQuery();
const [triggerGetCountersTodo, { data: todoData, error: todoError }] =
  useLazyGetCountersQuery();
const [triggerGetCountersRma, { data: rmaData, error: rmaError }] =
  useLazyGetCountersQuery();

useEffect(() => {
  if (isSuccess && data) {

    const ids = data.data.map(row => row.id);
    if (ids.length) {
      triggerGetCountersTodo({ "issueType": "todos", data: ids });
      triggerGetCountersRma({ "issueType": "rmas", data: ids });
    }

  }
}, [data, isSuccess, triggerGetCountersTodo, triggerGetCountersRma]);

【讨论】：