simpleCollections: both, field policy subscribtion madness

Author: dkkloimwieder

client/src/App.css

@@ -6,7 +6,6 @@ body {
 }
 
 .todo-list {
-  list-style-type: none;
   padding: 0;
   width: 100%;
   margin-top: 2rem;

client/src/App.js

@@ -3,11 +3,11 @@ import TodoInput from './TodoInput';
 import TodoList from './TodoList';
 import './App.css';
 
-export default function App() {
+export default function App(props) {
   return (
     <>
       <TodoInput />
-      <TodoList />
+      <TodoList {...props} />
     </>
   );
 }

client/src/Todo.js

@@ -25,7 +25,7 @@ export default function Todo({ id, task, completed }) {
   };
 
   return (
-    <div className="todo-list__element">
+    <div key={id} className="todo-list__element">
       <div
         className="todo-list__text"
         style={{ textDecoration: completed ? 'line-through' : 'none' }}

client/src/TodoList.js

@@ -1,53 +1,77 @@
 import React from 'react';
 import Todo from './Todo';
-import { useQuery } from '@apollo/client';
+import { useQuery, useApolloClient } from '@apollo/client';
 import { GET_TODOS, SUBSCRIBE_TODOS } from './graphql';
 
 export default function TodoList() {
+  const client = useApolloClient();
   const { subscribeToMore, data, error, loading } = useQuery(GET_TODOS);
-  if (error) return <p className="alert">{error.message}</p>;
-  if (loading) return <p className="alert">loading...</p>;
-  const { todos } = data;
-  subscribeToMore({
-    document: SUBSCRIBE_TODOS,
-    updateQuery: (prev, { subscriptionData }) => {
-      if (!subscriptionData.data) return prev;
-      if (!subscriptionData.data.listen.relatedNode) {
-        return {
-          todos: prev.todos.filter(
-            (todo) => todo.id !== subscriptionData.data.listen.relatedNodeId
-          ),
-        };
-      } else {
-        let incomingTodo = prev.todos.find(
-          (todo) => todo.id === `${subscriptionData.data.listen.relatedNodeId}`
-        );
-        if (incomingTodo) {
+  //  if (error) return <p className="alert">{error.message}</p>;
+  //  if (loading) return <p className="alert">loading...</p>;
+  React.useEffect(() => {
+    const unsubscribe = subscribeToMore({
+      document: SUBSCRIBE_TODOS,
+      updateQuery: (prev, { subscriptionData }) => {
+        if (!subscriptionData.data) return prev;
+        if (!subscriptionData.data.listen.relatedNode) {
           return {
-            todos: prev.todos.map((todo) =>
-              todo.id === incomingTodo.id
-                ? { ...todo, completed: !todo.completed }
-                : todo
-            ),
+            todosConnection: {
+              ...prev.todosConnection,
+              nodes: prev.todosConnection.nodes.map((todo) =>
+                todo.id === subscriptionData.data.listen.relatedNodeId
+                  ? { ...todo, deleted: true }
+                  : todo
+              ),
+            },
           };
         } else {
-          return {
-            todos: [
-              ...prev.todos,
-              {
-                id: subscriptionData.data.listen.relatedNodeId,
-                ...subscriptionData.data.listen.relatedNode,
+          let incomingTodo = prev.todosConnection.nodes.find(
+            (todo) =>
+              todo.id === `${subscriptionData.data.listen.relatedNodeId}`
+          );
+          if (incomingTodo) {
+            return {
+              todosConnection: {
+                ...prev.todosConnection,
+                nodes: prev.todosConnection.nodes.map((todo) =>
+                  todo.id === subscriptionData.data.listen.relatedNodeId
+                    ? {
+                        ...todo,
+                        completed:
+                          subscriptionData.data.listen.relatedNode.completed,
+                      }
+                    : todo
+                ),
               },
-            ],
-          };
+            };
+          } else {
+            return {
+              todosConnection: {
+                ...prev.todosConnection,
+                nodes: [
+                  ...prev.todosConnection.nodes,
+                  {
+                    id: subscriptionData.data.listen.relatedNodeId,
+                    ...subscriptionData.data.listen.relatedNode,
+                  },
+                ],
+              },
+            };
+          }
         }
-      }
-    },
-  });
+      },
+    });
+    return unsubscribe;
+  }, [subscribeToMore, client.cache]);
 
+  if (loading) return <h1>loading</h1>;
+  if (error) return <h1>error</h1>;
+  const {
+    todosConnection: { nodes },
+  } = data;
   return (
     <div className="todo-list">
-      {todos.map((todo) => {
+      {nodes.map((todo) => {
         return <Todo key={todo.id} {...todo} />;
       })}
     </div>

client/src/Todo_uhoh.js

@@ -3,10 +3,13 @@ import { gql } from '@apollo/client';
 /* get all todos */
 export const GET_TODOS = gql`
   query GetTodos {
-    todos {
-      id
-      task
-      completed
+    todosConnection {
+      nodes {
+        completed
+        id
+        task
+        deleted @client
+      }
     }
   }
 `;
@@ -30,6 +33,7 @@ export const UPDATE_COMPLETED = gql`
     updateTodoById(input: { patch: { completed: $completed }, id: $id }) {
       todo {
         id
+        completed
       }
     }
   }

client/src/graphql.js

@@ -41,8 +41,30 @@ const client = new ApolloClient({
     typePolicies: {
       Query: {
         fields: {
-          todos: {
-            merge: false,
+          todosConnection: {
+            merge: true,
+          },
+        },
+      },
+      TodosConnection: {
+        fields: {
+          nodes: {
+            merge(incoming, { readField, cache }) {
+              return incoming.map((todo) =>
+                readField('deleted', todo)
+                  ? cache.evict(cache.identify(todo)) && {}
+                  : todo
+              );
+            },
+          },
+        },
+      },
+      Todo: {
+        fields: {
+          deleted: {
+            read(deleted = false) {
+              return deleted;
+            },
           },
         },
       },

client/src/index.js

@@ -26,7 +26,7 @@ module.exports = postgraphile(
     watchPg: true,
     graphiql: true,
     enhanceGraphiql: true,
-    simpleCollections: 'only',
+    simpleCollections: 'both',
     graphileBuildOptions: { pgOmitListSuffix: true },
     classicIds: true,
     pluginHook,