Vite + Solid.js

Vite + Solid.js example demonstrates how to use WunderGraph with Solid.js . It uses Solid Query for data fetching.

Configuration

Let's start by configuring WunderGraph.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// wundergraph.config.ts
const spaceX = introspect.graphql({
apiNamespace: 'spacex',
url: 'https://spacex-api.fly.dev/graphql/',
});
configureWunderGraphApplication({
apis: [spaceX],
server,
operations,
codeGenerators: [
{
templates: [templates.typescript.client],
path: '../generated',
},
],
});

What's notable here is that we're using templates.typescript.client to generate our base client that is used by Solid Query @wundergraph/solid-query package.

Next up is setting up the Solid Query hooks.

1
2
3
4
5
6
7
// lib/wundergraph.ts
import { createClient, Operations } from '../generated/client';
import { createHooks } from '@wundergraph/solid-query';
export const client = createClient();
export const { createQuery, createMutation, createSubscription, useUser, useAuth } = createHooks<Operations>(client);

WunderGraph comes with a powerful framework for generating code. Here we are creating fully typed Solid Query hooks based on the operations of our WunderGraph application.

Define an Operation

1
2
3
4
5
6
7
# .wundergraph/operations/Dragons.graphql
query Dragons {
spacex_dragons {
name
active
}
}

Run a Query

1
2
3
4
5
6
7
8
9
import { createQuery } from '../lib/wundergraph';
const App = () => {
const dragons = createQuery({
operationName: 'Dragons',
});
return <div>{JSON.stringify(dragons.data)}</div>;
};
export default App;

Run a LiveQuery

1
2
3
4
5
6
7
8
9
10
import { createQuery } from '../lib/wundergraph';
const App = () => {
const dragons = createQuery({
operationName: 'Dragons',
liveQuery: true,
});
return <div>{JSON.stringify(dragons.data)}</div>;
};
export default App;

Learn more

Deploy to WunderGraph Cloud

The easiest way to deploy your WunderGraph app is to use WunderGraph Cloud . Enable the Vercel integration to deploy the Vite frontend to Vercel.

Deploy to WunderGraph

Was this article helpful to you?
Provide feedback

Edit this page