Fixed graphql-hooks example data prefetch (#13799)

- Fixes the Next.js `with-graphql-hooks` example so that data is prefetched during SSR:
    - The example was using an old version of `graphql-hooks` where SSR was broken
    - It had a bug where the `graphql-hooks` client passed in to the `AppTree` as a prop was not being used (instead was creating a new client every time)

This resolves https://github.com/nearform/graphql-hooks/issues/439 for `graphql-hooks`.

examples/with-graphql-hooks/components/post-list.js

@@ -25,7 +25,9 @@ export default function PostList() {
     variables: { skip, first: 10 },
     updateData: (prevResult, result) => ({
       ...result,
-      allPosts: [...prevResult.allPosts, ...result.allPosts],
+      allPosts: prevResult
+        ? [...prevResult.allPosts, ...result.allPosts]
+        : result.allPosts,
     }),
   })
 

examples/with-graphql-hooks/lib/with-graphql-client.js

@@ -16,9 +16,9 @@ export default function withGraphqlClient(App) {
 
       // Run all GraphQL queries in the component tree
       // and extract the resulting data
-      const graphQLClient = initGraphQL()
       let graphQLState = {}
       if (typeof window === 'undefined') {
+        const graphQLClient = initGraphQL()
         try {
           // Run all GraphQL queries
           graphQLState = await getInitialState({
@@ -45,7 +45,12 @@ export default function withGraphqlClient(App) {
 
     constructor(props) {
       super(props)
-      this.graphQLClient = initGraphQL(props.graphQLState)
+      if (props.graphQLClient) {
+        // During SSR the GraphQL client is provided as a prop
+        this.graphQLClient = props.graphQLClient
+      } else {
+        this.graphQLClient = initGraphQL(props.graphQLState)
+      }
     }
 
     render() {

examples/with-graphql-hooks/package.json

@@ -11,9 +11,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "graphql-hooks": "^3.2.1",
-    "graphql-hooks-memcache": "^1.0.4",
-    "graphql-hooks-ssr": "^1.0.1",
+    "graphql-hooks": "^4.4.4",
+    "graphql-hooks-memcache": "^1.3.2",
+    "graphql-hooks-ssr": "^1.1.5",
     "next": "latest",
     "prop-types": "^15.7.2",
     "react": "^16.8.2",