Solution: ORPC Contract JSON causes page reload with Vite HMR

[hunterwilhelm]

I already found a solution to this but wanted to share what I did to solve it.

The problem: Vite's HMR system can't update because they are static objects at the top of the dependency tree.

The solution: Tell vite it's safe to Update instead of Page Reload and handle the update ourselves.

Step 1: import your contract json as normal

import contract from 'orpc.contract.json'

Step 2: Update the contract using a reactive signal library. E.g. Vue's ref()

And then update the value of the ref as contract changes.

contractRef.value = contract

if (import.meta.hot) {
  contractRef.value = contract
  import.meta.hot.accept()
}

Step 3: Rebuild the orpc client when it changes

function getOrpc() {
  return computed(() => {
    const link = new OpenAPILink(contractRef.value, {
    ...

Step 4: For convenience make a proxy object that accesses whatever the current value of the signal (ref) is.

You can customize with your reactivity library.

function computedObjectToProxyObject<T extends object>(refObj: ComputedRef<T>): T {
  return new Proxy({} as T, {
    get(_, prop) {
      return (refObj.value as any)[prop]
    },
    has(_, prop) {
      return prop in refObj.value
    },
    ownKeys() {
      return Reflect.ownKeys(refObj.value)
    },
    getOwnPropertyDescriptor(_, prop) {
      // Ensure the property descriptor is returned in a way compatible with Proxy traps
      const descriptor = Object.getOwnPropertyDescriptor(refObj.value, prop)
      if (descriptor) {
        // Make the descriptor configurable so Proxy can report it
        return { ...descriptor, configurable: true }
      }
      return undefined
    }
  })
}

Step 6: Feel free to use it as normal, no page reloads, only updates 🥳

export function useOrpc() {
  const orpc = inject(ORPC_INJECTION_KEY)!
  return orpc
}

[unnoq]

And your orpc.contract.json is re-created every time router change, right?

[hunterwilhelm]

Correct