Introducing the new Solid Query client - WunderGraph
Eelco Wiersma
February 21, 2023·4min 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
We're excited to announce that we now have official Solid.js support! 🎉. This new client is built on top of TanStack Solid Query, and brings all the good stuff from WunderGraph to the Solid.js ecosystem. Query, mutate and subscribe to your WunderGraph API fully typesafe in Solid.js.
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.
The release is still in beta and we're looking for feedback on the API and how it works with Solid.js. If you have any feedback, please let us know by opening an issue on Github or talk to us directly on Discord.
Let's go through quickly how to set it up and how it works.
Installation
Install the Solid 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 you can configure the hooks. Create a new file, for example src/lib/wundergraph.ts and add the following code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Queries
1
2
3
4
5
6
7
8
Turn queries into live queries, live queries are refetched on a interval on the WunderGraph server.
1
2
3
4
5
6
7
Subscriptions
Build realtime apps with subscriptions.
1
2
3
4
5
6
Mutations
1
2
3
4
5
6
7
8
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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
Check out the reference and example app below to learn more about the new Solid Query integration.
Resources
Summary
You can now leverage the power of WunderGraph with Solid.js, we are excited to see what you'll build with it.
Thanks go out to Tanstack for making this awesome async state management library. We will be releasing Svelte and Vue integrations soon, stay tuned!
We would love to know more about your experience with Solid.js. Do you use Vite, or Solid Start? What do you like about it?