From bb0013f5fa56a18ada94a6b03bcf082f4f1abfd6 Mon Sep 17 00:00:00 2001
From: Max Proske <max@mproske.com>
Date: Fri, 8 Jul 2022 04:44:39 -0700
Subject: [PATCH] chore(examples): Convert `api-routes-graphql` example to
 TypeScript (#38357)

Convert `api-routes-graphql` example to TypeScript to match Contribution docs.

## Documentation / Examples

- [X] Make sure the linting passes by running `pnpm lint`
- [X] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
---
 examples/api-routes-graphql/.gitignore        |  3 +++
 examples/api-routes-graphql/next-env.d.ts     |  5 +++++
 examples/api-routes-graphql/package.json      | 16 ++++++++++-----
 .../pages/api/{graphql.js => graphql.ts}      |  2 +-
 .../pages/{index.js => index.tsx}             |  4 ++--
 examples/api-routes-graphql/tsconfig.json     | 20 +++++++++++++++++++
 6 files changed, 42 insertions(+), 8 deletions(-)
 create mode 100644 examples/api-routes-graphql/next-env.d.ts
 rename examples/api-routes-graphql/pages/api/{graphql.js => graphql.ts} (92%)
 rename examples/api-routes-graphql/pages/{index.js => index.tsx} (87%)
 create mode 100644 examples/api-routes-graphql/tsconfig.json

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"]
+}