createUtils getData not returning data

[codestoragedev]

I think getQueryKey is returning the wrong key?

setup

<script lang="ts">
import { page } from '$app/stores';
import { useQueryClient } from '@tanstack/svelte-query' 
import { trpc } from '$lib/trpc/client';
import { writable } from "svelte/store";
import clonedeep  from "lodash.clonedeep";

const queryClient = useQueryClient();
const utils = trpc($page, queryClient).createUtils();
let id = 5;

const greeting = trpc($page, queryClient).greeting.createQuery({
        where: {
            id: id
        }
});

$: {
    if($greeting?.status === 'success'){
        const queriesData = queryClient.getQueriesData();
        console.log("queriesData",queriesData);
        const queryKey = trpc($page, queryClient).greeting.getQueryKey({
            where: {
                id: id
            }
        });
        console.log("queryKey", queryKey);
        const data = utils.greeting.getData();
        console.log("data",data);

        console.log("queryKey from utils", queryKey)
        //no data
        console.log('no data :(', queryClient.getQueryData(queryKey));

        const newQueryKey = clonedeep(queryKey);
        console.log("newQueryKey", newQueryKey)
        //data
        newQueryKey[1]['type'] = 'query';
        console.log('data found :D', queryClient.getQueryData(newQueryKey))
    }
}

</script>

{#if $greeting.isLoading}
    loading...
{:else}
    {$greeting.data}
{/if}
<h6>Loading data in<br /><code>+page.svelte</code></h6>

Am I doing something wrong? I have made stackblitz https://stackblitz.com/edit/sveltejs-kit-template-default-thhat3?description=The%20default%20SvelteKit%20template,%20generated%20with%20create-svelte&file=src%2Froutes%2F%2Blayout.svelte,src%2Froutes%2F%2Bpage.svelte,src%2Flib%2Ftrpc%2Frouter.ts,src%2Flib%2Ftrpc%2Fcontext.ts,src%2Fhooks.server.ts,src%2Flib%2Ftrpc%2Fclient.ts,src%2Fapp.html&title=SvelteKit%20Default%20Template

[codestoragedev]

Found out that I had to add 'query' as second param. Only still doesn't explain why getData is not working?

const queryKey = trpc($page, queryClient).greeting.getQueryKey({
    where: {
        id: id
    }
}, 'query');

[vishalbalaji]

Hey @codestoragedev The getQueryKey function, by design, does not presume the query type and returns a key that can match both queries and infinite queries through Tanstack Query's fuzzy matching. This is useful in cases where you need to hit both types of queries, like for invalidation, re-fetching, etc. In case of getQueryData, however, Tanstack query does a search with exact set to true, which is why you needed to pass in query in this particular instance. The docs and this GitHub issue go over this in a bit more detail.

https://trpc.io/docs/client/react/getQueryKey https://github.com/TanStack/query/issues/5111#issuecomment-1464864361

However, the issue with getData that you originally brought up was due to a mistake, where I was not passing the correct input to the getQueryData. This should be fixed from v2.2.5, so please check that out and let me know if the issue still persists.

Thanks for raising the issue and pointing this out!