The NextJS example demonstrates the power of code generation, when it comes to integrating WunderGraph with frontend frameworks like Next.js.
Let's start by configuring WunderGraph.
What's notable here is that we're using
templates.typescript.client to generate our base client that is used by the React Query
Define an Operation
Install the React Query Client
Next up is setting up the React Query hooks.
Create a new
.ts file for example
lib/wundergraph.ts and add the following code:
Configure your App
Running the Operation
Now we're ready to run the operation. Edit
pages/index.tsx and add the following code:
That's it! You can now run the example with
npm run dev and see the result in your browser.