Disable fetch on mount but fetch on variable change without using refetch

[eoghanmccarthy]

I have 2 requests to make. The first, imageQuery, is sent on mount and returns a url. The second, imageProxyQuery, is not sent on mount but instead after the first is successful and requiring the url as payload. Request calls are in hooks not shown.

It seems that when a query is enabled: false, it doesn't fetch on variable change only when refetch is called. But refetch isn't suitable in this scenario. (I can use refetch by also using a useEffect to trigger refetch on imageUrl change but ideally I could avoid that longwinded solution.)

Is it possible to disable on mount but fetch on variable change?

const [imageUrl, setImageUrl] = useState();

const imageQuery = useImage(imageId, {
    onSuccess: res => {
        setImageUrl(res.data.imageUrl);
    }
});

const imageProxyQuery = useImageProxy(imageUrl, {
    enabled: false,
});

[cherniavskii]

Hi @eoghanmccarthy
Did you try something like this?

const [imageUrl, setImageUrl] = useState();

const imageQuery = useImage(imageId, {
    onSuccess: res => {
        setImageUrl(res.data.imageUrl);
    }
});

const imageProxyQuery = useImageProxy(imageUrl, {
-    enabled: false,
+    enabled: imageUrl,
});

See https://react-query.tanstack.com/docs/guides/queries#dependent-queries

Also, you might not need that imageUrl state - it can be derived from imageQuery:

const imageQuery = useImage(imageId);

const imageUrl = imageQuery.data ? imageQuery.data.imageUrl : null;

const imageProxyQuery = useImageProxy(imageUrl, {
    enabled: imageUrl,
});

[eoghanmccarthy]

That's great, cherniavskii. Exactly what i was looking for, thanks :)