Update with-typescript-graphql (#16101)

examples/with-typescript-graphql/.babelrc

+{
+  "presets": ["next/babel"]
+}

examples/with-typescript-graphql/.gitignore

@@ -33,6 +33,7 @@ yarn-error.log*
 # vercel
 .vercel
 
-# graphql
+# graphql-let
+__generated__
 *.graphql.d.ts
 *.graphqls.d.ts

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

-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__

examples/with-typescript-graphql/jest.config.js

+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' },
+    ],
+  },
+}

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

 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',

examples/with-typescript-graphql/lib/partial.graphql

+fragment Partial on User {
+  id
+  name
+}

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

-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,

examples/with-typescript-graphql/lib/type-defs.graphqls

-type User {
-  id: ID!
-  name: String!
-  status: String!
-}
-
 type Query {
   viewer: User!
 }

examples/with-typescript-graphql/lib/user.graphqls

+type User {
+  id: ID!
+  name: String!
+  status: String!
+}

examples/with-typescript-graphql/lib/viewer.graphql

+# import Partial from './partial.graphql'
+
 query Viewer {
   viewer {
-    id
-    name
+    ...Partial
     status
   }
 }

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'

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

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

examples/with-typescript-graphql/pages/_app.tsx

 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) {

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>

examples/with-typescript-graphql/test/__snapshots__/index.test.tsx.snap

+// 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>
+`;

examples/with-typescript-graphql/test/index.test.tsx

+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()
+  })
+})