Examples

Vite + SWR

Vite + SWR example demonstrates the power of code generation, when it comes to integrating WunderGraph with data fetching libraries like SWR .

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 SWR @wundergraph/swr package.

Next up is setting up the SWR hooks.

1
2
3
4
5
6
7
8
9
10
// lib/wundergraph.ts
import { createClient, Operations } from '../generated/client'
import { createHooks } from '@wundergraph/swr'
export const client = createClient()
export const { useQuery, useMutation, useSubscription, useUser, useAuth } =
createHooks<Operations>(client)

WunderGraph comes with a powerful framework for generating code. Here we are creating fully typed SWR 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
10
11
import { useQuery } from '../lib/wundergraph'
const App = () => {
const { data, error } = useQuery({
// This is allows conditional fetching https://swr.vercel.app/docs/conditional-fetching
enabled: true,
operationName: 'Dragons',
})
return <div>{JSON.stringify(data)}</div>
}
export default App

Run a LiveQuery

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

Run Mutations

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { useMutation } from '../lib/wundergraph'
const App = () => {
const { data, error, trigger } = useMutation({
operationName: 'Dragons',
})
const onClick = () => {
trigger({
name: 'test',
})
}
return (
<div>
{JSON.stringify(data)}
<button onClick={onClick}>Click me</button>
</div>
)
}
export default App

Run Subscriptions

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

Authentication

Note: Logout() will trigger a refetch of the user.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { useAuth, useUser } from '../lib/wundergraph'
const App = () => {
const { login, logout } = useAuth()
const { data, error } = useUser()
// Conditional fetching
// const { data, error } = useUser({ enabled: true });
return (
<div>
{JSON.stringify(data)}
<button onClick={() => login('github')}>Login</button>
<button onClick={() => logout()}>Login</button>
</div>
)
}
export default App

File upload

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { useFileUpload } from '../lib/wundergraph'
const App = () => {
const { upload, data, error } = useFileUpload()
const onUpload = () => {
upload({
files: [new File([''], 'test.txt')],
})
}
return (
<div>
{JSON.stringify(data)}
<button onClick={onUpload}>Upload</button>
</div>
)
}
export default App

Global Configuration

You can configure the hooks globally by using the SWRConfig context.

In case the context configuration isn't working, it's likely due to multiple versions of SWR being installed or due to how PNPM or Yarn PnP link packages. To resolve this you can import SWR directly from @wundergraph/swr to make sure the same instance is used.

1
import { SWRConfig, useSWRConfig } from '@wundergraph/swr'

Was this article helpful to you?
Provide feedback

Edit this page