Chapter 4) The React `useQuery()` / `useMutation`

[KATT]

The React API

Suggestion A) Similar to existing API

const trpc = createReactQueryHooks<AppRouter>()

const {queries, mutations, useQuery, useMutation} = trpc;

/// usage

function MyComponent() {
  // you can CMD+Click `postById` and jump straight to the backend resolver
  const query1 = useQuery([queries.postById, { id: 1 }], { /* react-query opts  */ })

  // Also same query and will be usable, but you lose jump to definition
  const query2 = useQuery(['postById', { id: 1 }], { /* react-query opts  */ })

  const mutation1 = useMutation(mutations.postUpdate); // <-- jump to definition by clicking `postUpdate`
  const mutation2 = useMutation('updatePost');

  // later used as `mutation.mutate(input)` or `mutation.mutateAsync(input)`

}

Suggestion B) Pseudo-call within hook

trpc.useQuery(client.query.postById({ id: 1 }), { /* react-query options */ })

Suggestion C) Skipping the tuple

Related decision

• Revive https://github.com/trpc/trpc/pull/1058
• Add new input argument onto the react-query options
  • If optional, keep optional, if required, require to pass opts

const trpc = createReactQueryHooks<AppRouter>()

const {queries, mutations, useQuery, useMutation} = trpc;

/// usage

function MyComponent() {
  // you can CMD+Click `postById` and jump straight to the backend resolver
  const query1 = useQuery(queries.postById, { 
    input: { id: 1 }, 
    /* [...] other react-query opts */
  }) 

  // Also same query and will be usable, but you lose jump to definition
  const query2 = useQuery('postById', {
    input: { id: 1 },
    /* [...] other react-query opts */
  }) 
}

[KATT]

Suggestion A won the vote