From f13bf1e2bfd750f94bba777d09b3ad9fc4d216e7 Mon Sep 17 00:00:00 2001
From: Soichi Takamura <thepiglovesyou@gmail.com>
Date: Sun, 26 Jan 2020 12:32:58 +0900
Subject: [PATCH] [example with-typescript-graphql] Fix type error (#10269)

* fix: Type error

* Improve README.md
---
 examples/with-typescript-graphql/README.md        | 6 +++---
 examples/with-typescript-graphql/lib/resolvers.ts | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/examples/with-typescript-graphql/README.md b/examples/with-typescript-graphql/README.md
index bf299a32ec9389c..cd4ae272cd9c242 100644
--- a/examples/with-typescript-graphql/README.md
+++ b/examples/with-typescript-graphql/README.md
@@ -1,11 +1,11 @@
-# GraphQL and TypeScript Example
+# TypeScript and GraphQL Example
 
 One of the strengths of GraphQL is [enforcing data types on runtime](https://graphql.github.io/graphql-spec/June2018/#sec-Value-Completion). Further, TypeScript and [GraphQL Code Generator](https://graphql-code-generator.com/) (graphql-codegen) make it safer by typing data statically, so you can write truly type-protected code with rich IDE assists.
 
 This template extends [Apollo Server and Client Example](https://github.com/zeit/next.js/tree/canary/examples/api-routes-apollo-server-and-client#readme) by rewriting in TypeScript and integrating [graphql-let](https://github.com/piglovesyou/graphql-let#readme), which runs [TypeScript React Apollo](https://graphql-code-generator.com/docs/plugins/typescript-react-apollo) in [graphql-codegen](https://github.com/dotansimha/graphql-code-generator#readme) under the hood. It enhances the typed GraphQL use as below.
 
 ```typescript jsx
-import { useNewsQuery } from './news.grpahql'
+import { useNewsQuery } from './news.graphql'
 
 const  News: React.FC = () => {
 	// Typed already️⚡️
@@ -59,7 +59,7 @@ now
 
 ## Notes
 
-By default `**/*.graphqls` is recognized as GraphQL schema and `**/*.graphql` as GraphQL documents. If you prefer the other extensions, make sure the settings of the webpack loader in `next.config.js` and `.graphql-let.yml` point to the same files.
+By default `**/*.graphqls` is recognized as GraphQL schema and `**/*.graphql` as GraphQL documents. If you prefer the other extensions, make sure the settings of the webpack loader in `next.config.js` and `.graphql-let.yml` are consistent.
 
 Note: Do not be alarmed that you see two renders being executed. Apollo recursively traverses the React render tree looking for Apollo query components. When it has done that, it fetches all these queries and then passes the result to a cache. This cache is then used to render the data on the server side (another React render).
 https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree
diff --git a/examples/with-typescript-graphql/lib/resolvers.ts b/examples/with-typescript-graphql/lib/resolvers.ts
index b408e6353a9ab58..1bd9511549d683c 100644
--- a/examples/with-typescript-graphql/lib/resolvers.ts
+++ b/examples/with-typescript-graphql/lib/resolvers.ts
@@ -1,4 +1,6 @@
-const resolvers = {
+import { IResolvers } from 'apollo-server-micro'
+
+const resolvers: IResolvers = {
   Query: {
     viewer(_parent, _args, _context, _info) {
       return { id: 1, name: 'John Smith', status: 'cached' }