JSPM

@orpc/vue-query

0.0.0-next.21961be
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 966
  • Score
    100M100P100Q107400F
  • License MIT

Package Exports

  • @orpc/vue-query

Readme

oRPC logo

Typesafe APIs Made Simple 🪄

oRPC is a powerful combination of RPC and OpenAPI, makes it easy to build APIs that are end-to-end type-safe and adhere to OpenAPI standards, ensuring a smooth and enjoyable developer experience.


Highlights

  • End-to-End Type Safety 🔒: Ensure complete type safety from inputs to outputs and errors, bridging server and client seamlessly.
  • First-Class OpenAPI 📄: Adheres to the OpenAPI standard out of the box, ensuring seamless integration and comprehensive API documentation.
  • Contract-First Development 📜: (Optional) Define your API contract upfront and implement it with confidence.
  • Exceptional Developer Experience ✨: Enjoy a streamlined workflow with robust typing and clear, in-code documentation.
  • Multi-Runtime Support 🌍: Run your code seamlessly on Cloudflare, Deno, Bun, Node.js, and more.
  • Framework Integrations 🧩: Supports Tanstack Query (React, Vue, Solid, Svelte), Pinia Colada, and more.
  • Server Actions ⚡️: Fully compatible with React Server Actions on Next.js, TanStack Start, and more.
  • Standard Schema Support 🗂️: Effortlessly work with Zod, Valibot, ArkType, and others right out of the box.
  • Fast & Lightweight 💨: Built on native APIs across all runtimes – optimized for speed and efficiency.
  • Native Types 📦: Enjoy built-in support for Date, File, Blob, BigInt, URL and more with no extra setup.
  • Lazy Router ⏱️: Improve cold start times with our lazy routing feature.
  • SSE & Streaming 📡: Provides SSE and streaming features – perfect for real-time notifications and AI-powered streaming responses.
  • Reusability 🔄: Write once and reuse your code across multiple purposes effortlessly.
  • Extendability 🔌: Easily enhance oRPC with plugins, middleware, and interceptors.
  • Reliability 🛡️: Well-tested, fully TypeScript, production-ready, and MIT licensed for peace of mind.
  • Simplicity 💡: Enjoy straightforward, clean code with no hidden magic.

Documentation

You can find the full documentation here.

Packages

@orpc/vue-query

Integration with Vue Query. Read the documentation for more information.

export function Setup() {
  const query = useQuery(orpc.planet.find.queryOptions({
    input: { id: 123 }, // Specify input if needed
    context: { cache: true }, // Provide client context if needed
  // additional options...
  }))

  const query = useInfiniteQuery(orpc.planet.list.infiniteOptions({
    input: (pageParam: number | undefined) => ({ limit: 10, offset: pageParam }),
    context: { cache: true }, // Provide client context if needed
    initialPageParam: undefined,
    getNextPageParam: lastPage => lastPage.nextPageParam,
  // additional options...
  }))

  const mutation = useMutation(orpc.planet.create.mutationOptions({
    context: { cache: true }, // Provide client context if needed
  // additional options...
  }))

  mutation.mutate({ name: 'Earth' })

  const queryClient = useQueryClient()

  // Invalidate all planet queries
  queryClient.invalidateQueries({
    queryKey: orpc.planet.key(),
  })

  // Invalidate only regular (non-infinite) planet queries
  queryClient.invalidateQueries({
    queryKey: orpc.planet.key({ type: 'query' })
  })

  // Invalidate the planet find query with id 123
  queryClient.invalidateQueries({
    queryKey: orpc.planet.find.key({ input: { id: 123 } })
  })
}

License

Distributed under the MIT License. See LICENSE for more information.