useQuery 参数依赖于来自另一个 useQuery 的数据

Question

我有以下useQuery

const useQueryBlob = (url: string) => {
  return useQuery<Blob>(
    'blob',
    async () => {
      const { data: blob } = await axios.get<Blob>(url, { responseType: 'blob' });
      return blob;
    },
  );
};

我要传递的url是来自useQueryTest的一些数据

  const { data: someData } = useQueryTest('test');
  const { data: blob } = useQueryBlob(someData);

但是， someData在第一次渲染时始终undefined ，因此传递给useQueryBlob的url也是undefined 。

如何确保传递给url的useQueryBlob在第一次渲染时undefined ？

Answer 1

您可以使用已enabled的 boolean。 这将禁止查询自动运行，直到 enabled 设置为true 。

使用查询文档

const useQueryBlob = (url: string | undefined) => {
  return useQuery<Blob>(
    'blob',
    async () => {
      const { data: blob } = await axios.get<Blob>(url, { responseType: 'blob' });
      return blob;
    },
    { enabled: !!url }
  );
};