Cannot use tRPC infinitequery in SolidStart app

import { For, Match, Show, Switch } from 'solid-js'
import { queryClient, trpc } from '~/utils/api'
import { QueryClientProvider } from '@tanstack/solid-query'
import Post from './Post'

const Timeline = () => {
  const query = trpc.posts.getInfinitePosts.useInfiniteQuery(
    () => ({
      limit: 10,
    }),
    () => ({
      getNextPageParam: lastPage => lastPage.nextCursor,
      defaultPageParam: trpc.posts.getLatestPost.useQuery().data?.id,
    }),
  )

  return (
    <QueryClientProvider client={queryClient}>
      <button onClick={() => query.fetchNextPage()}>Load more</button>
      <Show when={query?.data}>
        <Switch>
          <Match when={query?.isLoading}>Loading...</Match>
          <Match when={query?.isFetchingNextPage}>Fetching...</Match>
          <Match when={query?.isError}>Error: {query.error?.message}</Match>
          <Match when={query?.fetchStatus === 'idle'}>
            <For each={query?.data?.items}>
              {post => (
                <Post
                  author={post.author}
                  content={post.content}
                  tags={post.tags}
                />
              )}
            </For>
          </Match>
        </Switch>
      </Show>
    </QueryClientProvider>
  )
}

import { For, Match, Show, Switch } from 'solid-js'
import { queryClient, trpc } from '~/utils/api'
import { QueryClientProvider } from '@tanstack/solid-query'
import Post from './Post'

const Timeline = () => {
  const query = trpc.posts.getInfinitePosts.useInfiniteQuery(
    () => ({
      limit: 10,
    }),
    () => ({
      getNextPageParam: lastPage => lastPage.nextCursor,
      defaultPageParam: trpc.posts.getLatestPost.useQuery().data?.id,
    }),
  )

  return (
    <QueryClientProvider client={queryClient}>
      <button onClick={() => query.fetchNextPage()}>Load more</button>
      <Show when={query?.data}>
        <Switch>
          <Match when={query?.isLoading}>Loading...</Match>
          <Match when={query?.isFetchingNextPage}>Fetching...</Match>
          <Match when={query?.isError}>Error: {query.error?.message}</Match>
          <Match when={query?.fetchStatus === 'idle'}>
            <For each={query?.data?.items}>
              {post => (
                <Post
                  author={post.author}
                  content={post.content}
                  tags={post.tags}
                />
              )}
            </For>
          </Match>
        </Switch>
      </Show>
    </QueryClientProvider>
  )
}