How to get cache update in another component when data has been updated somewhere else?

Using tanstack/svelte-query.

It returns undefined but the data in the cache is updated after fetching.

const queryClient = useQueryClient();
    $: cache = queryClient.getQueryState<Game[]>(['games'])

    $: console.log('cache', cache)

const queryClient = useQueryClient();
    $: cache = queryClient.getQueryState<Game[]>(['games'])

    $: console.log('cache', cache)

const queryClient = useQueryClient();
    $: cache = queryClient.getQueryState<Game[]>(['games'])

    $: console.log('cache', cache)

const queryClient = useQueryClient();
    $: cache = queryClient.getQueryState<Game[]>(['games'])

    $: console.log('cache', cache)

The code for fetch in the first component:

  const query = createQuery({
        queryKey: ['games'],
        queryFn: () => fetchGames(),
    })

  const query = createQuery({
        queryKey: ['games'],
        queryFn: () => fetchGames(),
    })

  const query = createQuery({
        queryKey: ['games'],
        queryFn: () => fetchGames(),
    })

  const query = createQuery({
        queryKey: ['games'],
        queryFn: () => fetchGames(),
    })