Initial Data Reappearing on Each Refetch

[Xevion]

Hi, I'm using tRPC which uses TanStack Query (v4) under the hood.

I have an issue where the initialData (provided via SSR) is being shown whenever I change the query inputs (filterState, or currentpage). It is denounced.

I only want the initialData to be used and shown for the initial load - I also am not interested in caching as most of the data here changes moment to moment.

I've scoured the docs and tried to use a bunch of different options to get it to not show initialData (preferably, it would just keep whatever data was last shown) when the query is refetched.

  const [filterState, setFilter] = useState<BasicThreadFilter>("all");
  const [currentPage, setCurrentPage] = useState<number>(0);
  const debouncedInput = useDebounce({
    page: currentPage,
    filter: filterState
  }, 500);

  const { mutateAsync: refreshCatalog, isLoading } =
    api.threads.refresh.useMutation({
      onSuccess: async () => {
        await refetchThreads();
      },
    });

  const {
    data: { pages: upperPageRange, threads, totalThreads },
    isSuccess,
    refetch: refetchThreads,
  } = api.threads.getAll.useQuery(
    debouncedInput,
    {
      initialData: serverThreads,
      initialDataUpdatedAt: serverThreadsTime,
      cacheTime: 0,
      staleTime: 1000,
      enabled: loggedIn,
    }
  );

I tried specifying that initialData only be available when the defaults are used (which I think is an ugly solution, but it's the solution in this discussion.

    debouncedInput,
    {
      initialData: filterState == "all" && currentPage == 0 ? serverThreads : undefined,
      initialDataUpdatedAt: serverThreadsTime,
      cacheTime: 0,

But I get this error, which means absolutely nothing to me. I assume it's because tRPC wants the type to not be undefined, which is weird since it'll be undefined by default if I don't fill it, right?

Uncaught TypeError: _utils_api__WEBPACK_IMPORTED_MODULE_4__.api.threads.getAll.useQuery(...).data is undefined
    Home index.tsx:98
    React 12
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
index.tsx:98:6

What should I do here? Even if I solve the TypeError above (Typescript does not complain in the editor, only in the browser), it's still a gross solution.

[TkDodo]

when you change the query key (inputs in trpc), you create a new cache entry. That cache entry will then be filled with initialData if you provide it. So, the solution is to only provide initialData if you actually want to see it for a given query.

[mattiaz9]

Is this a new behavior?
Because I remember that the data didn't use to change between refetches, now it reset every time.
How can I tell the library to keep the data of the previous fetch during a refetch?

[TkDodo]

Is this a new behavior?

Most certainly not.

How can I tell the library to keep the data of the previous fetch during a refetch?

It does that, for any given cache entry. Use the devtools to inspect the cache and see what I mean please. If keys change, you can use placeholderData: keepPreviousData to show changes of old cache entries while new ones are fetching.