Max•3mo ago

Why did the usage change in that way?

Bit of a general question. Is there a blogpost or a video talking about that? I personally liked the old usage in the component much better: Old

import { trpc } from './trpc';
function Users() {
  const createUserMutation = trpc.createUser.useMutation();
  createUserMutation.mutate({ name: 'Jerry' });
}

import { trpc } from './trpc';
function Users() {
  const createUserMutation = trpc.createUser.useMutation();
  createUserMutation.mutate({ name: 'Jerry' });
}

New

import { useMutation } from '@tanstack/react-query';
import { useTRPC } from './trpc';
function Users() {
  const trpc = useTRPC();
  const createUserMutation = useMutation(trpc.createUser.mutationOptions());
  createUserMutation.mutate({ name: 'Jerry' });
}

import { useMutation } from '@tanstack/react-query';
import { useTRPC } from './trpc';
function Users() {
  const trpc = useTRPC();
  const createUserMutation = useMutation(trpc.createUser.mutationOptions());
  createUserMutation.mutate({ name: 'Jerry' });
}

Solution:

https://trpc.io/blog/introducing-tanstack-react-query-client

Introducing the new TanStack React Query integration | tRPC

We are excited to announce the new TanStack React Query integration for tRPC is now available on tRPC's next-release. Compared to our classic React Query Integration it's simpler and more TanStack Query-native, choosing to utilize the QueryOptions and MutationOptions interfaces native to TanStack React Query, instead of wrapping useQuery and use...

Jump to solution

3 Replies

MaxOP•3mo ago

im sorry. Bit of an obnoxious question. I found the blog post :0 sorry lukas :/

Solution

Max•3mo ago

https://trpc.io/blog/introducing-tanstack-react-query-client

Introducing the new TanStack React Query integration | tRPC

lukas•3mo ago

TLDR there is a post from @julius explaining that, but i'll simplify below: 1. Everytime react query changes or add more options, params, @trpc/react-query has to update to follow it and add those options and its api, making hard to keep up to date. 2. LESS abstractions: the option had a lot of abstractions and has a deep tight with react query. This has advantages/producvity but also downsizes as mentioned on option 1. So the new approach seems less over bloated and simple having clear boundaries what is trpc and what is react query. Not right or wrong and it seems they will keep maintaining both.

Why did the usage change in that way?

Did you find this page helpful?