Replace Graphcool with a working GraphQL endpoint in with-apollo-and-redux example (#19248)

The example stopped working when the GraphQL service [Graphcool](https://www.graph.cool/) shut down in July. I have replaced it with an [Hasura](https://hasura.io/) endpoint.

Fixes #19093 

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, use its [web IDE](https://nextjs-graphql-with-prisma-simple.vercel.app/api).
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com):

examples/with-apollo-and-redux/components/PostList.js

@@ -4,7 +4,7 @@ import PostUpvoter from './PostUpvoter'
 
 export const ALL_POSTS_QUERY = gql`
   query allPosts($first: Int!, $skip: Int!) {
-    allPosts(orderBy: createdAt_DESC, first: $first, skip: $skip) {
+    allPosts(orderBy: { createdAt: desc }, first: $first, skip: $skip) {
       id
       title
       votes

examples/with-apollo-and-redux/components/PostUpvoter.js

 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) {
+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',

examples/with-apollo-and-redux/components/Submit.js

 import { gql, useMutation } from '@apollo/client'
-import { ALL_POSTS_QUERY, allPostsQueryVars } from './PostList'
 
 const CREATE_POST_MUTATION = gql`
   mutation createPost($title: String!, $url: String!) {
@@ -26,19 +25,22 @@ const Submit = () => {
 
     createPost({
       variables: { title, url },
-      update: (proxy, { data: { createPost } }) => {
-        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,
-            allPosts: [createPost, ...data.allPosts],
+      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,
         })
       },
     })

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
 
@@ -9,7 +10,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://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({
@@ -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, {
+      // combine arrays using object equality (like in 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)

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",