Prefetch dependent queries

[jinsley8]

Is it possible to prefetch dependent queries? I want to use SSR in Next.js for a page but my the first useQuery hook returns a string or null. If it is null I have to run another query to fetch the data from a different source.

So if I prefetch I need to wait for the first query to finish before I could run the second.

This is what I'm doing now with regular client-side rendering, the page id === tokenId. I use next/router to get id from query parameter:

const { data, isLoading, isError, error } = useQuery(['asset', tokenId], () => getAssetData(tokenId));
}

const metadata = data[0].metadata || null;

const {
        data: getMetadata, isLoading: isMetadataLoading, isError: isErrorMetadata, error: errorMetadata,
    } = useQuery(['asset-metadata', metadata], () => getAssetMetadata(tokenId, metadata), {
        // The query will not execute until the asset metadata exists
        enabled: !!metadata,
    });
}

I tried only prefetching the first query using hydration but once the page loads, if I try to navigate to another SSR page, the data from the second query clears and triggers an error.

[TkDodo]

you'd await the prefetch of query1, then get the data from the query cache, then prefetch query2, then dehydrate the whole client (which would then contain results for both queries)