Setting initialData query key

[0ximjosh]

Currently with react query if you set initialData it is treated as the initial / fallback data for all future requests untill removed from cache. Im using tRPC in the following examples but the behavior lives in react-query. This is particularly important for nextjs app directory, where we can trivially get initialData from a server component and pass it to our client components to load during SSR for zero pop-in. Take the following example where we use a query to search for a users TODO items.

// This is run on the server at run time when the user initially requests the page.
export default function Page(){
    const caller = appRouter.createCaller()
    // Lets say that when we search, we are ordering by the search string, then by creation date. The following
    // would yeild the most recent 20 todos.
    const initialData = caller.getTodos({search: ''})
    return <ClientPage initialData={initialData} />
}

// This is server side rendered. The code will run on the server once, then on the client from then-on.
export default function ClientPage({initialData: /*Our initialData type*/}){
    const [search, setSearch] = useState('')
    const todos = trpc.getTodos.useQuery(
        { search },
        {
            initialData: initialData,
            refetchOnMount: false,
            refetchOnReconnect: false,
            refetchOnWindowFocus: false
            staleTime: 5000,

        },
    );
    return <>{/*Our rendered list of TODO's, with a search bar to search for new TODOs*/}</>
}

The above example will let us render our todo list on page load with no popin since our data is gathered from the server component, then populated into client component during server-side rendering. The problem is when we now want to search for a new TODO; The above code will flicker our initialTodos every time todos.isLoading is true since intialData is treated as the intial data for ALL query keys. We can solve this by setting {initialDataUpdatedAt: 0}, which will essentially tell react query that our cached data is so old we shouldnt use it as previousData (outside the default cache time of 5 minutes). This however has the side effect of forcing another fetch request being sent on page load, since react query wants to populate the expired cache. When it makes the new request on page load (this will happen regardless of refetchOnXXX as long as initialDataUpdatedAt is older than Date.now() - cacheTime) it will do so with the knowledge of the current query key, and will only update the cache for the initial query key, and treat all other query keys as out of cache.

The desired outcome is to be able to populate initialData such that page load does not trigger another request AND the cache is empty except for our initial query key. A simple proposition that does not introduce a breaking change would be to simply add a initialDataKey that can be optionally set, specifying what cache key to use for our initial data so that new requests do not fall back to our initial data while not having to refetch on initial mount.
Im open to making a PR on this if anyone would be willing to point me in the right direction of where to start, along with a greenlight that this is a reasonable feature.

[TkDodo]

AND the cache is empty except for our initial query key.

Then implement it like that:

export default function ClientPage({initialData: /*Our initialData type*/}){
    const [search, setSearch] = useState('')
    const todos = trpc.getTodos.useQuery(
        { search },
        {
-           initialData: initialData,
+           initialData: search === '' ? initialData : undefined,
            refetchOnMount: false,
            refetchOnReconnect: false,
            refetchOnWindowFocus: false
            staleTime: 5000,

        },
    );
    return <>{/*Our rendered list of TODO's, with a search bar to search for new TODOs*/}</>
}

What you have to understand is that initialData is used to populate a cache entry if a cache entry becomes used for the first and there is no data in the cache yet for that entry. When you change between query keys, you switch from observing one cache entry to another. trpc hides that a bit, but every input is part of the QueryKey. So when you change search, you create a new cache entry. As far as React Query is concerned, this entry has nothing to do with the entry you were seeing before that. It's brand new, so initialData is applied if its passed.

[0ximjosh]

Ahh this makes a lot of sense. Thank you so much! I appreciate the help.