TypeScript Operations with Next.js

The NextJS TypeScript Operations example demonstrates how you can use TypeScript Operations with WunderGraph & Next.js.

Keep in mind that WunderGraph is frontend framework-agnostic, so you can use it with any frontend framework, not just Next.js.

Usage

To define your first TypeScript Operation, create a new file in the operations directory.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// operations/users/get.ts
import { createOperation, z } from '../../generated/wundergraph.factory';


export default createOperation.query({
  input: z.object({
    id: z.string(),
  }),
  handler: async ({ input }) => {
    return {
      id: input.id,
      name: 'Jens',
      bio: 'Founder of WunderGraph',
    };
  },
});

Now you can use the operation in your NextJS page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { useQuery, withWunderGraph } from '../../components/generated/nextjs';


const Users = () => {
  const { data } = useQuery({
    operationName: 'users/get',
    input: {
      id: '1',
    },
  });
  return (
    <div style={{ color: 'white' }}>
      <div>{data?.id}</div>
      <div>{data?.name}</div>
      <div>{data?.bio}</div>
    </div>
  );
};


export default withWunderGraph(Users);

Types are shared between client and server, that's why we call this isomorphic TypeScript APIs.

If you want to learn more about this feature, how to use it with mutations and subscriptions, have a look at the reference documentation.

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 Next.js frontend to Vercel.

Deploy to WunderGraph
Previous
Next.js with App Directory
Next
Next.js + React Query

Was this article helpful to you?
Provide feedback

Edit this page