From f94cd308490f886fbf12a4214f3e4c48199ab6f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danilo=20B=C3=BCrger?= <info@danilobuerger.de>
Date: Tue, 22 Jan 2019 18:58:21 +0100
Subject: [PATCH] docs: Type the graphql hoc in recipes (#4340)

* docs: Type the graphql hoc in recipes

Fixes https://github.com/apollographql/react-apollo/issues/2705

* Changelog updates
---
 CHANGELOG.md                         |  5 +++++
 docs/source/recipes/static-typing.md | 12 ++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 096fa74919d..8d15a48f620 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 ## Apollo Client (vNext)
 
+### Apollo Client (vNext)
+
+- Documentation updates.  <br/>
+  [@danilobuerger](https://github.com/danilobuerger) in [#4340](https://github.com/apollographql/apollo-client/pull/4340)
+
 ## Apollo Client (2.4.12)
 
 ### Apollo Client (2.4.12)
diff --git a/docs/source/recipes/static-typing.md b/docs/source/recipes/static-typing.md
index 3899284fed2..04eef98ac2e 100644
--- a/docs/source/recipes/static-typing.md
+++ b/docs/source/recipes/static-typing.md
@@ -41,7 +41,7 @@ Since the result of a query will be sent to the wrapped component as props, we w
 ```javascript
 import React from "react";
 import gql from "graphql-tag";
-import { graphql } from "react-apollo";
+import { ChildDataProps, graphql } from "react-apollo";
 
 const HERO_QUERY = gql`
   query GetCharacter($episode: Episode!) {
@@ -72,11 +72,13 @@ type Variables = {
   episode: string;
 };
 
+type ChildProps = ChildDataProps<{}, Response, Variables>;
+
 // Note that the first parameter here is an empty Object, which means we're
 // not checking incoming props for type safety in this example. The next
 // example (in the "Options" section) shows how the type safety of incoming
 // props can be ensured.
-const withCharacter = graphql<{}, Response, Variables>(HERO_QUERY, {
+const withCharacter = graphql<{}, Response, Variables, ChildProps>(HERO_QUERY, {
   options: () => ({
     variables: { episode: "JEDI" }
   })
@@ -96,7 +98,7 @@ Typically, variables to the query will be computed from the props of the wrapper
 ```javascript
 import React from "react";
 import gql from "graphql-tag";
-import { graphql } from "react-apollo";
+import { ChildDataProps, graphql } from "react-apollo";
 
 const HERO_QUERY = gql`
   query GetCharacter($episode: Episode!) {
@@ -131,7 +133,9 @@ type Variables = {
   episode: string;
 };
 
-const withCharacter = graphql<InputProps, Response, Variables>(HERO_QUERY, {
+type ChildProps = ChildDataProps<InputProps, Response, Variables>;
+
+const withCharacter = graphql<InputProps, Response, Variables, ChildProps>(HERO_QUERY, {
   options: ({ episode }) => ({
     variables: { episode }
   }),