Examples

Next.js + SWR Example

The Next.js + 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
18
19
20
21
22
// wundergraph.config.ts
const spaceX = introspect.graphql({
apiNamespace: 'spacex',
url: 'https://api.spacex.land/graphql/',
})
const myApplication = new Application({
name: 'app',
apis: [spaceX],
})
configureWunderGraphApplication({
application: myApplication,
server,
operations,
codeGenerators: [
{
templates: [templates.typescript.client],
path: '../components/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 '../components/generated/client'
import { createHooks } from '@wundergraph/swr'
export const client = createClient()
export const { useQuery, useMutation, useSubscription } =
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 Queries from Next.js

1
2
3
4
5
6
7
8
9
10
11
12
import { NextPage } from 'next'
import { useQuery } from '../lib/wundergraph'
const Home: NextPage = () => {
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 Home

Run Mutations from Next.js

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

Run Subscriptions from Next.js

Note: Subscriptions are currently not supported with SSR.

1
2
3
4
5
6
7
8
9
10
11
12
13
import { NextPage } from 'next'
import { useSubscription } from '../lib/wundergraph'
const Home: NextPage = () => {
const { data, error } = useSubscription({
operationName: 'Dragons',
input: {
name: 'test',
},
})
return <div>{JSON.stringify(data)}</div>
}
export default Home

Authentication from Next.js

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
17
import { NextPage } from 'next'
import { useAuth, useUser } from '../lib/wundergraph'
const Home: NextPage = () => {
const { login, logout } = useAuth()
const { data, error } = useUser()
// Conditional fetching
// const { data, error } = useUser({ enabled: true });
return (
<div>
{JSON.stringify(data)}
<button onClick={() => login(AuthProviderId.github)}>Login</button>
<button onClick={() => logout()}>Login</button>
</div>
)
}
export default Home

File upload from Next.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { NextPage } from 'next'
import { useFileUpload } from '../lib/wundergraph'
const Home: NextPage = () => {
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 Home
Previous
NextJS

Was this article helpful to you?
Provide feedback

Edit this page