[with-typescript-graphql] fixes breaking changes in graphql-let v0.18…

….0 (#32681)

* Migrate graphql-let v0.18.0 according to the documentation

* lint-fix

Co-authored-by: JJ Kasper <jj@jjsweb.site>

examples/with-typescript-graphql/.gitignore

@@ -37,3 +37,4 @@ yarn-error.log*
 __generated__
 *.graphql.d.ts
 *.graphqls.d.ts
+.cache

examples/with-typescript-graphql/.graphql-let.yml

@@ -3,4 +3,4 @@ documents: '**/*.graphql'
 plugins:
   - typescript-operations
   - typescript-react-apollo
-cacheDir: __generated__
+cacheDir: .cache

examples/with-typescript-graphql/lib/resolvers.ts

@@ -1,4 +1,4 @@
-import { QueryResolvers, MutationResolvers } from './type-defs.graphqls'
+import { QueryResolvers, MutationResolvers } from '@graphql-types@'
 import { ResolverContext } from './apollo'
 
 const userProfile = {

examples/with-typescript-graphql/package.json

@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^1.17.8",
-    "@graphql-codegen/import-types-preset": "1.18.2",
+    "@graphql-codegen/import-types-preset": "^2.1.8",
     "@graphql-codegen/plugin-helpers": "^1.17.8",
     "@graphql-codegen/typescript": "^1.17.8",
     "@graphql-codegen/typescript-operations": "^1.17.8",
@@ -30,11 +30,11 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-test-renderer": "^17.0.1",
     "babel-jest": "26.3.0",
-    "graphql-let": "0.x",
+    "graphql-let": "^0.18.6",
     "graphql-tag": "2.11.0",
     "jest": "26.4.0",
     "react-test-renderer": "^17.0.1",
-    "typescript": "^3.9.7",
+    "typescript": "^4.5.4",
     "yaml-loader": "0.6.0"
   }
 }

examples/with-typescript-graphql/tsconfig.json

@@ -12,8 +12,15 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@graphql-types@": [
+        "node_modules/@types/graphql-let/__generated__/__types__"
+      ]
+    },
+    "incremental": true
   },
   "include": ["next-env.d.ts", "graphql.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", ".cache"]
 }