Make the RPC call as property access on the Proxy

[KATT]

Fork of #17

• This PR changes so that RPC-calls happen "directly" to the resolver on the client. Closes Make the RPC call as property access on the Proxy? #19.
• Also adds a more intuitive ProcedureResult to check the results of a procedure
• 👉 Play with it at https://codesandbox.io/s/github/trpc/v10-playground/tree/katt/proxy?file=/src/client.ts

Allows you to call your API like this:

import type { appRouter } from './server';
import { createClient } from '@trpc/client';

const client = createClient<typeof appRouter>();

async function main() {
  // you can CMD+click `postById` here and jump straight into your backend
  const byId = await client.query.postById({ id: '1' });

  if (byId.ok) {
    console.log('data', byId.data);
  } else {
    console.log(byId.error.code);
  }
}

main();

Upsides

• Client code gets super intuitive and clean

Downsides

• We're actually lying to the compiler and server code will also need a similar proxy to call or some other mapping in order to propagate context
• Requires Proxy
• Requires all procedures to use a trpc.resolver(() => /* ... */)

[esamattis]

Really cool!

We're actually lying to the compiler

Does it matter if it is just the internals? Should not affect the users in any way? 🤔

[KATT]

Does it matter if it is just the internals? Should not affect the users in any way? 🤔

In some cases it might, if they miss using the proxy object for instance or are doing backend-stuff and trying to explicitly call the functions

[KATT]

Furthermore... Wondering how the React-api could look like. I've noticed that when I try to remap functions, I seem to lose CMD+click ability...

A few options

// this is a bit ugly but will work to do CMD+click on `greeting` with to jump to the backend
const { queries } = myQueries
trpc.useQuery(queries.greeting({ name: 'world' }), { /* .. further options */})

// these below won't work to CMD+click on :(
trpc.useQuery.greeting({ name: 'world' }, { /* .. further options */})
trpc.useGreetingQuery({ name: 'world' }, { /* .. further options */})

[KATT]

@colinhacks maybe you have ideas/input on the above?

[esamattis]

@KATT

In some cases it might, if they miss using the proxy object for instance or are doing backend-stuff and trying to explicitly call the functions

Hmm, direct proxy usage might a bit too magical. Explicit query argument does indeed communicate better that there's something more than just a function call going on.

And if it does not work out for the React hook, there some value having them be consistent:

client.query(query.greeting, { name: "world" });
useQuery(query.greeting, { name: "world" });

[KATT]

Merging for now - can be discussed in #26