T
TanStack•2y ago
afraid-scarlet

Fetch query after another query has already been fetched

I basically first need to query data to get a specific id. Based on the freshly fetched query I want to fetch another one. This might be an easy problem to solve. I tried many variations of getting it to work, but I can not get it to work reliable. Here is a snippet of the code: 
    const id: string = $page.params.video_project_id as string;
    const campaignId: string = $page.params.campaign_id as string;

    const currentCampaignQuery = createQuery({
        queryKey: ['current_campaign', id],
        queryFn: () => serviceApiCampaign.getById(campaignId),
        
    });

    const availableHeaderQuery = createQuery({
        queryKey: ['available_lead_headers', id],
        queryFn: () =>
            serviceApiLead.getLeadHeadersByAudienceId($currentCampaignQuery.data?.audience_id ?? ''),
        enabled: !!$currentCampaignQuery.data?.audience_id
    });
    const id: string = $page.params.video_project_id as string;
    const campaignId: string = $page.params.campaign_id as string;

    const currentCampaignQuery = createQuery({
        queryKey: ['current_campaign', id],
        queryFn: () => serviceApiCampaign.getById(campaignId),
        
    });

    const availableHeaderQuery = createQuery({
        queryKey: ['available_lead_headers', id],
        queryFn: () =>
            serviceApiLead.getLeadHeadersByAudienceId($currentCampaignQuery.data?.audience_id ?? ''),
        enabled: !!$currentCampaignQuery.data?.audience_id
    });
Sadly the enabled property does not react, if the audience_id is present after the successful fetch of the first query.
5 Replies
afraid-scarlet
afraid-scarletOP•2y ago
let availableHeaderQuery: CreateQueryResult<void, Error>;

$: if (($currentCampaignQuery.data?.audience_id ?? '').length > 0) {
    availableHeaderQuery = createQuery({
        queryKey: ['available_lead_headers', id],
    queryFn: () => serviceApiLead.getLeadHeadersByAudienceId($currentCampaignQuery.data?.audience_id ?? '')
    });
}
let availableHeaderQuery: CreateQueryResult<void, Error>;

$: if (($currentCampaignQuery.data?.audience_id ?? '').length > 0) {
    availableHeaderQuery = createQuery({
        queryKey: ['available_lead_headers', id],
    queryFn: () => serviceApiLead.getLeadHeadersByAudienceId($currentCampaignQuery.data?.audience_id ?? '')
    });
}
This works but I do not think this is how it should be done tho
extended-salmon
extended-salmon•2y ago
https://tanstack.com/query/latest/docs/react/guides/dependent-queries
Dependent Queries | TanStack Query Docs
useQuery dependent Query Dependent (or serial) queries depend on previous ones to finish before they can execute. To achieve this, it's as easy as using the enabled option to tell a query when it is ready to run:
afraid-scarlet
afraid-scarletOP•2y ago
After reviewing the documentation thoroughly and experimenting with various approaches, I'm still facing challenges in Svelte. Despite my efforts, as I mentioned in my initial post, altering the 'enabled' state doesn't appear to trigger data fetching, which is quite frustrating.
extended-salmon
extended-salmon•2y ago
I don't know much about svelte but this definitely works in react, so I'm thinking it might have something to do with reactivity? Sorry if you've already read that page: https://tanstack.com/query/v5/docs/svelte/reactivity
Reactivity | TanStack Query Docs
Svelte uses a compiler to build your code which optimises rendering. By default, components run once, unless they are referenced in your markup. To be able to react to changes in options you need to use stores. In the below example, the refetchInterval option is set from the variable intervalMs, which is bound to the input field. However, as t...
afraid-scarlet
afraid-scarletOP•2y ago
Sadly also reading trough this, did not help. In the documentation page they suggest to use writeables as values. Considering that I am already using a writeable as value in the enabled property like the following 
 enabled: !!$currentCampaignQuery.data?.audience_id
 enabled: !!$currentCampaignQuery.data?.audience_id

Did you find this page helpful?