React and Hono RPC

pnpm add @tanstack/react-query hono react

import type { ApplicationApi } from '../server'
import { hc } from 'hono/client'

export const api = hc<ApplicationApi>('/', {
  init: {
    credentials: 'include',
  },
})

import { useQuery } from '@tanstack/react-query'
import { api } from './api'

function GitHubConnections() {
  const connections = useQuery({
    queryKey: ['integrations', 'connections'],
    queryFn: async () => {
      const response = await api.rpc.integrations.connections.$get()
      if (!response.ok) throw new Error('Could not load connections.')
      return response.json()
    },
  })

  if (connections.isPending) return <p>Loading connections…</p>
  if (connections.isError) return <p>{connections.error.message}</p>

  return (
    <ul>
      {connections.data.connections.map((connection) => (
        <li key={connection.connection_id}>{connection.connection_id}</li>
      ))}
    </ul>
  )
}