Replace Graphcool with a working GraphQL endpoint in with-apollo-and-redux example

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):

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

@@ -4,21 +4,23 @@ 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
+      }
     }
   }
 `
 export const allPostsQueryVars = {
   skip: 0,
-  first: 10,
+  first: 3,
 }
 
 export default function PostList() {
@@ -38,21 +40,21 @@ export default function PostList() {
   const loadMorePosts = () => {
     fetchMore({
       variables: {
-        skip: allPosts.length,
+        skip: Posts.length,
       },
     })
   }
 
   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.aggregate.count
 
   return (
     <section>
       <ul>
-        {allPosts.map((post, index) => (
+        {Posts.map((post, index) => (
           <li key={post.id}>
             <div>
               <span>{index + 1}. </span>

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

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],
           },
           variables: allPostsQueryVars,
         })

examples/with-apollo-and-redux/lib/apollo.js

@@ -2,21 +2,22 @@ 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
 
 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({
       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)

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