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?
You can make use of the enabled boolean. This will disable the query from automatically running until the enabled is set to 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 }
);
};