Examples

Next.js + React Query Example

The NextJS example demonstrates the power of code generation, when it comes to integrating WunderGraph with frontend frameworks like Next.js.

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
23
24
25
26
27
28
29
// wundergraph.config.ts
const spaceX = introspect.graphql({
apiNamespace: 'spacex',
url: 'https://spacex-api.fly.dev/graphql/',
})
const myApplication = new Application({
name: 'app',
apis: [spaceX],
})
configureWunderGraphApplication({
application: myApplication,
server,
operations,
codeGenerators: [
{
templates: [
...templates.typescript.all,
templates.typescript.operations,
templates.typescript.linkBuilder,
],
},
{
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 the React Query @wundergraph/react-query package.

Define an Operation

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

Install the React Query Client

1
npm i @wundergraph/react-query @tanstack/react-query

Next up is setting up the React Query hooks.

Create a new .ts file for example lib/wundergraph.ts and add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { createClient, Operations } from '../generated/client'
import { createHooks } from '@wundergraph/react-query'
export const client = createClient()
export const {
useQuery,
useMutation,
useSubscription,
useUser,
useAuth,
queryKey,
} = createHooks<Operations>(client)

Configure your App

1
2
3
4
5
6
7
8
9
10
11
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
export default function App({ Component, pageProps }) {
return (
<QueryClientProvider client={queryClient}>
<Component {...pageProps} />
</QueryClientProvider>
)
}

Running the Operation

Now we're ready to run the operation. Edit pages/index.tsx and add the following code:

1
2
3
4
5
6
7
import { NextPage } from 'next'
import { useQuery, withWunderGraph } from '../components/generated/nextjs'
export default function Home() {
const dragons = useQuery({ operationName: 'Dragons' })
return <div>{JSON.stringify(dragons.data)}</div>
}

That's it! You can now run the example with npm run dev and see the result in your browser.

Learn more:

Previous
NextJS

Was this article helpful to you?
Provide feedback

Edit this page