diff --git a/examples/api-routes-graphql/.gitignore b/examples/api-routes-graphql/.gitignore
index 1437c53f70bc2..88b6f0d981643 100644
--- a/examples/api-routes-graphql/.gitignore
+++ b/examples/api-routes-graphql/.gitignore
@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# typescript
+*.tsbuildinfo
diff --git a/examples/api-routes-graphql/next-env.d.ts b/examples/api-routes-graphql/next-env.d.ts
new file mode 100644
index 0000000000000..4f11a03dc6cc3
--- /dev/null
+++ b/examples/api-routes-graphql/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/api-routes-graphql/package.json b/examples/api-routes-graphql/package.json
index 625175f3fa9a5..8efd8d1a1442c 100644
--- a/examples/api-routes-graphql/package.json
+++ b/examples/api-routes-graphql/package.json
@@ -6,11 +6,17 @@
     "start": "next start"
   },
   "dependencies": {
-    "@graphql-yoga/node": "^2.2.1",
-    "graphql": "^16.3.0",
+    "@graphql-yoga/node": "^2.11.2",
+    "graphql": "^16.5.0",
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "swr": "^0.5.6"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "swr": "^1.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.2",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "typescript": "^4.7.4"
   }
 }
diff --git a/examples/api-routes-graphql/pages/api/graphql.js b/examples/api-routes-graphql/pages/api/graphql.ts
similarity index 92%
rename from examples/api-routes-graphql/pages/api/graphql.js
rename to examples/api-routes-graphql/pages/api/graphql.ts
index 33a150bac94e3..555ea510f6771 100644
--- a/examples/api-routes-graphql/pages/api/graphql.js
+++ b/examples/api-routes-graphql/pages/api/graphql.ts
@@ -11,7 +11,7 @@ const typeDefs = /* GraphQL */ `
 
 const resolvers = {
   Query: {
-    users(parent, args, context) {
+    users() {
       return [{ name: 'Nextjs' }]
     },
   },
diff --git a/examples/api-routes-graphql/pages/index.js b/examples/api-routes-graphql/pages/index.tsx
similarity index 87%
rename from examples/api-routes-graphql/pages/index.js
rename to examples/api-routes-graphql/pages/index.tsx
index 9a0bbc3b79538..b06279fada828 100644
--- a/examples/api-routes-graphql/pages/index.js
+++ b/examples/api-routes-graphql/pages/index.tsx
@@ -1,6 +1,6 @@
 import useSWR from 'swr'
 
-const fetcher = (query) =>
+const fetcher = (query: string) =>
   fetch('/api/graphql', {
     method: 'POST',
     headers: {
@@ -21,7 +21,7 @@ export default function Index() {
 
   return (
     <div>
-      {users.map((user, i) => (
+      {users.map((user: any, i: number) => (
         <div key={i}>{user.name}</div>
       ))}
     </div>
diff --git a/examples/api-routes-graphql/tsconfig.json b/examples/api-routes-graphql/tsconfig.json
new file mode 100644
index 0000000000000..b8d597880a1ae
--- /dev/null
+++ b/examples/api-routes-graphql/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}