Skip to content

Commit 04c9906

Browse files
piglovesyoupiglovesyou
authoredAug 30, 2020
Update with-typescript-graphql (#16101)
·
@vercel/devlow-bench@0.3.4v9.5.3-canary.26
1 parent 624b748 commit 04c9906

17 files changed

+139
-43
lines changed
 

‎examples/with-typescript-graphql/.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["next/babel"]
3+
}

‎examples/with-typescript-graphql/.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ yarn-error.log*
3333
# vercel
3434
.vercel
3535

36-
# graphql
36+
# graphql-let
37+
__generated__
3738
*.graphql.d.ts
3839
*.graphqls.d.ts

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
schema: lib/type-defs.graphqls
1+
schema: '**/*.graphqls'
2+
schemaEntrypoint: 'lib/type-defs.graphqls'
23
documents: '**/*.graphql'
34
plugins:
45
- typescript
56
- typescript-operations
67
- typescript-react-apollo
7-
respectGitIgnore: true
8+
cacheDir: __generated__

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module.exports = {
2+
roots: ['<rootDir>'],
3+
moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
4+
testPathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|.next)[/\\\\]'],
5+
transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'],
6+
transform: {
7+
'^.+\\.(ts|tsx)$': 'babel-jest',
8+
'\\.graphql$': [
9+
'graphql-let/jestTransformer',
10+
{ subsequentTransformer: 'babel-jest' },
11+
],
12+
},
13+
}

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

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { IncomingMessage, ServerResponse } from 'http'
22
import { useMemo } from 'react'
3-
import { ApolloClient } from 'apollo-client'
4-
import { InMemoryCache, NormalizedCacheObject } from 'apollo-cache-inmemory'
3+
import {
4+
ApolloClient,
5+
InMemoryCache,
6+
NormalizedCacheObject,
7+
} from '@apollo/client'
58

69
let apolloClient: ApolloClient<NormalizedCacheObject> | undefined
710

@@ -12,11 +15,11 @@ export type ResolverContext = {
1215

1316
function createIsomorphLink(context: ResolverContext = {}) {
1417
if (typeof window === 'undefined') {
15-
const { SchemaLink } = require('apollo-link-schema')
18+
const { SchemaLink } = require('@apollo/client/link/schema')
1619
const { schema } = require('./schema')
1720
return new SchemaLink({ schema, context })
1821
} else {
19-
const { HttpLink } = require('apollo-link-http')
22+
const { HttpLink } = require('@apollo/client')
2023
return new HttpLink({
2124
uri: '/api/graphql',
2225
credentials: 'same-origin',

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
fragment Partial on User {
2+
id
3+
name
4+
}

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

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
import { makeExecutableSchema } from 'graphql-tools'
2-
import typeDefs from './type-defs.graphqls'
1+
import { join } from 'path'
2+
import { makeExecutableSchema } from '@graphql-tools/schema'
3+
import { loadFilesSync } from '@graphql-tools/load-files'
4+
import { mergeTypeDefs } from '@graphql-tools/merge'
5+
import graphQLLetConfig from '../.graphql-let.yml'
36
import resolvers from './resolvers'
47

8+
const loadedFiles = loadFilesSync(join(process.cwd(), graphQLLetConfig.schema))
9+
const typeDefs = mergeTypeDefs(loadedFiles)
10+
511
export const schema = makeExecutableSchema({
612
typeDefs,
713
resolvers,

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

-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
type User {
2-
id: ID!
3-
name: String!
4-
status: String!
5-
}
6-
71
type Query {
82
viewer: User!
93
}

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
type User {
2+
id: ID!
3+
name: String!
4+
status: String!
5+
}

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
# import Partial from './partial.graphql'
2+
13
query Viewer {
24
viewer {
3-
id
4-
name
5+
...Partial
56
status
67
}
78
}

‎examples/with-typescript-graphql/next-env.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,5 @@ declare module '*.graphqls' {
55
import { DocumentNode } from 'graphql'
66
export default typeof DocumentNode
77
}
8+
9+
declare module '*.yml'

‎examples/with-typescript-graphql/next.config.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,13 @@ module.exports = {
99
config.module.rules.push({
1010
test: /\.graphqls$/,
1111
exclude: /node_modules/,
12-
use: ['graphql-tag/loader', 'graphql-let/schema/loader'],
12+
use: ['graphql-let/schema/loader'],
13+
})
14+
15+
config.module.rules.push({
16+
test: /\.ya?ml$/,
17+
type: 'json',
18+
use: 'yaml-loader',
1319
})
1420

1521
return config

‎examples/with-typescript-graphql/package.json

+22-22
Original file line numberDiff line numberDiff line change
@@ -7,36 +7,36 @@
77
"codegen": "graphql-let",
88
"dev": "yarn codegen && next",
99
"build": "yarn codegen && next build",
10+
"test": "yarn codegen && jest",
1011
"start": "next start"
1112
},
1213
"dependencies": {
13-
"@apollo/react-common": "3.1.4",
14-
"@apollo/react-components": "^3.1.5",
15-
"@apollo/react-hooks": "3.1.5",
16-
"apollo-cache": "^1.3.5",
17-
"apollo-cache-inmemory": "^1.6.6",
18-
"apollo-client": "^2.6.10",
19-
"apollo-link": "1.2.14",
20-
"apollo-link-http": "1.5.17",
21-
"apollo-link-schema": "1.2.5",
22-
"apollo-server-micro": "^2.14.2",
23-
"apollo-utilities": "^1.3.3",
24-
"graphql": "^14.6.0",
25-
"graphql-tag": "^2.10.3",
14+
"@apollo/client": "^3.1.3",
15+
"@graphql-tools/load-files": "6.0.18",
16+
"@graphql-tools/merge": "6.0.18",
17+
"@graphql-tools/schema": "6.0.18",
18+
"apollo-server-micro": "^2.16.1",
19+
"graphql": "15.3.0",
2620
"next": "latest",
2721
"react": "^16.13.1",
2822
"react-dom": "^16.13.1"
2923
},
3024
"devDependencies": {
31-
"@graphql-codegen/cli": "^1.15.1",
32-
"@graphql-codegen/plugin-helpers": "^1.15.1",
33-
"@graphql-codegen/typescript": "^1.13.3",
34-
"@graphql-codegen/typescript-operations": "^1.13.3",
35-
"@graphql-codegen/typescript-react-apollo": "^1.13.3",
36-
"@graphql-codegen/typescript-resolvers": "^1.15.1",
37-
"@types/react": "^16.9.34",
38-
"@types/react-dom": "^16.9.7",
25+
"@graphql-codegen/cli": "^1.17.8",
26+
"@graphql-codegen/plugin-helpers": "^1.17.8",
27+
"@graphql-codegen/typescript": "^1.17.8",
28+
"@graphql-codegen/typescript-operations": "^1.17.8",
29+
"@graphql-codegen/typescript-react-apollo": "^2.0.6",
30+
"@graphql-codegen/typescript-resolvers": "^1.17.8",
31+
"@types/react": "^16.9.46",
32+
"@types/react-dom": "^16.9.8",
33+
"@types/react-test-renderer": "16.9.3",
34+
"babel-jest": "26.3.0",
3935
"graphql-let": "0.x",
40-
"typescript": "^3.8.3"
36+
"graphql-tag": "2.11.0",
37+
"jest": "26.4.0",
38+
"react-test-renderer": "16.13.1",
39+
"typescript": "^3.9.7",
40+
"yaml-loader": "0.6.0"
4141
}
4242
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { AppProps } from 'next/app'
2-
import { ApolloProvider } from '@apollo/react-hooks'
2+
import { ApolloProvider } from '@apollo/client'
33
import { useApollo } from '../lib/apollo'
44

55
export default function App({ Component, pageProps }: AppProps) {

‎examples/with-typescript-graphql/pages/index.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import { useViewerQuery, ViewerDocument } from '../lib/viewer.graphql'
33
import { initializeApollo } from '../lib/apollo'
44

55
const Index = () => {
6-
const { data } = useViewerQuery()
7-
const { viewer } = data!
6+
const { viewer } = useViewerQuery().data!
87

98
return (
109
<div>

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

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Index renders the html we want 1`] = `
4+
<div>
5+
You're signed in as
6+
Baa
7+
and you're
8+
Healthy
9+
go to the
10+
11+
<a
12+
href="/about"
13+
onClick={[Function]}
14+
onMouseEnter={[Function]}
15+
>
16+
about
17+
</a>
18+
19+
page.
20+
</div>
21+
`;

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

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { InMemoryCache, gql } from '@apollo/client'
2+
import React from 'react'
3+
import Index from '../pages'
4+
import renderer from 'react-test-renderer'
5+
import { MockedProvider } from '@apollo/client/testing'
6+
7+
const cache = new InMemoryCache()
8+
cache.writeQuery({
9+
query: gql`
10+
query Viewer {
11+
viewer {
12+
id
13+
name
14+
status
15+
}
16+
}
17+
`,
18+
data: {
19+
viewer: {
20+
__typename: 'User',
21+
id: 'Baa',
22+
name: 'Baa',
23+
status: 'Healthy',
24+
},
25+
},
26+
})
27+
28+
describe('Index', () => {
29+
it('renders the html we want', async () => {
30+
const component = renderer.create(
31+
<MockedProvider cache={cache}>
32+
<Index />
33+
</MockedProvider>
34+
)
35+
expect(component.toJSON()).toMatchSnapshot()
36+
})
37+
})

0 commit comments

Comments
 (0)
Please sign in to comment.