From 12ff827431bc2834855c946838b387cda8bbcf6d Mon Sep 17 00:00:00 2001
From: cascandaliato <8927157+cascandaliato@users.noreply.github.com>
Date: Tue, 17 Nov 2020 14:00:54 +0100
Subject: [PATCH 1/3] Replace graph.cool endpoint with hasura.io

---
 examples/with-apollo-and-redux/README.md         |  2 ++
 .../with-apollo-and-redux/components/PostList.js | 16 +++++++++-------
 .../components/PostUpvoter.js                    |  4 ++--
 .../with-apollo-and-redux/components/Submit.js   |  6 +++---
 examples/with-apollo-and-redux/lib/apollo.js     |  2 +-
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/examples/with-apollo-and-redux/README.md b/examples/with-apollo-and-redux/README.md
index 622fd8c1528d8..627b996e222b6 100644
--- a/examples/with-apollo-and-redux/README.md
+++ b/examples/with-apollo-and-redux/README.md
@@ -4,6 +4,8 @@ This example serves as a conduit if you were using Apollo 1.X with Redux, and ar
 
 In 3.0.0, Apollo serves out-of-the-box support for redux in favor of Apollo's state management. This example aims to be an amalgamation of the [`with-apollo`](https://github.com/vercel/next.js/tree/master/examples/with-apollo) and [`with-redux`](https://github.com/vercel/next.js/tree/master/examples/with-redux) examples.
 
+To inspect the GraphQL API, go to [Online GraphiQL](https://graphiql-online.com/) and enter `https://top-shepherd-94.hasura.app/v1/graphql` as API endpoint URL.
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com):
diff --git a/examples/with-apollo-and-redux/components/PostList.js b/examples/with-apollo-and-redux/components/PostList.js
index a2a264488f01e..f0197a8ea6399 100644
--- a/examples/with-apollo-and-redux/components/PostList.js
+++ b/examples/with-apollo-and-redux/components/PostList.js
@@ -4,15 +4,17 @@ import PostUpvoter from './PostUpvoter'
 
 export const ALL_POSTS_QUERY = gql`
   query allPosts($first: Int!, $skip: Int!) {
-    allPosts(orderBy: createdAt_DESC, first: $first, skip: $skip) {
+    Posts(offset: $skip, limit: $first, order_by: { createdAt: desc }) {
       id
       title
       votes
       url
       createdAt
     }
-    _allPostsMeta {
-      count
+    Posts_aggregate {
+      aggregate {
+        count
+      }
     }
   }
 `
@@ -38,7 +40,7 @@ export default function PostList() {
   const loadMorePosts = () => {
     fetchMore({
       variables: {
-        skip: allPosts.length,
+        skip: Posts.length,
       },
     })
   }
@@ -46,13 +48,13 @@ export default function PostList() {
   if (error) return <ErrorMessage message="Error loading posts." />
   if (loading && !loadingMorePosts) return <div>Loading</div>
 
-  const { allPosts, _allPostsMeta } = data
-  const areMorePosts = allPosts.length < _allPostsMeta.count
+  const { Posts, Posts_aggregate } = data
+  const areMorePosts = Posts.length < Posts_aggregate.count
 
   return (
     <section>
       <ul>
-        {allPosts.map((post, index) => (
+        {Posts.map((post, index) => (
           <li key={post.id}>
             <div>
               <span>{index + 1}. </span>
diff --git a/examples/with-apollo-and-redux/components/PostUpvoter.js b/examples/with-apollo-and-redux/components/PostUpvoter.js
index 122ad86bfe2a5..3e9ea9b8d736b 100644
--- a/examples/with-apollo-and-redux/components/PostUpvoter.js
+++ b/examples/with-apollo-and-redux/components/PostUpvoter.js
@@ -2,8 +2,8 @@ import { gql, useMutation } from '@apollo/client'
 import PropTypes from 'prop-types'
 
 const UPDATE_POST_MUTATION = gql`
-  mutation updatePost($id: ID!, $votes: Int) {
-    updatePost(id: $id, votes: $votes) {
+  mutation updatePost($id: uuid!, $votes: Int) {
+    update_Posts_by_pk(pk_columns: { id: $id }, _set: { votes: $votes }) {
       __typename
       id
       votes
diff --git a/examples/with-apollo-and-redux/components/Submit.js b/examples/with-apollo-and-redux/components/Submit.js
index f3a44607f1d37..7148e670a60e1 100644
--- a/examples/with-apollo-and-redux/components/Submit.js
+++ b/examples/with-apollo-and-redux/components/Submit.js
@@ -3,7 +3,7 @@ import { ALL_POSTS_QUERY, allPostsQueryVars } from './PostList'
 
 const CREATE_POST_MUTATION = gql`
   mutation createPost($title: String!, $url: String!) {
-    createPost(title: $title, url: $url) {
+    insert_Posts_one(object: { title: $title, url: $url }) {
       id
       title
       votes
@@ -26,7 +26,7 @@ const Submit = () => {
 
     createPost({
       variables: { title, url },
-      update: (proxy, { data: { createPost } }) => {
+      update: (proxy, { data: { insert_Posts_one } }) => {
         const data = proxy.readQuery({
           query: ALL_POSTS_QUERY,
           variables: allPostsQueryVars,
@@ -36,7 +36,7 @@ const Submit = () => {
           query: ALL_POSTS_QUERY,
           data: {
             ...data,
-            allPosts: [createPost, ...data.allPosts],
+            Posts: [insert_Posts_one, ...data.Posts],
           },
           variables: allPostsQueryVars,
         })
diff --git a/examples/with-apollo-and-redux/lib/apollo.js b/examples/with-apollo-and-redux/lib/apollo.js
index 7c66dc9bb8655..edb26caf51e2d 100644
--- a/examples/with-apollo-and-redux/lib/apollo.js
+++ b/examples/with-apollo-and-redux/lib/apollo.js
@@ -9,7 +9,7 @@ function createApolloClient() {
   return new ApolloClient({
     ssrMode: typeof window === 'undefined',
     link: new HttpLink({
-      uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute)
+      uri: 'https://top-shepherd-94.hasura.app/v1/graphql', // Server URL (must be absolute)
       credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
     }),
     cache: new InMemoryCache({

From 26cda9862f139d40265a8a19f09e78ad57930c96 Mon Sep 17 00:00:00 2001
From: cascandaliato <8927157+cascandaliato@users.noreply.github.com>
Date: Tue, 17 Nov 2020 21:38:08 +0100
Subject: [PATCH 2/3] fix caching in apollo client

---
 .../with-apollo-and-redux/components/PostList.js    |  4 ++--
 examples/with-apollo-and-redux/components/Submit.js |  2 +-
 examples/with-apollo-and-redux/lib/apollo.js        | 13 +++++++++++--
 examples/with-apollo-and-redux/package.json         |  1 +
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/examples/with-apollo-and-redux/components/PostList.js b/examples/with-apollo-and-redux/components/PostList.js
index f0197a8ea6399..74e2b27d87641 100644
--- a/examples/with-apollo-and-redux/components/PostList.js
+++ b/examples/with-apollo-and-redux/components/PostList.js
@@ -20,7 +20,7 @@ export const ALL_POSTS_QUERY = gql`
 `
 export const allPostsQueryVars = {
   skip: 0,
-  first: 10,
+  first: 3,
 }
 
 export default function PostList() {
@@ -49,7 +49,7 @@ export default function PostList() {
   if (loading && !loadingMorePosts) return <div>Loading</div>
 
   const { Posts, Posts_aggregate } = data
-  const areMorePosts = Posts.length < Posts_aggregate.count
+  const areMorePosts = Posts.length < Posts_aggregate.aggregate.count
 
   return (
     <section>
diff --git a/examples/with-apollo-and-redux/components/Submit.js b/examples/with-apollo-and-redux/components/Submit.js
index 7148e670a60e1..11642b009bf64 100644
--- a/examples/with-apollo-and-redux/components/Submit.js
+++ b/examples/with-apollo-and-redux/components/Submit.js
@@ -36,7 +36,7 @@ const Submit = () => {
           query: ALL_POSTS_QUERY,
           data: {
             ...data,
-            Posts: [insert_Posts_one, ...data.Posts],
+            Posts: [insert_Posts_one],
           },
           variables: allPostsQueryVars,
         })
diff --git a/examples/with-apollo-and-redux/lib/apollo.js b/examples/with-apollo-and-redux/lib/apollo.js
index edb26caf51e2d..7a39bf3459d58 100644
--- a/examples/with-apollo-and-redux/lib/apollo.js
+++ b/examples/with-apollo-and-redux/lib/apollo.js
@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
 import { concatPagination } from '@apollo/client/utilities'
 import merge from 'deepmerge'
+import isEqual from 'lodash/isEqual'
 
 let apolloClient
 
@@ -16,7 +17,7 @@ function createApolloClient() {
       typePolicies: {
         Query: {
           fields: {
-            allPosts: concatPagination(),
+            Posts: concatPagination(),
           },
         },
       },
@@ -34,7 +35,15 @@ export function initializeApollo(initialState = null) {
     const existingCache = _apolloClient.extract()
 
     // Merge the existing cache into data passed from getStaticProps/getServerSideProps
-    const data = merge(initialState, existingCache)
+    const data = merge(initialState, existingCache, {
+      // treat arrays as sets
+      arrayMerge: (destinationArray, sourceArray) => [
+        ...sourceArray,
+        ...destinationArray.filter((d) =>
+          sourceArray.every((s) => !isEqual(d, s))
+        ),
+      ],
+    })
 
     // Restore the cache with the merged data
     _apolloClient.cache.restore(data)
diff --git a/examples/with-apollo-and-redux/package.json b/examples/with-apollo-and-redux/package.json
index 79f629c1c5892..8e557367eae84 100644
--- a/examples/with-apollo-and-redux/package.json
+++ b/examples/with-apollo-and-redux/package.json
@@ -10,6 +10,7 @@
     "@apollo/client": "^3.0.0",
     "deepmerge": "^4.2.2",
     "graphql": "14.5.8",
+    "lodash": "4.17.20",
     "next": "latest",
     "prop-types": "^15.6.0",
     "react": "^16.11.0",

From 3f04a79660733d7d49b789f1e9fc7b83ad55a939 Mon Sep 17 00:00:00 2001
From: cascandaliato <8927157+cascandaliato@users.noreply.github.com>
Date: Thu, 26 Nov 2020 09:19:22 +0100
Subject: [PATCH 3/3] Reuse API endpoint from with-apollo example

---
 examples/with-apollo-and-redux/README.md      |  2 +-
 .../components/PostList.js                    | 18 +++++------
 .../components/PostUpvoter.js                 | 11 ++++---
 .../components/Submit.js                      | 30 ++++++++++---------
 examples/with-apollo-and-redux/lib/apollo.js  |  6 ++--
 5 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/examples/with-apollo-and-redux/README.md b/examples/with-apollo-and-redux/README.md
index 627b996e222b6..267ec45b04a83 100644
--- a/examples/with-apollo-and-redux/README.md
+++ b/examples/with-apollo-and-redux/README.md
@@ -4,7 +4,7 @@ This example serves as a conduit if you were using Apollo 1.X with Redux, and ar
 
 In 3.0.0, Apollo serves out-of-the-box support for redux in favor of Apollo's state management. This example aims to be an amalgamation of the [`with-apollo`](https://github.com/vercel/next.js/tree/master/examples/with-apollo) and [`with-redux`](https://github.com/vercel/next.js/tree/master/examples/with-redux) examples.
 
-To inspect the GraphQL API, go to [Online GraphiQL](https://graphiql-online.com/) and enter `https://top-shepherd-94.hasura.app/v1/graphql` as API endpoint URL.
+To inspect the GraphQL API, use its [web IDE](https://nextjs-graphql-with-prisma-simple.vercel.app/api).
 
 ## Deploy your own
 
diff --git a/examples/with-apollo-and-redux/components/PostList.js b/examples/with-apollo-and-redux/components/PostList.js
index 74e2b27d87641..d9b01d3ef1e6a 100644
--- a/examples/with-apollo-and-redux/components/PostList.js
+++ b/examples/with-apollo-and-redux/components/PostList.js
@@ -4,23 +4,21 @@ import PostUpvoter from './PostUpvoter'
 
 export const ALL_POSTS_QUERY = gql`
   query allPosts($first: Int!, $skip: Int!) {
-    Posts(offset: $skip, limit: $first, order_by: { createdAt: desc }) {
+    allPosts(orderBy: { createdAt: desc }, first: $first, skip: $skip) {
       id
       title
       votes
       url
       createdAt
     }
-    Posts_aggregate {
-      aggregate {
-        count
-      }
+    _allPostsMeta {
+      count
     }
   }
 `
 export const allPostsQueryVars = {
   skip: 0,
-  first: 3,
+  first: 10,
 }
 
 export default function PostList() {
@@ -40,7 +38,7 @@ export default function PostList() {
   const loadMorePosts = () => {
     fetchMore({
       variables: {
-        skip: Posts.length,
+        skip: allPosts.length,
       },
     })
   }
@@ -48,13 +46,13 @@ export default function PostList() {
   if (error) return <ErrorMessage message="Error loading posts." />
   if (loading && !loadingMorePosts) return <div>Loading</div>
 
-  const { Posts, Posts_aggregate } = data
-  const areMorePosts = Posts.length < Posts_aggregate.aggregate.count
+  const { allPosts, _allPostsMeta } = data
+  const areMorePosts = allPosts.length < _allPostsMeta.count
 
   return (
     <section>
       <ul>
-        {Posts.map((post, index) => (
+        {allPosts.map((post, index) => (
           <li key={post.id}>
             <div>
               <span>{index + 1}. </span>
diff --git a/examples/with-apollo-and-redux/components/PostUpvoter.js b/examples/with-apollo-and-redux/components/PostUpvoter.js
index 3e9ea9b8d736b..a34d697113798 100644
--- a/examples/with-apollo-and-redux/components/PostUpvoter.js
+++ b/examples/with-apollo-and-redux/components/PostUpvoter.js
@@ -1,9 +1,9 @@
 import { gql, useMutation } from '@apollo/client'
 import PropTypes from 'prop-types'
 
-const UPDATE_POST_MUTATION = gql`
-  mutation updatePost($id: uuid!, $votes: Int) {
-    update_Posts_by_pk(pk_columns: { id: $id }, _set: { votes: $votes }) {
+const VOTE_POST = gql`
+  mutation votePost($id: String!) {
+    votePost(id: $id) {
       __typename
       id
       votes
@@ -12,13 +12,12 @@ const UPDATE_POST_MUTATION = gql`
 `
 
 const PostUpvoter = ({ votes, id }) => {
-  const [updatePost] = useMutation(UPDATE_POST_MUTATION)
+  const [votePost] = useMutation(VOTE_POST)
 
   const upvotePost = () => {
-    updatePost({
+    votePost({
       variables: {
         id,
-        votes: votes + 1,
       },
       optimisticResponse: {
         __typename: 'Mutation',
diff --git a/examples/with-apollo-and-redux/components/Submit.js b/examples/with-apollo-and-redux/components/Submit.js
index 11642b009bf64..5b0cd4b17b2b3 100644
--- a/examples/with-apollo-and-redux/components/Submit.js
+++ b/examples/with-apollo-and-redux/components/Submit.js
@@ -1,9 +1,8 @@
 import { gql, useMutation } from '@apollo/client'
-import { ALL_POSTS_QUERY, allPostsQueryVars } from './PostList'
 
 const CREATE_POST_MUTATION = gql`
   mutation createPost($title: String!, $url: String!) {
-    insert_Posts_one(object: { title: $title, url: $url }) {
+    createPost(title: $title, url: $url) {
       id
       title
       votes
@@ -26,19 +25,22 @@ const Submit = () => {
 
     createPost({
       variables: { title, url },
-      update: (proxy, { data: { insert_Posts_one } }) => {
-        const data = proxy.readQuery({
-          query: ALL_POSTS_QUERY,
-          variables: allPostsQueryVars,
-        })
-        // Update the cache with the new post at the top of the
-        proxy.writeQuery({
-          query: ALL_POSTS_QUERY,
-          data: {
-            ...data,
-            Posts: [insert_Posts_one],
+      update: (cache, { data: { createPost } }) => {
+        cache.modify({
+          fields: {
+            allPosts(existingPosts = []) {
+              const newPostRef = cache.writeFragment({
+                data: createPost,
+                fragment: gql`
+                  fragment NewPost on allPosts {
+                    id
+                    type
+                  }
+                `,
+              })
+              return [newPostRef, ...existingPosts]
+            },
           },
-          variables: allPostsQueryVars,
         })
       },
     })
diff --git a/examples/with-apollo-and-redux/lib/apollo.js b/examples/with-apollo-and-redux/lib/apollo.js
index 7a39bf3459d58..b91ca34b1c7df 100644
--- a/examples/with-apollo-and-redux/lib/apollo.js
+++ b/examples/with-apollo-and-redux/lib/apollo.js
@@ -10,14 +10,14 @@ function createApolloClient() {
   return new ApolloClient({
     ssrMode: typeof window === 'undefined',
     link: new HttpLink({
-      uri: 'https://top-shepherd-94.hasura.app/v1/graphql', // Server URL (must be absolute)
+      uri: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
       credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
     }),
     cache: new InMemoryCache({
       typePolicies: {
         Query: {
           fields: {
-            Posts: concatPagination(),
+            allPosts: concatPagination(),
           },
         },
       },
@@ -36,7 +36,7 @@ export function initializeApollo(initialState = null) {
 
     // Merge the existing cache into data passed from getStaticProps/getServerSideProps
     const data = merge(initialState, existingCache, {
-      // treat arrays as sets
+      // combine arrays using object equality (like in sets)
       arrayMerge: (destinationArray, sourceArray) => [
         ...sourceArray,
         ...destinationArray.filter((d) =>