Follow trpc's new React Query integration style

[musjj]

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

import { useQuery } from '@tanstack/react-query';
import { useTRPC } from './trpc';
export function Greeting() {
  const trpc = useTRPC();
  const greetingQuery = useQuery(trpc.greeting.queryOptions({ name: 'Jerry' }));
  // greetingQuery.data === 'Hello Jerry'
  // [...]
}

The new integration style seems really nice and makes it easier for users coming from React Query to adapt to.

[erwijet]

definitely agree that this would be nice-- i'm looking to utilize react-querys useSuspenseQuery, which doesn't seem to be an option right now in @rspc/react, unless im mistaken?

fwiw, in the meantime there's a pretty straightforward shim i've written for my own purposes-- it may prove useful!

type RSPCQueryOptions<TProc extends ProceduresDef> = {
    queryOptions<K extends TProc["queries"]["key"] & string>(
        keyAndInput: [key: K, ...input: _inferProcedureHandlerInput<TProc, "queries", K>],
    ): UseQueryOptions<inferProcedureResult<TProc, "queries", K>, Error, inferProcedureResult<TProc, "queries", K>, typeof keyAndInput>;
};

function createRspcQueryOptions<TProc extends ProceduresDef>(client: Client<TProc>): RSPCQueryOptions<TProc> {
    return {
        queryOptions(keyAndInput) {
            return queryOptions({
                queryKey: keyAndInput,
                queryFn: () => client.query(keyAndInput),
            });
        },
    };
}

const client = createClient<Procedures>({
    transport: new FetchTransport(endpoint, ...),
});

export const api = Object.assign(client, createRspcQueryOptions(client));

// -- snip --

const Component = () => {
  const { data } = useQuery(api.queryOptions(['router:key', { foo: "bar" }));

  // or even with suspense

  const { data } = useSuspenseQuery(api.queryOptions(['router:key', { foo: "bar" })) 
}