Svelte and Dependent Queries

[EugeneDraitsev]

Hi!

I'm using Svelte 5 and TanStack Query 5.67.1, and I need to reuse queries across multiple components. However, some queries depend on the results of others, and I'm not sure how to properly handle this with TanStack Query.

My simplidied code looks like that ($lib/store/test.store.ts):

import { createQuery } from '@tanstack/svelte-query';
import { derived, get } from 'svelte/store';

import { queryClient } from '$lib';

export const queryA = createQuery(
  {
    queryKey: ['data-a'],
    queryFn: async () => {
      const data = [
        { id: 1, name: 'Data A 1' },
        { id: 2, name: 'Data A 2' },
        { id: 3, name: 'Data A 3' }
      ];

      // wait 1 second before returning data
      await new Promise((resolve) => setTimeout(resolve, 1000));
      return data;
    }
  },
  queryClient
);

export const queryB = createQuery(
  {
    queryKey: ['data-b'],
    queryFn: async () => {
      const data = [
        { id: 1, name: 'Data B 1' },
        { id: 2, name: 'Data B 2' },
        { id: 3, name: 'Data B 3' }
      ];

      // wait 1 second before returning data
      await new Promise((resolve) => setTimeout(resolve, 1000));
      return data;
    },
    // Wait for the data-a query to be successful before running this query
    enabled: get(queryA).isSuccess
  },
  queryClient
);

The issue is that enabled in queryB does not reactively updates when queryA becomes successful. Since get(queryA).isSuccess is evaluated once when the store is initialized, queryB doesn't behave as expected.

I also tried something like that:

export const queryB = derived(queryA, ($queryA, set) => {
	const query = createQuery(
		{
			queryKey: ['data-b'],
			queryFn: async () => {
				const data = [
					{ id: 1, name: 'Data B 1' },
					{ id: 2, name: 'Data B 2' },
					{ id: 3, name: 'Data B 3' }
				];

				// Simulate delay
				await new Promise((resolve) => setTimeout(resolve, 1000));
				return data;
			},
			enabled: $queryA.isSuccess
		},
		queryClient
	);

	// Subscribe to the inner query and update derived store
	const unsubscribe = query.subscribe(set);

	// Cleanup function to unsubscribe when `queryA` changes
	return () => unsubscribe();
});

but this doesn't seem like the right way to solve this problem

How should I properly make queryB reactive to queryA's state?
Are there best practices for handling dependent queries in Svelte with TanStack Query?

Thanks in advance!