oRPC is currently pre-stable, please report any issues on our Discord or GitHub 🚧
oRPC
background

Vue Colada

Simplify oRPC usage with minimal integration Pinia Colada

Installation

npm install @orpc/client @orpc/vue-colada @pinia/colada

Setup

import {  } from '@orpc/vue-colada';
import {  } from '@orpc/client';
import {  } from '@orpc/client/fetch';
import type {  } from 'examples/server';
 
const  = new ({
  : 'http://localhost:3000/api',
  // fetch: optional override for the default fetch function
  // headers: provide additional headers
});
 
// Create an ORPC client
export const  = <typeof >();
 
// Create Vue Query utilities for ORPC
export const  = ();
 
..
  • key
  • mutationOptions
  • queryOptions

Multiple ORPC Instances

To prevent conflicts when using multiple ORPC instances, you can provide a unique base path to createORPCVueColadaUtils.

import {  } from '@orpc/vue-colada'
 
// Create separate ORPC instances with unique base paths
const  = ('fake-client' as any, ['__user-api__'])
const  = ('fake-client' as any, ['__post-api__'])

This ensures that each instance manages its own set of query keys and avoids any conflicts.

Usage

Standard Queries and Mutations

import { , ,  } from '@pinia/colada'
import {  } from 'examples/vue-colada'
 
// Fetch data
const { :  } = (..({ : { : '123' } }))
 
// Perform mutations
const { :  } = (...())
 
// Invalidate queries
const  = ()
.({ : .() }) // Invalidate all queries
.({ : ...({ : { : 'example' } }) }) // Specific queries

Note: This library enhances Pinia Colada by managing keys and functions for you, providing a seamless developer experience.

On this page