diff --git a/examples/with-typescript-graphql/.babelrc b/examples/with-typescript-graphql/.babelrc
new file mode 100644
index 0000000000000000000000000000000000000000..1ff94f7ed28e16b0f67a3c126125621244502149
--- /dev/null
+++ b/examples/with-typescript-graphql/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}
diff --git a/examples/with-typescript-graphql/.gitignore b/examples/with-typescript-graphql/.gitignore
index bf9160868c194bbd2015e46c6129f0d5d54b66a6..4b107f299be6b422322e2bc6e025d51a0df7dbd9 100644
--- a/examples/with-typescript-graphql/.gitignore
+++ b/examples/with-typescript-graphql/.gitignore
@@ -33,6 +33,7 @@ yarn-error.log*
 # vercel
 .vercel
 
-# graphql
+# graphql-let
+__generated__
 *.graphql.d.ts
 *.graphqls.d.ts
diff --git a/examples/with-typescript-graphql/.graphql-let.yml b/examples/with-typescript-graphql/.graphql-let.yml
index f7a66d62e1507bcc7f1869ba31906e7821cf1fdb..160b9d9659c036d14e0c3ddba2dab50b486cfe52 100644
--- a/examples/with-typescript-graphql/.graphql-let.yml
+++ b/examples/with-typescript-graphql/.graphql-let.yml
@@ -1,7 +1,8 @@
-schema: lib/type-defs.graphqls
+schema: '**/*.graphqls'
+schemaEntrypoint: 'lib/type-defs.graphqls'
 documents: '**/*.graphql'
 plugins:
   - typescript
   - typescript-operations
   - typescript-react-apollo
-respectGitIgnore: true
+cacheDir: __generated__
diff --git a/examples/with-typescript-graphql/jest.config.js b/examples/with-typescript-graphql/jest.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..d4822613052fd597acfa401e0b7661d2621692f2
--- /dev/null
+++ b/examples/with-typescript-graphql/jest.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+  roots: ['<rootDir>'],
+  moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
+  testPathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|.next)[/\\\\]'],
+  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'],
+  transform: {
+    '^.+\\.(ts|tsx)$': 'babel-jest',
+    '\\.graphql$': [
+      'graphql-let/jestTransformer',
+      { subsequentTransformer: 'babel-jest' },
+    ],
+  },
+}
diff --git a/examples/with-typescript-graphql/lib/apollo.ts b/examples/with-typescript-graphql/lib/apollo.ts
index 4c49c80edfba892c6340f0735b0a7100ab478f39..961769f6491e79b384c1f8d2b5bd0cef3749092e 100644
--- a/examples/with-typescript-graphql/lib/apollo.ts
+++ b/examples/with-typescript-graphql/lib/apollo.ts
@@ -1,7 +1,10 @@
 import { IncomingMessage, ServerResponse } from 'http'
 import { useMemo } from 'react'
-import { ApolloClient } from 'apollo-client'
-import { InMemoryCache, NormalizedCacheObject } from 'apollo-cache-inmemory'
+import {
+  ApolloClient,
+  InMemoryCache,
+  NormalizedCacheObject,
+} from '@apollo/client'
 
 let apolloClient: ApolloClient<NormalizedCacheObject> | undefined
 
@@ -12,11 +15,11 @@ export type ResolverContext = {
 
 function createIsomorphLink(context: ResolverContext = {}) {
   if (typeof window === 'undefined') {
-    const { SchemaLink } = require('apollo-link-schema')
+    const { SchemaLink } = require('@apollo/client/link/schema')
     const { schema } = require('./schema')
     return new SchemaLink({ schema, context })
   } else {
-    const { HttpLink } = require('apollo-link-http')
+    const { HttpLink } = require('@apollo/client')
     return new HttpLink({
       uri: '/api/graphql',
       credentials: 'same-origin',
diff --git a/examples/with-typescript-graphql/lib/partial.graphql b/examples/with-typescript-graphql/lib/partial.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..7ad627852a9c897a6d8bc0870cc42ef8d2ee7f95
--- /dev/null
+++ b/examples/with-typescript-graphql/lib/partial.graphql
@@ -0,0 +1,4 @@
+fragment Partial on User {
+  id
+  name
+}
diff --git a/examples/with-typescript-graphql/lib/schema.ts b/examples/with-typescript-graphql/lib/schema.ts
index 892911d18a6cf42d9419135a245adb17c902949a..b7e0f139e062e929da67c865f3dec2a182e754fa 100644
--- a/examples/with-typescript-graphql/lib/schema.ts
+++ b/examples/with-typescript-graphql/lib/schema.ts
@@ -1,7 +1,13 @@
-import { makeExecutableSchema } from 'graphql-tools'
-import typeDefs from './type-defs.graphqls'
+import { join } from 'path'
+import { makeExecutableSchema } from '@graphql-tools/schema'
+import { loadFilesSync } from '@graphql-tools/load-files'
+import { mergeTypeDefs } from '@graphql-tools/merge'
+import graphQLLetConfig from '../.graphql-let.yml'
 import resolvers from './resolvers'
 
+const loadedFiles = loadFilesSync(join(process.cwd(), graphQLLetConfig.schema))
+const typeDefs = mergeTypeDefs(loadedFiles)
+
 export const schema = makeExecutableSchema({
   typeDefs,
   resolvers,
diff --git a/examples/with-typescript-graphql/lib/type-defs.graphqls b/examples/with-typescript-graphql/lib/type-defs.graphqls
index ad9c06bcca78ef40ff0b36cddcff44e589f6b4c0..450cd78a87e03778c848ef7f061c0e69627917e6 100644
--- a/examples/with-typescript-graphql/lib/type-defs.graphqls
+++ b/examples/with-typescript-graphql/lib/type-defs.graphqls
@@ -1,9 +1,3 @@
-type User {
-  id: ID!
-  name: String!
-  status: String!
-}
-
 type Query {
   viewer: User!
 }
diff --git a/examples/with-typescript-graphql/lib/user.graphqls b/examples/with-typescript-graphql/lib/user.graphqls
new file mode 100644
index 0000000000000000000000000000000000000000..b9aad32a51ef512d25a8b1495922d454037024f9
--- /dev/null
+++ b/examples/with-typescript-graphql/lib/user.graphqls
@@ -0,0 +1,5 @@
+type User {
+  id: ID!
+  name: String!
+  status: String!
+}
diff --git a/examples/with-typescript-graphql/lib/viewer.graphql b/examples/with-typescript-graphql/lib/viewer.graphql
index e5dd6140a9d3eeec2c695a3014cbc00374090f4f..212b9baf1e5aec55366090e739e295c33f4bf097 100644
--- a/examples/with-typescript-graphql/lib/viewer.graphql
+++ b/examples/with-typescript-graphql/lib/viewer.graphql
@@ -1,7 +1,8 @@
+# import Partial from './partial.graphql'
+
 query Viewer {
   viewer {
-    id
-    name
+    ...Partial
     status
   }
 }
diff --git a/examples/with-typescript-graphql/next-env.d.ts b/examples/with-typescript-graphql/next-env.d.ts
index aad42ee7ed719aa0916cf4b040787151b92c5489..a6b5cc5a189f6e964705c440e1f05095a9198525 100644
--- a/examples/with-typescript-graphql/next-env.d.ts
+++ b/examples/with-typescript-graphql/next-env.d.ts
@@ -5,3 +5,5 @@ declare module '*.graphqls' {
   import { DocumentNode } from 'graphql'
   export default typeof DocumentNode
 }
+
+declare module '*.yml'
diff --git a/examples/with-typescript-graphql/next.config.js b/examples/with-typescript-graphql/next.config.js
index 27c6697de6b90cc92cb2eb44a4b599486af93c26..c6d3173c08ecec6261009b2ad402424a15b7a23b 100644
--- a/examples/with-typescript-graphql/next.config.js
+++ b/examples/with-typescript-graphql/next.config.js
@@ -9,7 +9,13 @@ module.exports = {
     config.module.rules.push({
       test: /\.graphqls$/,
       exclude: /node_modules/,
-      use: ['graphql-tag/loader', 'graphql-let/schema/loader'],
+      use: ['graphql-let/schema/loader'],
+    })
+
+    config.module.rules.push({
+      test: /\.ya?ml$/,
+      type: 'json',
+      use: 'yaml-loader',
     })
 
     return config
diff --git a/examples/with-typescript-graphql/package.json b/examples/with-typescript-graphql/package.json
index 2e87e097a8ebb662d2adc4445dc7d72672ed119e..39fa7ed8a611e7f1c5c1ff44870a181545e06f87 100644
--- a/examples/with-typescript-graphql/package.json
+++ b/examples/with-typescript-graphql/package.json
@@ -7,36 +7,36 @@
     "codegen": "graphql-let",
     "dev": "yarn codegen && next",
     "build": "yarn codegen && next build",
+    "test": "yarn codegen && jest",
     "start": "next start"
   },
   "dependencies": {
-    "@apollo/react-common": "3.1.4",
-    "@apollo/react-components": "^3.1.5",
-    "@apollo/react-hooks": "3.1.5",
-    "apollo-cache": "^1.3.5",
-    "apollo-cache-inmemory": "^1.6.6",
-    "apollo-client": "^2.6.10",
-    "apollo-link": "1.2.14",
-    "apollo-link-http": "1.5.17",
-    "apollo-link-schema": "1.2.5",
-    "apollo-server-micro": "^2.14.2",
-    "apollo-utilities": "^1.3.3",
-    "graphql": "^14.6.0",
-    "graphql-tag": "^2.10.3",
+    "@apollo/client": "^3.1.3",
+    "@graphql-tools/load-files": "6.0.18",
+    "@graphql-tools/merge": "6.0.18",
+    "@graphql-tools/schema": "6.0.18",
+    "apollo-server-micro": "^2.16.1",
+    "graphql": "15.3.0",
     "next": "latest",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^1.15.1",
-    "@graphql-codegen/plugin-helpers": "^1.15.1",
-    "@graphql-codegen/typescript": "^1.13.3",
-    "@graphql-codegen/typescript-operations": "^1.13.3",
-    "@graphql-codegen/typescript-react-apollo": "^1.13.3",
-    "@graphql-codegen/typescript-resolvers": "^1.15.1",
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.7",
+    "@graphql-codegen/cli": "^1.17.8",
+    "@graphql-codegen/plugin-helpers": "^1.17.8",
+    "@graphql-codegen/typescript": "^1.17.8",
+    "@graphql-codegen/typescript-operations": "^1.17.8",
+    "@graphql-codegen/typescript-react-apollo": "^2.0.6",
+    "@graphql-codegen/typescript-resolvers": "^1.17.8",
+    "@types/react": "^16.9.46",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-test-renderer": "16.9.3",
+    "babel-jest": "26.3.0",
     "graphql-let": "0.x",
-    "typescript": "^3.8.3"
+    "graphql-tag": "2.11.0",
+    "jest": "26.4.0",
+    "react-test-renderer": "16.13.1",
+    "typescript": "^3.9.7",
+    "yaml-loader": "0.6.0"
   }
 }
diff --git a/examples/with-typescript-graphql/pages/_app.tsx b/examples/with-typescript-graphql/pages/_app.tsx
index 73628f4994e5b16d77169b21d242c806f8775f89..d4f4fc67b87b3d49f91fff9b2e1475a3e9383465 100644
--- a/examples/with-typescript-graphql/pages/_app.tsx
+++ b/examples/with-typescript-graphql/pages/_app.tsx
@@ -1,5 +1,5 @@
 import { AppProps } from 'next/app'
-import { ApolloProvider } from '@apollo/react-hooks'
+import { ApolloProvider } from '@apollo/client'
 import { useApollo } from '../lib/apollo'
 
 export default function App({ Component, pageProps }: AppProps) {
diff --git a/examples/with-typescript-graphql/pages/index.tsx b/examples/with-typescript-graphql/pages/index.tsx
index 488c080657114f42fc1031caa67666490fa3806b..60d6177abeb1cb018112fc579e76bcc882928656 100644
--- a/examples/with-typescript-graphql/pages/index.tsx
+++ b/examples/with-typescript-graphql/pages/index.tsx
@@ -3,8 +3,7 @@ import { useViewerQuery, ViewerDocument } from '../lib/viewer.graphql'
 import { initializeApollo } from '../lib/apollo'
 
 const Index = () => {
-  const { data } = useViewerQuery()
-  const { viewer } = data!
+  const { viewer } = useViewerQuery().data!
 
   return (
     <div>
diff --git a/examples/with-typescript-graphql/test/__snapshots__/index.test.tsx.snap b/examples/with-typescript-graphql/test/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..70500c0c466643d1d4f7d98b6e8ff40216142e1f
--- /dev/null
+++ b/examples/with-typescript-graphql/test/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Index renders the html we want 1`] = `
+<div>
+  You're signed in as 
+  Baa
+   and you're 
+  Healthy
+   go to the
+   
+  <a
+    href="/about"
+    onClick={[Function]}
+    onMouseEnter={[Function]}
+  >
+    about
+  </a>
+   
+  page.
+</div>
+`;
diff --git a/examples/with-typescript-graphql/test/index.test.tsx b/examples/with-typescript-graphql/test/index.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6bb35f7a85f845bf042dc2d0f5f9bf383bcee02c
--- /dev/null
+++ b/examples/with-typescript-graphql/test/index.test.tsx
@@ -0,0 +1,37 @@
+import { InMemoryCache, gql } from '@apollo/client'
+import React from 'react'
+import Index from '../pages'
+import renderer from 'react-test-renderer'
+import { MockedProvider } from '@apollo/client/testing'
+
+const cache = new InMemoryCache()
+cache.writeQuery({
+  query: gql`
+    query Viewer {
+      viewer {
+        id
+        name
+        status
+      }
+    }
+  `,
+  data: {
+    viewer: {
+      __typename: 'User',
+      id: 'Baa',
+      name: 'Baa',
+      status: 'Healthy',
+    },
+  },
+})
+
+describe('Index', () => {
+  it('renders the html we want', async () => {
+    const component = renderer.create(
+      <MockedProvider cache={cache}>
+        <Index />
+      </MockedProvider>
+    )
+    expect(component.toJSON()).toMatchSnapshot()
+  })
+})