Latest Blog: How to align Open Source and Enterprise Sales
WunderGraph
Blog
/
Changelog

Introducing the new Vue Query client

cover
Eelco Wiersma

Eelco Wiersma

min read

We're hiring!

We're looking for Golang (Go) Developers, DevOps Engineers and Solution Architects who want to help us shape the future of Microservices, distributed systems, and APIs.

By working at WunderGraph, you'll have the opportunity to build the next generation of API and Microservices infrastructure. Our customer base ranges from small startups to well-known enterprises, allowing you to not just have an impact at scale, but also to build a network of industry professionals.

See Open Positions

After React and Solid, we now have official Vue support! 🎉.

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

1

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:

1

Configuration

Before you can use the hooks, you need to modify your code generation to include the base typescript client.

1
2
3
4
5
6
7
8
9
10
11

Now we need to configure the Vue Query client. We'll create a plugin for this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

Usage

Queries

1
2
3
4
5
6
7
8
9
10

Turn queries into live queries, live queries are refetched on a interval on the WunderGraph server.

1
2
3
4
5
6
7
8
9
10
11

Subscriptions

Build realtime apps with subscriptions.

1
2
3
4
5
6
7
8
9
10

Mutations

1
2
3
4
5
6
7
8
9
10
11
12
13

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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 .

WunderGraph -
Rethinking API Integrations

SOC2 certified
SOC 2 Type II Certified