I have the following useQuery function

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

The url I want to pass is someData from useQueryTest

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

However, someData is always undefined on the first render so the url passed to useQueryBlob is also undefined.

How do I make sure that the url passed to useQueryBlob is not undefined on the first render?

CodePudding user response：

You can make use of the enabled boolean. This will disable the query from automatically running until the enabled is set to true.

useQuery docs

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