react.query怎么在onSuccess中获取请求参数？

作者站长头像
站长
· 阅读数 7
 queryClient.setQueryDefaults('list', {
    queryFn: async ({ queryKey }) => {
      const [, page, pageSize] = queryKey as ListQueryKey;
      return await getSomeThing({ page, size: pageSize});
    },
    onSuccess: (data, variables, context) => {
      const previousData = queryClient.getQueryData('list'); // 获取之前的数据
      const page = variables[1]; // 从查询键中获取 page 参数

      // 判断 page 是否等于 1，如果是，则替换之前的数据，否则合并新数据
      if (page === 1) {
        queryClient.setQueryData('list', data); // 替换之前的数据
      } else if (previousData) {
        // 合并新数据到之前的数据中
        queryClient.setQueryData('list', [...previousData, ...data]);
      }
    },
  });

上面的代码中，我需要在onSuccess中获取page的值，但是onSuccess的参数只有data，没有variables，react-query的版本是3.29，请问怎么解决。

回复
1个回答
avatar
test
2024-06-27
queryClient.setQueryDefaults('list', {
  queryFn: async ({ queryKey }) => {
    const [, page, pageSize] = queryKey as ListQueryKey;
    const data = await getSomeThing({ page, size: pageSize});
    return { data, page }; // 把 page 参数和数据一起返回
  },
  onSuccess: (data, variables, context) => {
    const previousData = queryClient.getQueryData('list'); // 获取之前的数据
    const page = context.page; // 从 context 中获取 page 参数

    // 判断 page 是否等于 1，如果是，则替换之前的数据，否则合并新数据
    if (page === 1) {
      queryClient.setQueryData('list', data.data); // 替换之前的数据
    } else if (previousData) {
      // 合并新数据到之前的数据中
      queryClient.setQueryData('list', [...previousData, ...data.data]);
    }
  },
});
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容