optimistic-gold

Using TRPC's react-query hooks in router

https://github.com/TanStack/router/blob/beta/examples/react/with-trpc-react-query/client/main.tsx* The whole point of me using TRPC was to not having to use fetch/axios/insert-other-fetching-lib but the example for TRPC and react-query uses axios. Is it possible to use only TRPC in the router loader functions but use TRPC through query-hooks in the components?

4 Replies

optimistic-goldOP•4y ago

I understand I can't use the react-query generated hooks within the router loader functions because it's not a component.

stormy-gold•4y ago

I don’t see axios in that example. You sure you linked correctly?

stormy-gold•3y ago

It's a bit confusing -- the with tRPC example does not use fetch, but the trpc-react-query example does. I'm having the hardest time linking to the Stackblitz directly, but the "With trpc react query" sandbox has this snippet:

async function fetchPosts() {
  console.log('Fetching posts...')
  await new Promise((r) => setTimeout(r, 500))
  return axios
    .get<PostType[]>('https://jsonplaceholder.typicode.com/posts')
    .then((r) => r.data.slice(0, 10))
}

async function fetchPosts() {
  console.log('Fetching posts...')
  await new Promise((r) => setTimeout(r, 500))
  return axios
    .get<PostType[]>('https://jsonplaceholder.typicode.com/posts')
    .then((r) => r.data.slice(0, 10))
}

whereas the "with trpc" only example it's more like this:

const dashboardRoute = rootRoute.createRoute({
  path: 'dashboard',
  component: Dashboard,
  loader: async () => {
    return {
      posts: await trpc.posts.query(),
    }
  },
})

const dashboardRoute = rootRoute.createRoute({
  path: 'dashboard',
  component: Dashboard,
  loader: async () => {
    return {
      posts: await trpc.posts.query(),
    }
  },
})

stormy-gold•3y ago

The React Query example is wrong then The server should be the code that is doing that. FWIW, this is fixed now

Gaming

Programming

Using TRPC's react-query hooks in router

Did you find this page helpful?