Populate search from cached query key

[dominik-rls]

Hey, I'm using an infinite query to populate a searchable grid. To make sure data is kept in sync I rely on the cached query key to set the search filter when navigating back. I have quite a few issues with this approach. It works about half of the time - when it doesn't either scroll restoration doesn't work reliably (off by roughly a page or more) or I get the wrong key when navigating back. I'm probably using it completely wrong, but so far I can't figure out what my mistake is. Can someone help me out, if possible?
The layout and item order are stable. Cards can slightly vary in height depending on the label length.

// unrelated code removed
export const Courses: React.FC = () => {
  const [searchInput, setSearchInput] = useState("");
  const [queryKey, setQueryKey] = useState("");
  const [userChangedSearch, setUserChangedSearch] = useState(false);

  const nextIntersection = useInView();
  const queryClient = useQueryClient();

  const handleSearch = () => {
    setQueryKey(searchInput);
  };

  const { fetchNextPage, hasNextPage, data, isError, isLoading, } =
    useInfiniteQuery({
      initialPageParam: 0,
      queryKey: ["courses", queryKey],
      queryFn: ({ pageParam: skip, queryKey }) => {
        const [_, searchQuery] = queryKey;
        return getCoursesAssignedToCustomerInContext({
          searchQuery,
          skip,
          take: PAGE_SIZE,
        });
      },
      getNextPageParam: (currentLastPage) =>
        currentLastPage.to < currentLastPage.total
          ? Math.min(currentLastPage.total, currentLastPage.to)
          : undefined,
      getPreviousPageParam: (currentFirstPage) =>
        currentFirstPage.from > 0
          ? Math.max(0, currentFirstPage.from - PAGE_SIZE)
          : undefined,
    });

  const totalCourseCount = data?.pages?.[0].total ?? 0;
  const pageCount = data?.pages?.length ?? 0;

  useEffect(() => {
    // populate search input with the last query key
    if (userChangedSearch || queryKey) return;
    const matchingQueries = queryClient
      .getQueryCache()
      .getAll()
      .filter((query) =>
        Array.isArray(query.queryKey)
        && query.queryKey[0] === "courses");
    const lastMatchingQuery = matchingQueries.at(-1);
    setSearchInput((lastMatchingQuery?.queryKey?.[1] ?? "") as string);
    setQueryKey((lastMatchingQuery?.queryKey?.[1] ?? "") as string);
  }, [queryClient, queryKey, userChangedSearch]);

  useEffect(() => {
    if (nextIntersection.inView) fetchNextPage();
  }, [nextIntersection.inView]);

  return <PageLayout>
    <CoursesHeader
      inputValue={searchInput}
      setInputValue={(value) => {
        setUserChangedSearch(true);
        setSearchInput(value);
      }}
      searchTerm={queryKey}
      onSearch={handleSearch}
      title={title}
    />
    <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-4 gap-y-6">
      {data?.pages && data.pages.map((page) =>
        <CourseFeedPage key={page.from} page={page} pageNumber={(page.from / PAGE_SIZE) + 1} />
      )}
    </div>
    {hasNextPage ? <div className="mt-12" ref={nextIntersection.ref}>&nbsp;</div>
      : pageCount > 1 ? <PageDivider label={t`common.end`} />
        : null
    }
  </PageLayout>;
};