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

@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# typescript
+*.tsbuildinfo

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.

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

examples/api-routes-graphql/pages/api/graphql.js → 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' }]
     },
   },

examples/api-routes-graphql/pages/index.js → 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>

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