Introducing the new Vue Query client - WunderGraph
Eelco Wiersma
April 20, 2023·3min read
Archive Notice
This article is archived and no longer maintained. It describes an earlier version of WunderGraph, including experimental features that are no longer part of the current product. The concepts and examples may not work as described. For current documentation and guidance, see https://wundergraph.com/cosmo
After React and Solid, we now have official Vue support! 🎉.
State of GraphQL Federation 2026
How are teams governing schema changes, handling production traffic, and measuring Federation success? Share your experience and get early access to the full report. For every valid survey completed, we'll donate $30 to UNICEF.
This new client is built on top of Vue Query, and brings all the good stuff from WunderGraph to the Vue ecosystem. Query, mutate and subscribe to your WunderGraph API fully typesafe in Vue.
The integration has been built by one of our community members, Hebilicious. Thanks Emmanuel, you rock!
Quick start
Installation
Let's have a quick look at how to set it up in a Nuxt project and how to use it. (this assumes you already have Nuxt and WunderGraph installed).
Install the Vue Query client:
Configuration
Before you can use the hooks, you need to modify your code generation to include the base typescript client.
TypeScript wundergraph.config.ts
Now we need to configure the Vue Query client. We'll create a plugin for this.
plugins/vue-query.ts
Usage
Queries
pages/index.vue
Subscriptions
Build realtime apps with subscriptions.
pages/index.vue
Mutations
pages/index.vue
Invalidating queries
Let's say we have a query that fetches the current user's profile in one component and we have a form that updates the profile. We can add an onSuccess handler to the mutation that calls queryClient.invalidateQueries on the GetProfile query and trigger a refetch and update the internal React Query cache.
pages/index.vue
Check out the reference and example app below to learn more about the new Vue Query integration.
Resources
Summary
We're very excited to see the community building integrations for WunderGraph. If you have ideas for other integrations, let us know in the comments below or join us on our Discord server.