SolidJS•16mo ago

Cannot use tRPC infinitequery in SolidStart app

We (me + @pupbrained) have a solidstart app bootstrapped with create-jd-app, using trpc, prisma, zod, and solidquery. We have a component that hits our api:

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>
  )
}

However, it doesn't work... at all. The query errors with No QueryClient set, use QueryClientProvider to set one. We tried putting the provider in both root.tsx and this component. First image attached shows the trpc procedure for getInfinitePosts, second image shows our root.tsx

1 Reply

feroOP•16mo ago

...overall just unsure where to go from here. i'm not sure if our entire app is setup wrong or something. i also tried making the Timeline component client-side only using ClientSide(), but that didn't change anything

Gaming

Programming

Cannot use tRPC infinitequery in SolidStart app